Pagespeed评级低 - 我缺少什么？

Question

我正在尝试使用Google PageSpeed编写一个100％评级的网页，这不是一个简单的任务，让我告诉你！到目前为止，我已启用缓存，启用了标头压缩，压缩了我的所有png图像，并且我试图将我的CSS同步到折叠内容之上。最后一点是我遇到问题的地方。这是codepen中页面的当前布局：

https://codepen.io/ftbcoders/pen/MPVbNY

我已经使用media="none"在页脚中定义了样式表，我使用内联CSS设置了预加载动画和加载器，因此您可以在主体上看到一个名为onLoad event的加载器，用于将media类型的none从all更改为

Optimization

Low
56 / 100

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 3 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting
for the following resources to load. Try to defer or asynchronously load blocking
resources, or inline the critical portions of those resources directly in the HTML.

Optimize CSS Delivery of the following:

https://www.example.com/stylesheet/style.css
https://www.example.com/stylesheet/open.sans.css
https://www.example.com/stylesheet/font.awesome.css

。文档已加载，但我得到了：

media

他们为什么阻止加载？它们被设置为none的onLoad所以它应该加载CSS文件，但不要尝试显示它们，直到身体<link ... href="style.css"> 事件被触发，并且它们在我文件的最后...我在这里缺少什么？它在实践中加载很棒，但排名是我想在这里最大化的。有小费吗？我错过了什么吗？谢谢。

Answer 1

每个CSS文件都包含样式，其中包含最终每个HTML标记的样子=>如果没有该信息，则无法呈现页面=>浏览器必须下载，解析该信息以显示页面=>它的渲染阻止资产。

有多种方法可以解决这个问题，我将展示其中一种方法。比较简单。您可以在HTML文件中包含这些CSS文件的内容。这将解决问题。在您的HTML而不是.css文件的链接

<style>
contents of your style.css here
</style>

把这些文件的内容

qazxswpoi

理想情况下，应该以编程方式完成。

如果那些css文件不那么大和/或你没有很多回访者，它可以在生产中应用。