我有一个 NextJs 应用程序，托管在 Zeit Now 上，我已经对其进行了优化，因此它可以在 Google Page Speed Insight 中运行，得分为 100/100。
为了通过“消除首屏内容中阻止渲染的 JavaScript 和 CSS”测试，我必须为着陆页生成一个关键的 CSS，将其内联到 中的标签<style/>中<head/>，并将所有内容移到<link rel="stylesheet"/>身体标签。
现在，当我使用 Google Lighthouse 进行审核时，有时会收到“减少渲染阻止样式表”警告，有时不会。
当警告出现时，我会在 2 秒左右得到第一个有意义的绘画，当它不存在时，我会在 400 毫秒左右得到它。
所以我的问题是，我应该相信哪一个？
问问题
1474 次
1 回答
1
因此，避免阻塞 css 资源的一般解决方案，同时保持良好的首次绘制，是通过 '' 标记内联关键 css <head>，并使用 javascript 加载 css 文件。使用 NextJS，一个好的解决方案是使用（以及任何其他内容）
内联关键 css ，然后在验证后使用（因为它不会加载服务器端）加载每个组件的所有 css 依赖项。
由于某些原因，Google Page Speed Insight 并未将标签末尾的一堆字符视为阻塞，但 Google Lighouse 确实如此，它会在您查看第一个有意义的油漆时显示。index.jspagesrequire()process.browser<link rel="stylesheet"/><body>
于 2018-06-07T21:05:38.740 回答