什么是关键路径CSS？
发布于
by
提供快速，流畅的Web体验是当今构建网站的重要组成部分。大多数时候，在开发网站时并不了解浏览器的实际功能。浏览…
提供快速，流畅的Web体验是当今构建网站的重要组成部分。大多数时候，在开发网站时并不了解浏览器的实际功能。浏览器如何根据创建的HTML，CSS和JavaScript呈现网页？如何利用这些知识来加快网页的呈现速度？
有一些简单的方法可以使网站速度更快，其中之一是将关键的CSS内联到<head>中。
什么是关键CSS（Critical Path CSS）？
请求CSS文件会大大增加渲染网页所需的时间。原因是默认情况下，浏览器将延迟页面渲染，直到完成加载、解析和执行<head>页面中引用的所有CSS文件为止。这样做是因为需要计算页面的布局。
不幸的是，这意味着如果有一个非常大的CSS文件，并且要花一些时间下载，用户将等到整个文件下载完毕后，浏览器才能开始呈现页面。幸运的是，有一种新的技术可以优化CSS的交付并减轻阻塞。这种技术称为优化关键渲染路径。
关键渲染路径表示浏览器渲染页面所采取的步骤，用通俗话来说就是：关键的CSS先加载，加载完后马上呈现页面，其它CSS在呈现页面的同时再异步加载。实际操作中，首先要找到使页面对用户显示所需的最少一组阻塞CSS或关键CSS。一个关键的资源是可能会阻止页面的初始渲染的任何资源。这背后的逻辑是，网站应该在响应的前几个TCP数据包中为用户获取第一个屏幕的内容（或“首屏”内容）。
如何确定哪些是关键CSS？
确定页面的关键CSS相当复杂，并且需要遍历整个网站中不同网页的DOM。接下来，还需要确定当前应用于视图中每个元素的样式列表。手动执行此操作很繁琐，如果是一个较大型的CMS是很难通过收动来完成的。但如果通过一些工具（通过特定的规则来自动判断），这个事情就变得简单了，例如Wordpress中的WP Rocket、Autoptimize PRO等插件就可以通过对页面的分析后自动生成关键CSS，并将这部分关键CSS内联到<head>中。
WordPress如何自动生成关键CSS？
下面以Wordpress中的WP Rocket为例：
当开启这个选项后，WP Rocket会自动为首页、文章页、分类页、标签页、独立页面等不同模板类型的页面生成关键路径 CSS，背后的工作就是WP Rocket服务器会抓取这些页面，再通过特定规则判断哪些CSS内容是关键CSS，这部分内容会被内联到<head>中，其它CSS会异步加载。
有部分站长反馈WP Rocket提示关键路径 CSS生成错误，这是因为WP Rocket抓取网页的服务器访问页面出错造成的，请首先排查167.114.226.142、54.37.31.6这两个IP的服务器能顺利抓取到网站的页面，如果有防火墙，请将167.114.226.142、54.37.31.6添加到防火墙的白名单中。有时候是因为这两个服务器位于法国和美国对国内部分服务器访问延时造成的，可以稍候再重试。
关键CSS是如何工作的？
要开始使用网页上的关键CSS，需要改变处理CSS的方式–这意味着将其分为两个部分。对于第一个部分，仅提取呈现上述内容所需的最少CSS集，然后将其内联到网页<head>中。对于第二个部分或非关键CSS，异步加载它，以免阻塞网页。其示例代码如下：
<!doctype html>
<head>
<style> /* 内联的关键CSS */ </style>
<script> loadCSS('非关键.css');</script>
</head>
<body>
...
</body>
</html>
在上面的代码中，将提取关键的CSS并将其内联到style标记之间的HTML中，使用loadCSS();函数异步加载剩余的非关键CSS。
注：以上代码如果是使用WP Rocket的话，将自动完成。
检验测试
通过PageSpeed Insights来检测一下，未优化的页面结果如下：
已优化的页面结果如下：
类别：增涨知识、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
评论功能已经关闭!