我有一个在Zeit Now上托管的NextJs应用程序，我已对其进行了优化，因此可以在Google Page Speed Insight中以100/100的分数运行。
为了通过“在上层内容中消除渲染阻止JavaScript和CSS”测试，我必须为着陆页生成一个关键CSS，并将其内嵌在<style/> <head/>标记中}，并在body标记结束前移动所有<link rel="stylesheet"/>
现在，当我使用Google Lighthouse进行审核时，我有时会收到“减少渲染阻止样式表”的警告，有时则不会。
当警告出现时，我会在2s左右得到第一个有意义的油漆，当它不存在时，我会在400ms左右得到它。
所以我的问题是，我应该相信哪一个？
答案 0 :(得分：0)
因此，避免阻止css资源的一般解决方案，同时保持良好的第一次绘制，是通过＆＃39;来内联关键css。标记在<head>中，并使用javascript加载css文件
使用NextJS，一个好的解决方案是使用index.js（以及pages中的任何元素）内联关键css，然后在验证{require()后使用process.browser加载每个组件的所有css依赖关系1}}（因为它不会加载服务器端）
出于某些原因，Google Page Speed Insight并未将<link rel="stylesheet"/>标记末尾的<body>视为阻止，但Google Lighouse确实如此，当您查看第一个时，它会显示有意义的油漆。