谷歌SEO：移动页面加载慢？6个方法帮你快速优化提速

谷歌从二零二一年开始已经全部采用了移动优先的索引方式。搜索引擎会根据移动版页面来评估网站在搜索中的排名结果。移动端的网页加载速度直接和核心网络数据量的三个指标有关, 这几个指标包含了LCP、CLS以及INP。

这些核心网络数据量最终会影响到网站在搜索中的表现。下面提供了六个能够马上采取的办法。这些办法的目标是把移动端页面的LCP压缩到一个比二点五秒更小的数值范围内。

先检测：定位速度瓶颈

在优化之前, 需要使用相应的工具来把问题的具体位置精确地找出来。

PageSpeedInsights 是 Google官方的工具, 你只需要输入网址, 就可以查看到移动端LCP、CLS、INP得分, 以及具体的优化建议。

CrUX（Chrome用户体验报告）, 通过调取真实用户数据, 去了解目标受众在实际使用过程中的体验情况。

ChromeDevTools（Network面板）: 用来模拟移动端3G/4G网络环境, 并且可以逐一对资源进行分析, 从而定位出加载速度最慢的那个。

核心达标线是要求LCP必须要小于2.5秒, CLS的要求是要小于0.1, 还有INP必须得是在200毫秒以上。

6个优化方法

方法1：图片格式与尺寸优化

把PNG这种格式或者JPG这种格式转换成WebP这种格式, 或者是转换成AVIF这样一种格式的话, 那么那个图片文件的体积大小可以减少百分之三十, 一直到减少百分之七十这么多。

按照那个屏幕的分辨率来使用srcset这个属性, 输出对应的那些图片尺寸, 在移动设备上面去浏览的时候不要把它电脑上显示的那种大图给加载出来。

在第一屏画面里面出现的图片, 禁止使用那种懒加载的技术, 如果不是处于第一屏的画面, 也就是非首屏的部分, 要使用带有”lazy”这个值的loading这个属性。

在所有的图片元素之中, 必须强制设定并固定 width 这个属性值, 同时也必须强制设定并固定 height 这个属性值, 通过这样的操作方式, 把累积布局偏移问题给杜绝掉。

方法2：减少渲染阻塞资源

要把首屏CSS改成异步加载的方式来处理。然后给JS加上defer属性, 或者加上async属性也可以。把那些没有用到的第三方脚本删掉, 比如广告追踪什么的, 还有社交插件之类的东西。每去掉一个脚本的话, 大概能够节省50到100毫秒的时间。要把首屏CSS的总量控控制在15KB以内。

方法3：启用压缩与CDN

你可以开启服务器端的Brotli压缩功能或者Gzip压缩功能, 这样做的话, 文本资源的体积就可以降低百分之七十以上, 另外,图片、CSS、JS以及字体之类的静态资源都要接入CDN, 这样做的目的是缩短TTFB的时间, 还有启用HTTP/2协议或者是HTTP/3协议, 能够减少连接建立时的开销。

方法4：字体优化

建议你优先去使用那些系统自带的字体栈, 比如 -apple-system, sans-serif 这些。这么做的目的呢, 就是为了避免你去加载那些外部的中文字体文件。毕竟一个单文件往往就达到了 1 到 5MB 这么多。

要是你非得使用自定义的字体不可的话, 那你就要只保留你所需的字重部分以及字符子集部分。同时, 你还得设置好那个 font-display: swap, 这样做的意思就是防止文字出现因为没加载完毕而不显示的情况。

方法5��消除布局偏移（CLS）

为图片这样的元素、视频这样的元素、iframe标签代表的区域以及广告位留出固定的宽度和高度来做成一个容器。不要在正文的上面动态地去插入广告或者弹窗。在CSS样式文件还没有加载完成以前的这个时间段, 使用占位符来保持布局是稳定的, 让累积布局偏移的目标值控制在0.1以下。

方法6：首屏资源精简

第一页的HTML文件, 在没有进行压缩的情况之下, 其大小必须被控制在14KB这个数值范围之内。在第一页里, 要尽量避免去引入什么大型JavaScript框架以及动画库这些内容。

应该把那些关键的CSS样式代码直接写进这个标签里面, 对于剩下的CSS代码呢, 则需要采取异步加载的方式来处理。服务器端应该对核心内容进行渲染操作, 从而使得客户端在水合等待的这个时间上能够有所减少。

验证与持续监控

每次进行修改作业以后, 都需要利用PageSpeed Insights这个工具再次对移动端的得分情况进行测试, 把目标设定成90分以上。

然后要在谷歌搜索控制台里面完成索引的提交工作, 并且持续监控抓取工作的具体状态方面。这里给大家一个建议, 就是最好每个月都对性能数据进行一次复查, 以此来确保新添加上去的内容绝对不会导致整体速度出现回退的情况。

常见问题

《谷歌SEO：移动页面加载慢？6个方法帮你快速优化提速》主要讲什么？

谷歌从二零二一年开始已经全部采用了移动优先的索引方式。搜索引擎会根据移动版页面来评估网站在搜索中的排名结果。

文章提到了哪些重点？

ChromeDevTools（Network面板）: 用来模拟移动端3G/4G网络环境, 并且可以逐一对资源进行分析, 从而定位出加载速度最慢的那个；

这篇移动SEO内容适合谁看？

适合关注移动SEO的读者，尤其是需要落地执行的站长、运营和建站从业者。