css和js优化

This article was sponsored by Aussie Hosting. Thank you for supporting the partners who make SitePoint possible.

本文由Aussie Hosting赞助。 感谢您支持使SitePoint成为可能的合作伙伴。

User experience is the most important factor when it comes to the success of your online venture.

用户体验是成功开展在线业务的最重要因素。

It doesn't matter if you run a niche blog, SaaS site, or an online store. If you somehow manage to botch up your audience's experience, don't expect to convert any of them into paying customers.

您经营利基博客，SaaS网站或在线商店都没有关系。 如果您设法以某种方式提升受众的体验，不要指望将其中的任何一个转化为付费客户。

The good news is, any brand can methodically improve user experience by narrowing down on specific on-page factors.

好消息是，任何品牌都可以通过缩小特定页面上的因素来有条不紊地改善用户体验。

Loading speed, for instance, is something that most website owners easily overlook.

例如，大多数网站所有者容易忽略加载速度 。

According to conversion rate data, increasing your Internet site speed from eight seconds to two seconds may lead to a 74 percent increase in conversion rate.

根据转换率数据，将您的Internet站点速度从八秒提高到两秒可能会导致转换率提高74％ 。

That means that a slow site could cost you nearly half of your potential customers.

这意味着网站运行缓慢可能会使您损失近一半的潜在客户。

使用PageSpeed Insights查看全貌 (Seeing the Full Picture with PageSpeed Insights)

To determine issues on your website that affect loading speed, you can use Google PageSpeed Insights. It's a free tool that automatically scans both the desktop and mobile versions of your site.

要确定影响加载速度的网站问题，可以使用Google PageSpeed Insights 。 这是一个免费的工具，可以自动扫描两种桌面和您的网站的移动版本。

In addition to the issues detected, PageSpeed Insights will also show you a handful of actionable recommendations.

除了检测到的问题之外，PageSpeed Insights还将向您显示一些可行的建议。

For site owners who never gave any thought to page loading speed, you may encounter the following issues:

对于从未考虑过页面加载速度的网站所有者，您可能会遇到以下问题：

These indicate that your CSS and JavaScript code is slowing your site down. And while it might sound like a job for full-fledged web developers, they're fairly easy to optimize with the help of tools.

这些表明您的CSS和JavaScript代码正在减慢您的网站速度。 尽管对于成熟的Web开发人员来说这似乎是一项工作，但借助工具进行优化是相当容易的。

Without further ado, here are the steps you need to take to minify your CSS and JavaScript assets.

事不宜迟，这里有你需要采取来缩小你CSS和JavaScript资产的步骤。

确定要缩小的代码 (Determine the Code to be Minified)

Code minification is the practice of deleting characters that don't serve any function other than improving readability.

代码最小化是删除除提高可读性以外没有任何功能的字符的做法。

For example, inline comments may help developers comprehend what a particular section of code does. While it's useful for reviewing or debugging, they may also bloat the size of the code.

例如， 内联注释可以帮助开发人员理解特定代码段的功能。 虽然对于检查或调试很有用，但它们也可能会使代码的大小膨胀。

Minification removes these excess characters — therefore reduces bandwidth usage and boosts page loading speed.

缩小消除了这些多余的字符，因此减少了带宽使用并提高了页面加载速度。

Using PageSpeed Insights, you can easily identify which code requires minification. Simply click "Show how to fix" and follow the path in your CMS (Content Management System) or FTP (File Transfer Protocol) client.

使用PageSpeed Insights，您可以轻松确定需要缩减的代码。 只需单击“显示如何修复”，然后遵循CMS(内容管理系统)或FTP(文件传输协议)客户端中的路径。

For example, if your website runs on WordPress, then all of your code should be consolidated in the "Editor" section. This can be found by under the "Appearance" tab from the primary dashboard.

例如，如果您的网站在WordPress上运行，则所有代码都应合并在“编辑器”部分中。 可以在主仪表板的“外观”选项卡下找到。

优化代码 (Optimizing Your Codes)

Now that you've found the code in question, it's time to learn how to minify them.

现在，您已经找到了有问题的代码，是时候学习如何最小化它们了。

Perhaps the easiest way to minify your code is to leverage automated tools. When it comes to CSS and JavaScript, some of the best tools for the job are CSS Minifier and JSCompress.

最小化代码的最简单方法可能是利用自动化工具。 当涉及CSS和JavaScript时，一些最好的工具是CSS Minifier和JSCompress 。

使用CSS Minifier (Using CSS Minifier)

CSS Minifier is a free and simple tool that automatically compresses CSS assets. All you need to do is paste the code into the input field, set a compression level, and click "Minify."

CSS Minifier是一个免费且简单的工具，可自动压缩CSS资产。 您需要做的就是将代码粘贴到输入字段中，设置压缩级别，然后单击“缩小”。

Depending on the size of your code, it may take a few seconds to a minute to minify your code. Your new code can then be copied back into your CMS or FTP client interface.

根据代码的大小，可能需要几秒钟到一分钟的时间来缩小代码。 然后，您可以将新代码复制回CMS或FTP客户端界面。

Important: As a precaution, don't forget to create backups before making any changes in your site's code. Creating offline or cloud-based copies is a straightforward way to do this.

重要提示： 作为预防措施，在对网站代码进行任何更改之前，请不要忘记创建备份。 创建离线或基于云的副本是执行此操作的直接方法。

To test if your minification worked, go ahead and run another analysis on PageSpeed Insights. The CSS file you recently compressed should no longer appear under the "Minify CSS" details.

要测试缩小效果是否有效，请继续在PageSpeed Insights上运行其他分析。 您最近压缩CSS文件不应再出现在“缩小CSS”详细信息下。

在JavaScript上使用异步加载 (Using Asynchronous Loading on JavaScript)

Compared to CSS, JavaScript is slightly trickier to minify correctly. Before you run your code through JSCompress, consider implementing asynchronous code loading first.

与CSS相比，JavaScript要正确缩小要稍微复杂一些。 在通过JSCompress运行代码之前，请考虑先实现异步代码加载。

Also referred to as "Lazy Loading" — but in the context of JavaScript, asynchronous loading works by dynamically loading functions.

也称为“延迟加载”-但是在JavaScript的上下文中，异步加载通过动态加载函数来实现。

To use asynchronous loading, just add the "async" tag when calling the .js file. This can be done in your website's HTML source code.

要使用异步加载，只需在调用.js文件时添加“ async”标签。 这可以在您网站HTML源代码中完成。

Here's an example on how to do this:

这是有关如何执行此操作的示例：

<script src=”yourscript.js” async> </script>

You can refer to this post for more information on how this works and its usage. If you're completely new to HTML, read this beginner's guide until you're comfortable with the basics.

您可以参考这篇文章，以获得有关其工作方式及其用法的更多信息。 如果您是HTML的新手 ，请阅读此初学者指南，直到对基础知识感到满意为止。

合并JavaScript文件 (Combining JavaScript Files)

Another point worth mentioning when it comes to optimizing JavaScript is to combine files in a single page. Doing so will reduce the number of HTTP requests that the browser makes, which would invariably speed up loading time.

在优化JavaScript时，值得一提的另一点是将文件合并在一个页面中。 这样做将减少浏览器发出的HTTP请求的数量，这将不可避免地加快加载时间。

For example, rather than calling multiple .js files in your source code:

例如，不要在源代码中调用多个.js文件：

<script src=”http://www.yoursite.com/menu.js”> </script>
<script src=”http://www.yoursite.com/tools.js”> </script>
<script src=”http://www.yoursite.com/footer.js”> </script>

You can combine them into a single JavaScript file using your editor and call them all at once:

您可以使用编辑器将它们组合成一个JavaScript文件，然后一次调用它们：

<script src=”http://www.yoursite.com/all.js”> </script>

To further improve the processing time of your scripts, also practice omitting the "http" and "type" tags. For example, rather than using:

为了进一步缩短脚本的处理时间，还应练习省略“ http”和“ type”标签。 例如，而不是使用：

<script src="http: //www.yoursite.com/all.js" type="text/javascript" > </script>

You can simply use:

您可以简单地使用：

<script src="//www.yoursite.com/all.js"> </script>

使用JSCompress (Using JSCompress)

Finally, using JSCompress is just as simple as using CSS Minifier. Simply paste your code into the input field and click the "Compress JavaScript" button.

最后，使用JSCompress与使用CSS Minifier一样简单。 只需将代码粘贴到输入字段中，然后单击“压缩JavaScript”按钮即可。

Next, navigate to the "Output" tab to view your compressed JavaScript:

接下来，导航到“输出”选项卡以查看压缩JavaScript：

删除冗余代码 (Removing Redundant Code)

Another performance issue that your site may have is the presence of redundant or duplicate code. These are usually caused by page elements that were deleted, causing the code to remain unused.

您的站点可能存在的另一个性能问题是冗余或重复代码的存在。 这些通常是由删除的页面元素引起的，从而导致代码保持未使用状态。

A great way to find redundant code is to use the built-in developer tools in Google Chrome. This can be enabled by opening the main menu, selecting "More Tools," and then clicking "Developer Tools."

查找冗余代码的一种好方法是使用Google Chrome浏览器中的内置开发人员工具。 可以通过打开主菜单，选择“更多工具”，然后单击“开发人员工具”来启用此功能。

Make sure you are on the page you want to optimize when you do this.

确保执行此操作时位于要优化的页面上。

After activating developer tools, look for "Coverage" in the "More Tools" subsection from the settings menu.

激活开发人员工具后，在设置菜单的“更多工具”小节中查找“覆盖率”。

This will open the "Coverage" tab under the developer console. From there, click the "Instrument Coverage" button to start the test.

这将打开开发者控制台下的“覆盖”标签。 从那里，单击“仪器覆盖率”按钮以开始测试。

Once the test finishes, you should see a list of code assets along with their unused bytes. This is represented by the red and green bar to the right.

测试完成后，您应该会看到代码资产及其未使用字节的列表。 这由右侧的红色和绿色条表示。

If this is your first time checking for redundant code, you'll notice a mix of CSS and JavaScript assets in the list. Closely inspect these to find out whether any are not in use.

如果这是您第一次检查冗余代码，则会在列表中注意到CSS和JavaScript资产的混合。 仔细检查它们，以查明是否没有使用它们。

Removing all the excess code assets one by one may be tedious. But if you want to offer a flawless user experience, then it's a necessity.

一个接一个地删除所有多余的代码资产可能很繁琐。 但是，如果您想提供完美的用户体验，那么这是必需的。

Also, remember that unused code may build up over time, so schedule another time to revisit and clean up your repository.

另外，请记住，未使用的代码可能会随着时间的推移而累积，因此请安排另一个时间来重新访问并清理您的存储库。

结论 (Conclusion)

For non-developers, optimizing your website's CSS and JavaScript code may sound too technical at the surface. But with the right tools and web host, you don't need to be a seasoned web developer to make it happen.

对于非开发人员，从表面上看，优化网站CSS和JavaScript代码可能听起来过于技术性。 但是，只要有了合适的工具和网络托管商，您就无需成为经验丰富的Web开发人员即可实现这一目标。

翻译自: https://www.sitepoint.com/how-to-optimize-css-and-js-for-faster-sites/

css和js优化