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

Question

我第一次尝试PWA是在这里： https://flowster.app/calculators/freight-class-calculator/

我正在尝试在所有类别的灯塔中获得100％的收益：）

例如，我阅读了“了解更多信息”页面，但无法理解如何内联传递Bootstrap CSS。

有什么建议吗？

Answer 1

这是什么意思

“消除渲染阻止资源”是指第一个视图（顶部折叠）所需的所有资源（CSS / JS）应该是 html本身 的一部分>（内联，脚本或样式块）；其他所有CSS / JS（将在下面使用）可以转到其其他单独的文件；

这样，浏览器将能够快速绘制/渲染第一个视图，然后继续加载其他CSS / JS文件；

操作方法

我went through this myself并意识到在bootstrap.css中我几乎没有使用15％的类...您也可能会得到灯塔中未使用的CSS类的提示。因此，您可以在其中选择性地在HTML中仅包含相关的类；

JS将更加棘手。继续，要使第一个视图起作用，您可以在导航，轮播等中插入香草Javascript（在HTML内），这比bootstrap.js更好/更快。

希望有帮助...祝你好运

Answer 2

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

对于同时也是渐进式Web应用程序（PWA）的单页面应用程序（SPA），这只是您的打开/启动屏幕...足够容易。得到100％的分数应该很容易。但是，当您谈论的网站尚不清楚“首页”是什么...时，这几乎是不可能完成的任务。聪明的JS或内联解决方案中的CSS可以达到目的，但很难构建。

但是，有一个更简单的网站解决方案。我写了how to get a 100% Google Lighthouse score，只关注网站。 TLDR：只需省略框架。这可能不是每种情况的解决方案，但是对于可能的情况，这绝对是可行的方法。