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--------------------------------

風是透明的河流，雨是冰涼的流星。