每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 19 天前

页面加载时内容会跳动一下

2 个回答 4,634 次浏览 性能与 Core Web Vitals 最后活跃 15 天前
13

移动端打开页面,标题先显示然后突然往下跳,CLS 0.28。

L
Lily提问者
DTC 品牌独立站运营负责人
19 天前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
60

先把判断放在前面:图片、广告位、字体没有预留空间,加载完成后撑开高度,造成布局位移。

1处理顺序

  1. 给所有图片设置 width 与 height 属性,或用 CSS 固定宽高比。
  2. 广告位、评价组件预留 min-height。
  3. 字体用 font-display: swap 并做字体度量匹配。
  4. 不要把内容插入到已有内容上方。
  5. 用 Lighthouse 的 CLS 归因看具体是哪个元素位移。
验收:CLS 降到 0.1 以下,页面加载过程无跳动。
风 风格技术团队 回答于 18 天前
13

CLS 最容易被忽略的是「延迟加载的横幅」。用户已经在下滑了,横幅插进来把内容顶走,体验极差。

泽 阿泽 · 前端工程师 · 17 天前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu