Pagespeed rating low -我错过了什么？

Question

我正在尝试写一个从谷歌PageSpeed的100%评级的网页，不是一个容易的任务，让我告诉你！到目前为止，我已经启用了缓存，启用了报头压缩，压缩了我所有的png图像，我正在尝试异步我的CSS上面的折叠内容。最后一点就是我遇到问题的地方。下面是代码中页面的当前布局：

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

我已经用media="none"在页脚定义了我的样式表，我已经使用内联CSS设置了一个预加载动画和加载器，所以你会看到一个加载器，叫做body上的onLoad event，它在加载文档时将CSS文件的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

他们为什么阻塞装货？它们是为none的media设置的，所以它应该加载CSS文件，但在body onLoad事件被激发之前不会尝试显示它们，它们在我的文件的最后……这里我漏掉了什么？它在实践中加载得很棒，但排名是我想要在这里最大化的。有什么建议吗？我是不是遗漏了什么？谢谢。

Answer 1

每个CSS文件都包含样式和每个HTML标记的外观信息，如果没有=>浏览器必须下载的信息，就不可能呈现页面，解析该信息以显示页面=>它的呈现块资产。

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

<link ... href="style.css">

将这些文件的内容

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

理想情况下，这应该通过编程来完成。

如果这些css文件不是很大，并且/或者你没有很多回头客，那么它可以应用于生产环境。