页面速度 - 消除渲染阻止

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面速度 - 消除渲染阻止相关的知识,希望对你有一定的参考价值。

我正在尝试提高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/

以上是关于页面速度 - 消除渲染阻止的主要内容,如果未能解决你的问题,请参考以下文章

如何防止 CSS 渲染阻止我的网站?

如何阻止多个重新渲染执行多个 api 调用 useEffect?

CSS 不会阻止 Firefox Quantum 上的渲染

将CSS放头部,JS放底部,可以提高页面的性能的原因

SvelteKit s-s-r - 如何在获取数据之前阻止服务器端渲染?

阻止 CSS 资源