Shopify Theme 开发 —— 性能优化

一、概述

关于 Shopify Theme 的性能优化，通常有以下几点：

1、卸载未使用的应用程序

有些 app 会在 theme 里面插入一些代码，即使 app 未被使用，也可能会加载一些脚本文件，影响页面渲染速度，所以建议不使用的 app 都卸载掉。

2、适当埋点，太多的埋点上报会影响网站速度

添加过多的埋点，也会影响网页加载速度，所以要适当添加必要的埋点。

3、为不同的设备提供最适合的图片

在下文中细说。

4、保持主题的版本最新

主题的更新经常会涉及到性能的优化，所以如果使用的是 Shopify 主题商店中的主题，最好保持主题的版本最新；如果是基于 dawn 主题自主开发的，也应该随时关注官方代码更新。

二、如何提供最适合的图片

官方博客：Shopify 上的响应式图片与 Liquid

1、目标

• 图片质量高
• 图片文件大小较小
• 图片以最佳方式加载，页面呈现快

2、image_url 和 image_tag 过滤器

shopify 提供了image_url 和 image_tag 过滤器来帮助生成响应式图像。

① image_url

用来生成图片在 Shopify CDN 的地址。它可以调整大小、裁剪、添加填充以及生成多种文件格式。

<!-- Input -->
{{ section.settings.image | image_url: width: 300 }}

<!-- Output -->
//cdn.shopify.../files/dog.jpg?width=300

② image_tag

用来生成 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" />

3、关于图片格式

推荐 JPEG 或 JPG，如果浏览器兼容性允许，可以考虑 WEBP、AVIF、JPEG XL 等新的文件格式

不使用GIF，如果需要动图，也选择MP4

小 icon 之类的选择 svg 格式

⭐️ 使用 image_url 过滤器，Shopify image API 会自动选择最合适的图片格式，可能是 WEBP、AVIF，在不支持新文件格式的浏览器，也会选择合适的格式

4、根据宽度设置不同尺寸图片

这里需要用到 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 图。

5、<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可以按需保留）

6、结论

为了更好的加载图片，在写的时候，至少要用上 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--------------------------------

风是透明的河流，雨是冰凉的流星。