页面速度 - 消除渲染阻止

Posted 2021-04-08

我正在尝试提高Google Page Speed得分。目前移动设备为51/100，桌面设备为83/100。

其中一个问题是“在首映内容中消除渲染阻止javascript和CSS”。适用的两个项目是我缩小的CSS文件和外部Google字体文件。有什么办法可以解决这个问题吗？

更一般地说，有关如何提高我的Google Page Speed得分的任何反馈/建议。

页面速度：https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.backpackerjobboard.com.au%2F&tab=mobile

我的网站：http://www.backpackerjobboard.com.au/

谢谢！

答案

优化“渲染阻塞”元素更多的是感知加载时间，而不是最大化页面速度。

对于CSS，这涉及为您的关键css内联CSS。这通常被称为“首要”内容，尽管该术语不正确 - 关键CSS涉及基本样式，布局（即网格系统）等。

这是一个在线（和GitHub）上提供的关键CSS生成器：http://jonassebastianohlsson.com/criticalpathcssgenerator/

这样做的原因是为了确保使用html加载页面中最重要的样式，并且使用gzip压缩的网页添加到HTML的文件大小应该可以忽略不计。

另一个渲染问题是谷歌字体，这是非常常见的。忽略Google对此的建议;它的建议是将Google字体放在页脚中。

更好的方法是使用像Font Squirrel Webfont Generator这样的工具自行生成网络字体，以便将HTTPS请求保存到Google（这会导致加载资产时出现交通堵塞。）

但是，Pagespeed工具忽略了您的网页速度受到影响的主要原因：您有68个HTTP请求。其中大约三分之一是JS文件，应该聚合成一个.js文件或使用像Lab.js这样的库来推迟js *呈现以减少这些文件的HTTP请求。

*如果您使用像Lab.js这样的阻止/加载库，则必须在HTML中的脚本标记内嵌入关键Javascript，或者排除密钥js文件的延迟。

至于移动分数，Google Pagespeed工具误将您的网站误读为移动设备不友好。在另一个内部页面上测试，您的分数为移动设备约为74。

这可能是由于它超时并且认为整个页面被渲染或类似的东西 - 当使用这样的工具时总是会有多个页面，因为它们可能会出错。

您的大多数移动问题都可以通过内联您的CSS并推迟您的Javascript来解决。

附：不要过于沉迷于分数，大多数对你不利的事情都是对图像，css等进行微调（即少于5％）。

另一答案

请，缩小您的html，js和css文件。并尽可能减少图像大小。用这个来缩小css：http://cssminifier.com/