消除渲染阻塞资源答案

【问题标题】：Eliminate render-blocking resources消除渲染阻塞资源
【发布时间】：2018-11-01 00:30:43
【问题描述】：

我是一个使用渐进式网络应用程序的新手。我想提高我的 PWA 的性能，但在某一点上卡住了。

这是错误

请帮我解决这个问题！！！

【问题讨论】：

【解决方案1】：

您可以查看page，了解如何消除阻塞渲染的 JavaScript 和 CSS。

关键路径样式是正确渲染所有首屏所需的样式。

您应该内联这些样式以避免额外的 HTTP 请求阻塞初始呈现。你会发现有一个collection of tools to help with this。
<head>
  ...
  <style>critical CSS rules here</style>
  ...
</head>

一些额外的提示：

您应该考虑根据网络分析弄清楚首屏对您的用户意味着什么。

同时确保不要在关键 CSS 中使用 @import 语句，因为这也会触发额外的 HTTP 请求。

确保不要内联过多的 CSS，因为这也会减慢您的初始渲染速度。

阅读来自Google 和Varvy 的更多解释/提示。

【讨论】：