performance - Page Speed - 消除渲染阻塞

Question

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

其中一个问题是“消除首屏内容中阻止渲染的 JavaScript 和 CSS”。适用的两个项目是我的缩小 CSS 文件和外部 Google 字体文件。我能做些什么来解决这个问题吗？

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

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

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

谢谢!

Answer 1

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

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

这是一个在线(和 GitHub 上)可用的关键 CSS 生成器: http://jonassebastianohlsson.com/criticalpathcssgenerator/

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

另一个渲染问题与谷歌字体有关，这很常见。 忽略 Google 对此的建议；它推荐的是将谷歌字体放在页脚中。

更好的方法是使用类似 Font Squirrel Webfont Generator 的工具自行生成网络字体。将 HTTPS 请求保存到 Google(这会导致加载 Assets 时出现交通堵塞。)

但是，Pagespeed 工具忽略了网页速度下降的主要原因:您有 68 个 HTTP 请求。其中大约三分之一是 JS 文件，它们应该聚合到一个 .js 文件或使用类似Lab.js 的库推迟 js* 呈现以减少对这些文件的 HTTP 请求。

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

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

这可能是由于它超时并认为整个页面都已呈现或类似原因 - 当使用此类工具时，总是会处理多个页面，因为它们可能会出错。

您的大多数移动问题都可以通过内联您的 css 和延迟您的 Javascript 来解决。

附言不要太执着于分数，大多数对你不利的事情都是对图像、CSS 等的微小调整(即少于 5%)。