Google 页面速度洞察力和灯塔行为阻止 css 资源
Google page speed insight and lighthouse behavior on blocking css ressources
我有一个托管在 Zeit Now 上的 NextJs 应用程序，我对其进行了优化，因此它可以 运行 在 Google Page Speed Insight 中得分为 100/100。
为了通过 'Eliminate render-blocking JavaScript and CSS in above-the-fold content' 测试，我必须为着陆页生成一个关键的 CSS，将其内联到 <head/> 中的 <style/> 标记中，然后移动所有 <link rel="stylesheet"/> body标签结束前。
现在，当我 运行 使用 Google Lighthouse 进行审计时，我有时会收到 'Reduce render-blocking stylesheets' 警告，有时不会。
当出现警告时，我会在 2 秒左右获得第一次有意义的绘制，当警告不存在时，我会在 400 毫秒左右获得。
所以我的问题是，我应该相信哪一个？
因此，避免阻塞 css 资源的一般解决方案是在 <head> 中通过“”标记内联关键 css，同时保持良好的首次绘制效果，并且使用 javascript.
加载 css 文件
使用 NextJS，一个好的解决方案是使用 index.js（以及 pages 中的任何其他内容）内联关键 css，然后使用 css 为每个组件加载所有依赖项 require() 验证后 process.browser （因为它不会加载服务器端）。
由于某些原因，Google Page Speed Insight 并未将 <body> 标记末尾的一堆 <link rel="stylesheet"/> 视为阻塞，但 Google Lighouse 将其视为阻塞，并且它显示当你看到第一个有意义的油漆时。
我有一个托管在 Zeit Now 上的 NextJs 应用程序，我对其进行了优化，因此它可以 运行 在 Google Page Speed Insight 中得分为 100/100。
为了通过 'Eliminate render-blocking JavaScript and CSS in above-the-fold content' 测试，我必须为着陆页生成一个关键的 CSS，将其内联到 <head/> 中的 <style/> 标记中，然后移动所有 <link rel="stylesheet"/> body标签结束前。
现在，当我 运行 使用 Google Lighthouse 进行审计时，我有时会收到 'Reduce render-blocking stylesheets' 警告，有时不会。
当出现警告时，我会在 2 秒左右获得第一次有意义的绘制，当警告不存在时，我会在 400 毫秒左右获得。
所以我的问题是，我应该相信哪一个？
因此，避免阻塞 css 资源的一般解决方案是在 <head> 中通过“”标记内联关键 css，同时保持良好的首次绘制效果，并且使用 javascript.
加载 css 文件
使用 NextJS，一个好的解决方案是使用 index.js（以及 pages 中的任何其他内容）内联关键 css，然后使用 css 为每个组件加载所有依赖项 require() 验证后 process.browser （因为它不会加载服务器端）。
由于某些原因，Google Page Speed Insight 并未将 <body> 标记末尾的一堆 <link rel="stylesheet"/> 视为阻塞，但 Google Lighouse 将其视为阻塞，并且它显示当你看到第一个有意义的油漆时。