延迟加载CSS脚本以加快网页渲染速度

当您认真对待网站提速，而您的网页又需要加载大型CSS脚本时，延迟加载这些脚本的较大部分是优化CSS交付的必要手段。延迟加载CSS脚本使您能够在网页（DOM）完全加载后再加载CSS文件。

我应该延迟加载哪些CSS文件？

您应该延迟加载所有阻碍页面渲染的CSS文件。您可以使用我们的网站速度测试工具来查看哪些文件会阻碍渲染。

如何确定CSS脚本的哪一部分需要延迟加载？

在决定延迟加载CSS脚本之前，您应该了解如何优化CSS交付。提取关键渲染路径CSS后，您将得到一个用于首屏内容的较小CSS脚本。将此CSS脚本内联到网页的头部，并延迟加载原始大型CSS脚本的其余部分。

不要延迟加载中小型CSS脚本

当您的网页加载中小型CSS脚本时，您无需过于担心延迟加载脚本。从页面速度的角度来看，将所有CSS内联会更有益。

只延迟加载大型CSS脚本

当涉及到页面速度时，延迟加载CSS脚本在网页加载大型CSS脚本时最有益。不过，您不能简单地将所有CSS放入一个文件中，延迟加载它，然后期望网页能正常显示。您的访问者（尤其是使用慢速互联网连接或移动设备的访问者）看到的第一屏可能是空白页面或看起来很糟糕，因为网页尚未加载CSS，因此没有样式。这就是为什么不能延迟加载所有CSS的原因。如前所述，解决方案是找出CSS的哪一部分用于页面的首屏初始视图。一旦确定了这一点，您应该将此CSS脚本内联到HTML头部，并延迟加载CSS的其余部分。

如何使用HTML和少量JavaScript延迟加载CSS脚本

对于延迟加载JavaScript文件，有纯HTML方法可用，即defer和async。不幸的是，这些纯HTML方法不适用于CSS文件。不过，下面的代码片段使用少量JavaScript解决了这个问题，可以延迟加载您想要的任何CSS文件：

<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

将上述代码复制粘贴到您的页面中。将style.css替换为您要延迟加载的CSS文件的路径。如果要延迟加载多个CSS文件，只需复制link rel代码片段并多次粘贴，同时将style.css替换为您的文件名。

不要忘记在HTML head标签中包含noscript标签，这将确保不支持JavaScript的设备或浏览器也能加载CSS文件。

页面速度优化的最佳选择

上述代码的优点在于，与许多类似功能的代码不同，它不使用Jquery库或任何其他JavaScript库。它非常适合页面速度优化。

您的网站是否正确实现了这一点？

尝试使用我们的网站速度测试工具来检查您的CSS文件是否未被延迟加载。

如果在”移除或替换阻碍渲染的资源”警告下列出了任何CSS文件，则意味着这些CSS文件未被正确延迟或异步加载。