如何优化更快的网站的CS和JS

网站加载速度对用户体验至关重要，而这往往被网站所有者忽视。将网站加载速度从8秒提升到2秒，转换率可提升74%，这意味着缓慢的网站可能损失近一半的潜在客户。

代码压缩，即去除仅用于提高可读性的字符，可以减少带宽使用并提高页面加载速度。CSS Minifier和JSCompress等工具可以帮助您完成此过程。此外，在压缩JavaScript之前，考虑实施异步代码加载以进一步优化性能也是值得的。

冗余或重复的代码也会减慢网站速度。使用Google Chrome内置的开发者工具可以帮助识别和删除这些不必要的代码资源。定期检查并删除未使用的代码以保持最佳网站性能非常重要。

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

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

无论您运营的是利基博客、SaaS网站还是在线商店，如果您以某种方式破坏了观众的体验，就不要指望将他们转化为付费客户。

好消息是，任何品牌都可以通过缩小特定页面内因素来系统地改善用户体验。

例如，加载速度是大多数网站所有者容易忽视的问题。

根据转化率数据，将您的网站速度从8秒提高到2秒，可能会导致转化率提高74%。

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

使用PageSpeed Insights全面了解情况

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

除了检测到的问题外，PageSpeed Insights还会显示一些可操作的建议。

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

这些表明您的CSS和JavaScript代码正在减慢您的网站速度。虽然这听起来像是完整网页开发人员的工作，但借助工具，它们相当容易优化。

事不宜迟，以下是在您需要采取的步骤，以压缩您的CSS和JavaScript资源。

确定要压缩的代码

代码压缩是指删除除了提高可读性之外没有任何其他功能的字符的做法。

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

压缩会删除这些多余的字符——因此会减少带宽使用并提高页面加载速度。

使用PageSpeed Insights，您可以轻松识别需要压缩的代码。只需单击“显示如何修复”，然后在您的CMS（内容管理系统）或FTP（文件传输协议）客户端中按照路径操作。

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

优化您的代码

既然您已经找到了相关的代码，那么就该学习如何压缩它们了。

压缩代码最简单的方法可能是利用自动化工具。对于CSS和JavaScript，一些最好的工具是CSS Minifier和JSCompress。

使用CSS Minifier

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

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

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

要测试您的压缩是否有效，请在PageSpeed Insights上运行另一次分析。您最近压缩的CSS文件不应再出现在“压缩CSS”详细信息下。

### 在JavaScript上使用异步加载

与CSS相比，JavaScript的正确压缩稍微棘手一些。在使用JSCompress运行代码之前，请先考虑实施异步代码加载。

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

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

以下是如何执行此操作的示例：

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

您可以参考这篇文章以了解更多关于其工作原理和使用方法的信息。如果您完全不熟悉HTML，请阅读本初学者指南，直到您对基础知识感到满意为止。

组合JavaScript文件

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

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

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

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

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

为了进一步改进脚本的处理时间，还可以练习省略“http”和“type”标签。例如，不要使用：

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

您可以简单地使用：

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

使用JSCompress

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

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

删除冗余代码

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

查找冗余代码的一个好方法是使用Google Chrome中的内置开发者工具。这可以通过打开主菜单，选择“更多工具”，然后单击“开发者工具”来启用。

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

激活开发者工具后，在设置菜单的“更多工具”子部分中查找“覆盖率”。

这将在开发者控制台中打开“覆盖率”选项卡。在那里，单击“检测覆盖率”按钮以启动测试。

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

如果这是您第一次检查冗余代码，您会注意到列表中混合了CSS和JavaScript资源。仔细检查这些内容以找出哪些内容未在使用。

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

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

结论

对于非开发人员而言，优化网站的CSS和JavaScript代码表面上听起来过于技术性。但是，有了合适的工具和网络主机，您无需成为经验丰富的网页开发人员即可实现这一目标。

关于优化CSS和JS以加快网站速度的常见问题解答

优化网站的CSS和JS有哪些好处？

优化网站的CSS和JS可以显着提高其性能。它减少了网站的加载时间，从而提供了更好的用户体验。更快的网站更有可能留住访问者，从而提高参与度和转化率。此外，网站速度是像Google这样的搜索引擎的排名因素，因此优化您的CSS和JS也可以提高您的SEO。

如何压缩我的CSS和JS文件？

压缩CSS和JS文件包括删除不必要的字符，如空格、换行符和注释，而不会改变其功能。您可以使用HTML Compressor或CSS Minifier之类的在线工具。只需将代码粘贴到工具中，它就会返回一个压缩版本，您可以将其替换到网站文件中。

JS的异步加载和延迟加载有什么区别？

异步加载和延迟加载是控制如何在网站上加载JS文件的技术。异步加载允许浏览器在加载JS文件时继续呈现页面。另一方面，延迟加载会延迟JS文件的加载，直到HTML文档完全解析为止。这两种技术都可以提高网站性能，但最佳选择取决于网站的具体需求。

如何优化我的CSS交付？

优化CSS交付包括减少在页面呈现之前需要加载的CSS数量。这可以通过内联关键CSS、延迟非关键CSS和消除未使用的CSS来实现。 PurifyCSS等工具可以帮助您识别并删除文件中未使用的CSS。

浏览器缓存如何提高网站性能？

浏览器缓存将网站的静态文件存储在访问者的浏览器中。这意味着在后续访问中，浏览器不需要重新下载这些文件，从而加快加载时间。您可以通过向.htaccess文件添加特定指令或使用缓存插件（如果您的网站使用的是WordPress等CMS）来启用浏览器缓存。

图片优化对网站速度有何影响？

图片通常占据网页大小的最大部分。通过优化您的图片，您可以显着减少需要加载的数据量，从而加快页面加载时间。图片优化技术包括压缩图片、使用合适的图片格式和实现延迟加载。

如何衡量我的网站性能？

有几种工具可用于衡量网站性能，包括Google的PageSpeed Insights、GTmetrix和Pingdom。这些工具提供性能分数和有关可优化以提高速度的网站区域的详细信息。

内容交付网络 (CDN) 在网站速度中扮演什么角色？

CDN是位于世界各地的服务器网络，它们存储网站静态文件的副本。当用户访问您的网站时，CDN会从最靠近用户的服务器交付这些文件，从而减少数据传输所需的时间，从而提高网站速度。

服务器响应时间如何影响网站速度？

服务器响应时间是服务器响应浏览器请求所需的时间。缓慢的服务器响应时间可能会延迟网页的加载，从而对用户体验和SEO产生负面影响。您可以通过优化服务器配置、升级托管计划或使用CDN来提高服务器响应时间。

什么是HTTP/2，它如何提高网站速度？

HTTP/2是HTTP协议的最新版本，它包含一些性能改进，例如多路复用、报头压缩和服务器推送。这些功能允许浏览器和服务器之间更快、更高效的通信，从而提高网站速度。要利用HTTP/2，您的服务器和用户的浏览器都必须支持它。

以上是如何优化更快的网站的CS和JS的详细内容。更多信息请关注PHP中文网其他相关文章！