关于 Shopify Theme 的性能优化，通常有以下几点：
有些 app 会在 theme 里面插入一些代码，即使 app 未被使用，也可能会加载一些脚本文件，影响页面渲染速度，所以建议不使用的 app 都卸载掉。
添加过多的埋点，也会影响网页加载速度，所以要适当添加必要的埋点。
在下文中细说。
主题的更新经常会涉及到性能的优化，所以如果使用的是 Shopify 主题商店中的主题，最好保持主题的版本最新；如果是基于 dawn 主题自主开发的，也应该随时关注官方代码更新。
image_url 和 image_tag 过滤器shopify 提供了image_url 和 image_tag 过滤器来帮助生成响应式图像。
用来生成图片在 Shopify CDN 的地址。它可以调整大小、裁剪、添加填充以及生成多种文件格式。
<!-- Input -->
{{ section.settings.image | image_url: width: 300 }}
<!-- Output -->
//cdn.shopify.../files/dog.jpg?width=300
用来生成 HTML 的 img 标签，默认图片懒加载。
<!-- Input -->
{{ section.settings.image | image_url: width: 300 | image_tag }}
<!-- Output -->
<img src="//cdn.shopify.../files/dog.jpg?width=300" width="300" height="393" />
推荐 JPEG 或 JPG，如果浏览器兼容性允许，可以考虑 WEBP、AVIF、JPEG XL 等新的文件格式
不使用GIF，如果需要动图，也选择MP4
小 icon 之类的选择 svg 格式
⭐️ 使用 image_url 过滤器，Shopify image API 会自动选择最合适的图片格式，可能是 WEBP、AVIF，在不支持新文件格式的浏览器，也会选择合适的格式
这里需要用到 img 标签的 srcset 和 sizes 属性。
<!-- Input -->
{{ section.settings.image |
image_url: width: 600 |
image_tag:
widths: '300, 600',
sizes: '(min-width: 400px) 298px, 78.75vw',
style: 'width: 300px' }}
<!-- Output -->
<img
src="//cdn.shopify.../files/dog.jpg?width=600"
srcset="
//cdn.shopify.../files/dog.jpg?width=300 300w,
//cdn.shopify.../files/dog.jpg?width=600 600w"
width="600"
height="785"
sizes="(min-width: 400px) 298px, 78.75vw"
style="width: 300px">
在上面的代码中，给浏览器提供了 2 个候选文件 - 一个为 300 像素宽，另一个为 600 像素宽，浏览器将根据用户的屏幕尺寸和设备像素比 (DPR) 来最终决定下载哪个。
⚠️ 注意不要过度使用 srcset，尤其是网站流量不高的情况下，用户访问的图片可能还没有在 CDN 中缓存，这样加载时间会更长。
如果没有多尺寸图片，那么建议选择 2x 图。
<picture> 标签<picture> 标签是一个比较新的 HTML 标签，可以根据浏览器支持的类型、屏幕尺寸等提供合适的图片。
① 根据浏览器选择合适的图片类型（<source>的type属性）
<picture> <source type="image/avif" srcset="pug_life.avif" /> <source type="image/webp" srcset="pug_life.webp" /> <img src="pug_life.jpg" alt="pug wearing a striped t-shirt like a boss" /> </picture>
浏览器会按顺序读取<picture>里面<source>的类型，提供第一个匹配到的图片源，都不支持，则选择<img>保底。（在 liquid 中使用 image_url 过滤器可以达到一样的效果）
②根据屏幕尺寸提供不同的图片（<source>的media属性）
<picture>
<source
media="(min-width: 800px)"
srcset="wide_800.jpg 800w, wide_1600.jpg 1600w"
/>
<source
media="(min-width: 400px)"
srcset="narrow_400.jpg 400w, narrow_800.jpg 800w"
/>
<img src="wide_800.jpg" alt="Woman with dog looking at Grand Canyon" />
</picture>
③避免手机端图片过大
<picture>
<source
media="(max-width: 800px)"
srcset="
{{ section.settings.image | image_url: width: 300 }} 1x,
{{ section.settings.image | image_url: width: 600 }} 2x,
">
{{ section.settings.image |
image_url: width: 2000 |
image_tag:
widths: '1000, 2000',
sizes: '(min-width: 1000px) 760px, (min-width: 800px) calc(100vw - 380px), (min-width: 400px) 298px, 78.75vw',
class: 'mobile-size-fix' }}
</picture>
这个例子中800px以下的屏幕，只提供1x和2x的图，不会因为手机分辨率过高提供的图片太大。（1x的屏现在也很少了，这个1x可以按需保留）
为了更好的加载图片，在写的时候，至少要用上 image_url 和 image_tag 过滤器，这样 Shopify image API 会帮你选择最合适的图片格式，还能懒加载。
{{ section.settings.image | image_url: width: 300 | image_tag }}
其次，如果同一张图，想在不同尺寸的设备上，加载不同尺寸的图，可以用 image_tag 的 sizes 和 widths。
{{ section.settings.image |
image_url: width: 600 |
image_tag:
widths: '300, 600',
sizes: '(min-width: 400px) 298px, 78.75vw',
style: 'width: 300px' }}
如果还希望不同尺寸使用不同的图片，那就可以试试使用 <picture> 标签。（具体看5，感觉 image_url 和 image_tag 基本上够用了）。
END--------------------------------
风是透明的河流，雨是冰凉的流星。