页面速度 - 消除渲染阻塞答案

【问题标题】：Page Speed - Eliminate render-blocking页面速度 - 消除渲染阻塞
【发布时间】：2015-05-06 06:14:30
【问题描述】：

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

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

更一般地说，关于如何提高我的 Google 页面速度得分的任何反馈/建议。

谢谢！

【问题讨论】：

【解决方案1】：

优化“Render-Blocking”元素更多的是感知加载时间，而不是最大化页面速度。

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

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

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

另一个渲染问题是谷歌字体，这很常见。 忽略 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%）调整。

【讨论】：

【解决方案2】：

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

【讨论】：