按实际需要决定,而非仅按标记位置
懒加载将资源标记为非关键直至需要。按实际访问路径进行分类:首屏必需项、折叠下方媒体、可选嵌入内容,以及稍后路由或面板需要的代码。CMS 中的位置并不足以作为证据;同一图片在一个模板中可能是屏外,在另一个模板中却是核心。
在一部小手机和典型桌面上复查冷启动。还要测试活动链接和页内锚点,它们可能让访客直接落在页面更下方。此类审查会告诉你哪些内容必须在未触发滚动请求时就准备好。
初始任务、可见导航、关键文案和首个有意义的视觉应立即可用。
下方的画廊、地图、社交嵌入、屏外播放器以及未选择功能的代码是常见候选项。
保护主视觉与初始视口
不要对页面打开时很可能可见的内容进行懒加载。Google 对此有警示,web.dev 的针对性分析显示懒加载初始视口图像会延迟 LCP。LCP 元素可能是主视觉、产品图、海报或文本;对每个重要模板进行验证,而不是猜测。
对已确认为 LCP 的图像进行预先加载(eager load)。如果测试显示可被发现的关键图像丢失了网络优先级,尝试为其添加高抓取优先级提示(fetch-priority)。这只是一个提示,而非命令。作为关键 CSS 背景图像解析器可能无法直接发现此类图像;这种情况下可能需要提前 preload,需通过度量验证。
检查 CMS 与插件的默认设置,避免在列表页上错误地将特色图标记为懒加载。
使用冷启动的移动与桌面加载,而不仅仅是桌面设计预览。
在媒体到达前保留空间
累计布局偏移(Cumulative Layout Shift,CLS)指的是可见内容的意外位移。一个没有已知高度的延迟图像会在读者开始浏览或准备点击按钮时推挤文本和控件。这是交互风险,而不仅仅是一个指标问题。
为图片和视频提供准确的宽高属性,或用 CSS 的 aspect-ratio 保留形状。使用占位符并保持组件的最终占位尺寸。对于第三方 iframe,保留其高度并提供明确的加载或不可用状态。
尽可能与资源一起存储媒体尺寸;对于形状混合的图片,通用比例并不可靠。
滚动、筛选、打开面板、旋转移动设备并使用后退导航以查找后续的布局移动。
保持内容可发现并让交互可理解
Google Search Central 表示 Google 不会通过滚动或点击来与页面交互。重要的懒加载内容应在可见时加载,并且渲染后的 HTML 应暴露预期的内容或媒体 URL。实施后在 Search Console 中检查代表性页面。
可索引的无限列表需要为每个持久块提供分页路由:具有唯一持久 URL、在该 URL 上内容稳定,并且在序列中有链接。这也为用户创建了可共享的返回点。
当动作展示内容时,确保控件可通过键盘操作并使结果可理解。对于诸如“结果已加载”的有意义的非焦点更新,应以编程方式公开状态,以便辅助技术在不移动焦点的情况下可宣布该更新。
产品详情、文章正文、资格信息和任务说明不应在访客触发动作后才出现。
不要延迟所需的结账或认证控件。让合格的安全和合规审核者评估支付、身份验证和第三方脚本的更改。
使用最不脆弱的机制
对于普通的屏外图片和 iframe,浏览器的原生懒加载通常是最简单的起点。浏览器决定何时开始近视口请求;这个距离并非保证。window load 事件可能在懒加载资源仍未完成时触发。
当命名组件需要自定义激活(例如在出现前短暂挂载一个昂贵的面板)时,使用 Intersection Observer。保持观察器的范围窄,并足够早地开始工作以应对快速滚动。针对非初始路由或可选功能使用代码分割,而不是以此为理由延迟当前任务。
不要将一个简单的资源源替换为 data 属性、多个脚本和一个库,除非新增行为能解决已测试的需求。
可选嵌入应有明确的回退或省略状态,而不是永久的加载旋转图标。
一起度量、发布与补救
在相同的 URL、缓存状态、视口和用户路径上比较基线与候选版本。尽可能使用冷启动、受限移动仿真及真实设备检查。记录 LCP、可见序列、布局位移、媒体错误、渲染后的 HTML 和关键操作。现场数据应补充实验室测试。
发布应为可逆且按模板范围限制的变更。记录从 eager 到 deferred 移动的资源、部署引用、缓存操作、负责人和首个回滚步骤。如果 LCP 被设为懒加载或转化路径变得不完整,应从关键资源中移除该规则并再次验证。主题、CMS、图像服务、标签或嵌入变化后要重新检查。
关注预防和修复破坏性体验,而不是仅做当前状态报告或告警。
先在受影响的模板上反转设置,再对全站每张图片进行微调。
