如何改善Lighthouse报告（PWA）中的“消除渲染阻止资源”？

Question

我第一次尝试创建PWA，这是链接： https://flowster.app/calculators/freight-class-calculator/

我正在努力让所有类别的Lighthouse得分达到100% :)

我阅读了“了解更多”页面，但不知道如何将Bootstrap CSS内联传递，例如。有什么建议吗？

- Kane

Answer 1

这是什么意思

“消除阻止渲染的资源”意味着所有必须在首屏视图（顶部折叠）中使用的资源（CSS / JS）都应该作为html本身的一部分（内联或脚本或样式块）；所有其他CSS / JS（用于其他位置）可以放到它们的单独文件中；

这样，浏览器就能够快速绘制/渲染出首屏视图，然后继续加载其他CSS / JS文件；

如何实现

我自己尝试过，意识到在bootstrap.css文件中我只使用了15％左右的类...您可能在 Lighthouse 中也会看到未使用的CSS类的提示。因此，您可以有选择地仅在HTML中包含相关类；

JS会更加棘手。接下来，为了使这个首屏视图功能正常，您可以在HTML中插入原生JavaScript（用于导航，旋转木马等），这比使用bootstrap.js更好/更快；

希望这有所帮助...祝好运

- Akber Iqbal

Answer 2

你应该只在head中加载实际需要加载当前“视图”所需的CSS和JS（我故意没有说“页面”）。这并不意味着你应该将它们内联。你可以从CSS或JS文件中完美地加载它们。你应该在footer中加载其余的CSS和JS（这里也可以使用CSS或JS文件）。

对于既是单页应用程序（SPA）又是渐进式 Web 应用程序（PWA）的情况，这只是您的起始/闪屏屏幕...非常简单。很容易获得100％的评分。但是，当你谈论一个不清楚“第一页”是什么的网站时...它变成了一个几乎不可能的任务。聪明的CSS in JS或内联解决方案可能行之有效，但构建起来会相当困难。

然而，对于网站来说，有一种更简单的解决方案。我写了如何获得100％的Google Lighthouse分数, 这专注于网站。TLDR：只需省略框架即可。这可能不是所有情况下都适用的解决方案，但对于那些可能的情况，这绝对是正确的方法。

- Mr. Hugo