谷歌页面速度洞察和阻止 CSS 资源的灯塔行为答案

【问题标题】：Google page speed insight and lighthouse behavior on blocking css ressources谷歌页面速度洞察和阻止 CSS 资源的灯塔行为
【发布时间】：2018-06-08 05:05:38
【问题描述】：

我有一个托管在 Zeit Now 上的 NextJs 应用程序，我已经对其进行了优化，因此它可以在 Google Page Speed Insight 中运行，得分为 100/100。
为了通过“消除首屏内容中的渲染阻止 JavaScript 和 CSS”测试，我必须为着陆页生成一个关键 CSS，将其内联到 <head/> 的 <style/> 标记中，然后移动正文标签结束前的所有<link rel="stylesheet"/>。
现在，当我使用 Google Lighthouse 运行审计时，有时会收到“减少渲染阻止样式表”警告，有时不会。
当警告出现时，我将在 2 秒左右获得第一个有意义的绘画，当它不存在时，我将在 400 毫秒左右获得它。
所以我的问题是，我应该信任哪一个？

【问题讨论】：

将 CSS 放在正文中并不是最好的主意。 Lighthouse，AFAIK，希望您推断出关键的 CSS，然后将其内联。然后可以通过 JavaSript 注入剩余的 CSS，这将（再次，这里的内存占用）使其成为非阻塞的。
对不起，我忘了说我确实在头部内联了关键的 css，但我仍然将 css 保留在正文中。你让我今天一整天都感觉很好！我已经在 js 中加载了 css 文件（在 React 中使用 require()），但我不再收到警告了！

标签： google-pagespeed nextjs lighthouse vercel

【解决方案1】：

因此，避免阻塞 css 资源，同时保持良好的首次绘制的一般解决方案是通过 <head> 中的 '' 标记内联关键 css，并使用 javascript 加载 css 文件。
使用 NextJS，一个好的解决方案是使用 index.js（以及 pages 中的任何其他内容）内联关键 css，然后在验证 process.browser 后使用 require() 加载每个组件的所有 css 依赖项（因为它不会t 加载服务器端）。
出于某些原因，Google Page Speed Insight 并未将 <body> 标记末尾的一堆 <link rel="stylesheet"/> 视为阻塞，但 Google Lighouse 确实如此，并且当您查看第一个有意义的绘画时它会显示。

【讨论】：