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

首屏样式加载太慢,出现无样式内容

2 个回答 3,390 次浏览 性能与 Core Web Vitals 最后活跃 1 个月前
98

页面打开先看到一堆无样式的 HTML,一秒后才正常。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
1 个月前提问 · 已收到 2 个回答

2 个回答

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

先把判断放在前面:CSS 是阻塞渲染的资源,主样式文件太大或加载慢就会这样。

1处理顺序

  1. 把首屏关键 CSS 内联到 <head>。
  2. 非关键 CSS 用 media="print" 技巧异步加载。
  3. 拆分主题 CSS,按页面类型加载不同文件。
  4. 移除未使用的样式,主题 CSS 常有大量冗余。
  5. 用 Lighthouse 的「消除阻塞渲染的资源」验证。
验收:首屏 1 秒内呈现正确样式,无 FOUC。
风 风格技术团队 回答于 1 个月前
7

主题 CSS 动辄 300KB,其中一半可能从未被使用。清理冗余比内联更根本。

泽 阿泽 · 前端工程师 · 1 个月前

你的处理方式是什么?

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

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