CSS 优化策略之延迟加载非关键CSS

CSS 优化策略之延迟加载非关键CSS

CSS文件是render-blocking resources,必须在浏览器呈现页面之前加载和处理它们,包含不必要的大样式的网页需要更长的时间才能呈现。

本文将介绍如何同步加载关键样式，而其他样式则以非阻塞方式加载。

如何检测你的网站

• 在Chrome上打开你的网页
• 调出控制台选择 Performance 项
• 在 Performance 页面点击 Reload 分析

在分析结果中，浏览器需要等待所有CSS加载并得到处理，然后才能在屏幕上绘制一个像素。

你可以通过 FCP(First Contentful Paint) 的时间来判断你的性能，FCP表示从开始导航到浏览器呈现第一段DOM内容所需的时间。具体的定义如下：

如何分析非关键代码

优化之前，你需要知道你的CSS样式代码哪些是关键的，哪些是不关键的，这个时候可以借助 Coverage Tool 来分析你的CSS代码。

选择报告中的CSS文件，会看到有两种颜色的标志：

• 绿色：表示关键代码，初始页面展示所要用的样式代码。
• 红色：表示非关键代码，比如鼠标hover之后的一些CSS效果。

有了这份报告，你就可以整理出非关键CSS代码。

如何优化

有了上面的分析报告，就可以设置延迟加载非关键CSS。

比方说下面例子：（styles.css里是非关键CSS代码）