Shopify Theme 開發 —— 效能最佳化

麦豇豆發表於2024-05-11

一、概述

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

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

相關文章