我正在尝试提高我的 Google Page Speed 分数。目前移动设备为 51/100,桌面设备为 83/100。
其中一个问题是“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”。这适用的两个项目是我的缩小 CSS 文件和外部 Google 字体文件。我能做些什么来解决这个问题吗?
更一般地说,关于如何提高我的 Google 页面速度得分的任何反馈/建议。
我的网站:http ://www.backpackerjobboard.com.au/
谢谢!
我正在尝试提高我的 Google Page Speed 分数。目前移动设备为 51/100,桌面设备为 83/100。
其中一个问题是“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”。这适用的两个项目是我的缩小 CSS 文件和外部 Google 字体文件。我能做些什么来解决这个问题吗?
更一般地说,关于如何提高我的 Google 页面速度得分的任何反馈/建议。
我的网站:http ://www.backpackerjobboard.com.au/
谢谢!
优化“渲染阻塞”元素更多的是关于感知加载时间,而不是最大化页面速度。
对于 CSS,这涉及为您的关键 css内联CSS 。这通常被称为“首屏”内容,尽管该术语不正确 - 关键 CSS 涉及基本样式、布局(即网格系统)等。
这是一个在线(和 GitHub 上)提供的关键 CSS 生成器:http: //jonassebastianohlsson.com/criticalpathcssgenerator/
这样做的原因是为了确保页面中最重要的样式随HTML 一起加载,并且对于经过 gzip 压缩的网页,添加到 HTML 的文件大小应该可以忽略不计。
另一个渲染问题是谷歌字体,这很常见。忽略谷歌对此的建议;它建议将谷歌字体放在页脚中。
更好的方法是使用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 来解决。
PS 不要太执着于分数,大多数对你不利的事情都是对图像、css 等的微小(即小于 5%)调整。
请缩小您的 html、js 和 css 文件。并尽可能减小图像大小。使用它来缩小 css: http ://cssminifier.com/