Question

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

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

我在页脚中使用media="none"定义了样式表，并使用内联CSS设置了预加载动画和加载器，因此您可以在主体上看到一个名为onLoad event的加载器来更改加载文档后，media的CSS文件类型从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设置的，因此它应加载CSS文件，但不要尝试显示它们，直到正文onLoad事件触发为止，并且它们位于我的最后文件...我在这里想念什么？在实践中，它的负载很棒，但是排名是我想要在这里最大化的。有小费吗？我想念什么吗？谢谢。

Answer 1

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

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

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

输入这些文件的内容

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

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

如果这些css文件不那么大和/或您没有很多回头客，则可以将其应用于生产中。

Pagespeed评分低-我缺少什么？

1 个答案: