网站做得再好看,如果打开慢、点了没反应、内容乱跳,访客照样会关掉页面。核心网页指标(Core Web Vitals)就是用三个可测量的数字,把体验好不好变成可以优化的目标。
三项指标与阈值
LCP(最大内容绘制)衡量首屏最大内容元素完成渲染的时间,良好标准为 2.5 秒以内,超过 4 秒即为较差。
INP(交互到下一次绘制)衡量用户点击、输入之后页面产生可见响应的耗时,良好标准为 200 毫秒以内,超过 500 毫秒为较差。
CLS(累积布局偏移)衡量页面加载过程中的意外位移,良好标准为 0.1 以内,超过 0.25 为较差。
这三项指标是搜索引擎判断页面体验的参考信号之一,并非唯一的排名因素,但它们在内容质量相近的页面之间会形成明显差异。
LCP:先查服务器,再查图片
LCP 由四段构成:服务器首字节时间、资源加载延迟、资源加载时长、元素渲染延迟。其中首字节时间直接决定了下限——如果服务器响应就要一秒多,前端再怎么优化也很难进入 2.5 秒。
优化顺序建议是:先提升服务器响应(启用页面缓存、升级主机、使用内容分发网络),再处理图片(首屏大图转为 WebP 或 AVIF 格式、显式声明宽高、不做延迟加载、必要时加高优先级加载提示),最后清理阻塞渲染的样式与脚本。
INP:主线程被占满就会迟钝
INP 的常见原因是主线程长时间被 JavaScript 占用:一次性加载过大的脚本、复杂的框架渲染,以及一个页面上挂载了十几个第三方工具。第三方统计、在线客服、广告与录屏类脚本往往是主要来源。
处理方式包括:拆分长任务、把非关键脚本改为延迟加载、按需加载第三方组件,并借助浏览器提供的长动画帧观测接口定位究竟是哪些脚本造成了阻塞。
CLS:位移多半来自没预留位置
布局偏移大多不是设计问题,而是资源加载顺序问题。图片和嵌入式框架没有声明尺寸,浏览器在图片到达前不知道该留多少空间,只能等资源加载后再重新排版,正在被阅读的内容就被推走了。
处理方式包括:为所有图片与嵌入内容声明宽高;为广告位和动态插入的模块预留固定高度;自定义字体采用合适的加载策略以避免文字重排;顶部弹出的通知条采用固定定位,不要挤推文档内容。
测量口径比优化本身更容易搞错
搜索引擎用于评估的是真实用户的现场数据,而不是本地测试工具的评分。这类数据按滚动的时间窗口统计,取用户分布中第 75 百分位的数值作为判断依据,因此改完之后需要等待一段时间的真实访问数据滚动更新,才能看到结论。
同时,电脑端达标不等于移动端达标。移动设备的处理器性能与网络条件普遍弱于电脑,多数站点的问题恰恰出在移动端。优化与验收都应以移动端数据为准。
本文所引指标口径以相关平台当前公布的规范为准;如规范更新,请以最新版本为准。
关于冉冉科技
江苏冉冉信息科技有限公司(品牌"冉冉科技")成立于2017年,位于江苏省常州市新北区,是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等,以"只做有效果的网络营销"为服务主张,累计完成三千余起网站建设与服务。

冉冉科技

商务咨询