Guides

Image Lazyload 圖片懶加載

Suggest Edits

Introduction

Image Lazyload 圖片懶加載功能整合 lazysizes.js 可以顯著提升電商網站的性能和用戶體驗，是提升網站整體效果的一個重要手段。開啟該功能後可以期待以下幾個方面的效果和提升：

  1. 加速頁面載入速度：Lazysizes 實現了懶加載功能，這意味著圖片只在即將進入瀏覽器可視區域時才開始載入。這樣可以顯著減少初始頁面載入時間，因為並非所有圖片都需要同時被載入，特別是對於圖片密集型的頁面來說，這一點尤為重要。
  2. 提升用戶體驗：更快的頁面載入意味著用戶能夠更快地瀏覽商品列表，減少了等待時間，提高了互動的流暢性。這對於提高用戶滿意度和降低跳出率有直接幫助。
  3. SEO友善：lazysizes 設計時考慮了SEO因素，確保圖片在適當的時候（如在載入時）能夠被正確索引，有助於維護網站的搜索引擎排名。優化核心網頁效能指標 LCP（最大內容繪製），整體載入速度提升，搜尋引擎更青睞快速網站，有利於搜索排名。
  4. 響應式圖像支援：lazysizes 自動處理響應式圖像的sizes屬性，確保不同設備螢幕下載入最合適的圖片尺寸版本，既優化了載入速度，也提升了圖像質量，適應各種螢幕需求。
  5. 手機端體驗改善：僅載入首屏可見的商品圖，其他圖片延遲載入，節省流量；減少不必要的圖片處理，降低設備耗能，電池壽命延長；

受影響的範圍

建構器元件類型一般店家LE店家
NPB圖片元件直接內建 Lazyload直接內建 Lazyload
NPB商品元件需申請啟用 Lazyload需申請啟用 Lazyload + 修改 liquid 檔案
OPB圖片元件需申請啟用 Lazyload需申請啟用 Lazyload
OPB商品元件需申請啟用 Lazyload需申請啟用 Lazyload + 修改 liquid 檔案

＊一般店家，預計在 2024 Aug 後會全數自動啟用 lazyload，此功能暫時未覆蓋到「文字分頁」「部落格頁面」「一頁商店」

Layout Engine 店家啟用

為了支援 SHOPLINE 新開發的功能 "Image Lazyload 圖片懶加載"，對於有開啟 Layout Engine 的店家，除了聯繫你的顧問申請啟用功能外，也需調整程式碼檔案。
涉及到的檔案有四個，為了避免 Lazyload img tag 影響 Layout Engine 客製化結果，請自行依照以下說明調整語法。

  • product.liquid
  • quick_cart_product.liquid
  • promotion_product.liquid
  • theme.css.liquid

＊新開 LE 店家的 liquid 檔案已是最新版本，無需調整程序碼，只需申請啟用 Lazyload


調整說明

product.liquid 檔案調整

步驟一: 找出要修改的程式碼 1

<div class="Image-boxify-image js-image-boxify-image sl-lazy-image {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %}" style="background-image:url({{ product.image.src | img_url: '800x' }})"></div>

步驟二：將找到的程式碼替換為下面的程式碼 1

<div
    class="Image-boxify-image js-image-boxify-image sl-media {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %}">
    <div class="boxify-image-wrap">
        {{ product.image.src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin:
        product.image.width,
        alt: product.title }}
    </div>
</div>

步驟三: 找出要修改的程式碼 2

{% if product.cover_images.size > 1 %}
<div class="Image-boxify-image js-image-boxify-image sl-lazy-image {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %} second-image"
    style="background-image:url({{ product.cover_images[1].src | img_url: '800x' }})"></div>
{% endif %}

步驟四：將找到的程式碼替換為下面的程式碼 2

{% if product.cover_images.size > 1 %}
<div
    class="Image-boxify-image js-image-boxify-image sl-media {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %} second-image">
    <div class="boxify-image-wrap">
        {{ product.cover_images[1].src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin:
        product.cover_images[1].width, alt: product.title }}
    </div>
</div>
{% endif %}

步驟五：檢查完成後的樣子是否正確

quick_cart_product.liquid 檔案調整

步驟一: 找出要修改的程式碼 1

<div class="boxify-image js-boxify-image center-contain sl-lazy-image {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %}"
    style="background-image:url({{ product.image.src | img_url: '750x' }})">
    {% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}
    <div class="btn-add-to-cart js-btn-add-to-cart hidden-xs hidden-sm" {% if expend_variation_key %}
        data-variant-id="{{ expend_variation_key }}" {% endif %}>
        {{'shopline_translations.product.quick_cart.add_to_cart' | translate}}
    </div>
    {% endunless %}
</div>

步驟二：將找到的程式碼替換為下面的程式碼 1

<div
    class="boxify-image js-boxify-image center-contain sl-media {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %}">
    <div class="boxify-image-wrap">
        {{ product.image.src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin:
        product.image.width, alt: product.title }}
    </div>

    {% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}
    <div class="btn-add-to-cart js-btn-add-to-cart hidden-xs hidden-sm" {% if expend_variation_key %}
        data-variant-id="{{ expend_variation_key }}" {% endif %}>
        {{'shopline_translations.product.quick_cart.add_to_cart' | translate}}
    </div>
    {% endunless %}
</div>

步驟三: 找出要修改的程式碼 2

{% if product.cover_images.size > 1 %}
<div class="boxify-image js-boxify-image center-contain sl-lazy-image {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %} second-image"
    style="background-image:url({{ product.cover_images[1].src | img_url: '750x' }})">
    {% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}
    <div class="btn-add-to-cart js-btn-add-to-cart hidden-xs hidden-sm">
        {{'shopline_translations.product.quick_cart.add_to_cart' | translate}}</div>
    {% endunless %}
</div>
{% endif %}

步驟四：將找到的程式碼替換為下面的程式碼 2

{% if product.cover_images.size > 1 %}
<div
    class="boxify-image js-boxify-image center-contain sl-media {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %} second-image">
    <div class="boxify-image-wrap">
        {{ product.cover_images[1].src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin:
        product.cover_images[1].width, alt: product.title }}
    </div>

    {% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}
    <div class="btn-add-to-cart js-btn-add-to-cart hidden-xs hidden-sm">
        {{'shopline_translations.product.quick_cart.add_to_cart' | translate}}</div>
    {% endunless %}
</div>
{% endif %}

步驟五：檢查完成後的樣子是否正確

promotion_product.liquid 檔案調整

步驟一: 找出要修改的程式碼

<div class="boxify-image center-contain sl-lazy-image {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %} {% if product.available_time_type %}not-in-available-time{% endif %}" style="background-image:url({{ product.image.src | img_url: '750x' }})" ></div>

步驟二：將找到的程式碼替換為下面的程式碼

<div
    class="boxify-image center-contain sl-media {% if product.sold_out and shop.sold_out_enabled %}out-of-stock{% endif %} {% if product.available_time_type %}not-in-available-time{% endif %}">
    <div class="boxify-image-wrap">
        {{ product.image.src | image_tag:
        use_lazysizes: true,
        widths: 'auto',
        sizes: 'auto',
        origin: product.image.width,
        mobile_size: 180,
        desktop_size: 480,
        alt: product.title
        }}
    </div>
</div>

步驟三：檢查完成後的樣子是否正確

theme.css.liquid 檔案調整

步驟一：搜尋 theme.css.liquid，並在最底下加入以下程式碼

.sl-media {
    display: block;
    position: relative;
    overflow: hidden;
}
.sl-media > *:not(.btn-add-to-cart) {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.sl-media > img,
.sl-media > .boxify-image-wrap img {
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center center;
    object-position: center center;
}
.sl-media > .boxify-image-wrap img {
    width: 100%;
    height: 100%;
    max-width: 100%;
}
.Grid-row .Grid-item .sl-media img {
    height: 100%;
    -o-object-position: center;
    object-position: center;
}
.sl-lazy,
.sl-lazyloading {
    opacity: 0.01;
}
.sl-lazyloaded {
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

步驟二：搜尋 theme.css.liquid 中以下程式碼並移除，此调整大幅改善使用 Layout engine - Ultra Chic 店家網站的白屏行為

body.home.index .CustomPage {
    visibility: hidden;
}

步驟三：點擊保存以檢查格式是否正確

Updated 5 months ago