谷歌Lighthouse 报告的 Opportunities 部分列出了阻止第一次绘制页面的所有 URL。目标是通过内联关键资源、延迟非关键资源和删除任何未使用的资源来减少这些渲染阻止 URL 的影响。
一、哪些 URL 被标记为渲染阻止资源？
Lighthouse标记了两种类型的渲染阻止 URL：脚本和样式表。
（1）一个<script>标签：
是在<head>文档中。
没有defer属性。
没有async属性。
（2）一个<link rel="stylesheet">标签：
没有disabled属性。当此属性存在时，浏览器不会下载样式表。
没有media专门匹配用户设备的属性。media="all"被认为是渲染阻塞。
二、如何识别关键资源？
减少渲染阻塞资源影响的第一步是确定什么是关键的，什么不是。使用 Chrome DevTools 中的Coverage 选项卡来识别非关键 CSS 和 JS。当您加载或运行页面时，该选项卡会告诉您使用了多少代码，以及加载了多少。
三、如何消除渲染阻塞js脚本？
（1）确定关键代码后，将该代码从阻止呈现的 URL 移动到scriptHTML 页面中的内联标记。当页面加载时，它将拥有处理页面核心功能所需的东西。
（2）如果阻止呈现的 URL 中有不重要的代码，您可以将其保留在 URL 中，然后使用async或defer属性标记 URL。
（3）应该删除根本不使用的代码。
四、如何消除渲染阻塞css样式表？
（1）与标签中的内联代码类似，在 HTML 页面的块<script>内第一次绘制所需的内联关键样式。然后使用链接异步加载其余样式。
（2）考虑使用关键工具自动化提取和内联“首屏”CSS 的过程。
（3）另一种消除渲染阻塞样式的方法是将这些样式拆分为不同的文件，由媒体查询组织。然后为每个样式表链接添加一个媒体属性。加载页面时，浏览器仅阻止第一次绘制以检索与用户设备匹配的样式表。
（4）最后，您需要缩小 CSS 以删除任何多余的空格或字符。这可确保您向用户发送尽可能小的捆绑包。
您已成功复制微信号
leishi010
打开微信添加好友？
确定
