## 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 ```liquid

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

{{ product.image.src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin: product.image.width, alt: product.title }}

``` 步驟三: 找出要修改的程式碼 2 ```liquid {% if product.cover_images.size > 1 %}

{% endif %} ``` 步驟四：將找到的程式碼替換為下面的程式碼 2 ```liquid {% if product.cover_images.size > 1 %}

{{ product.cover_images[1].src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin: product.cover_images[1].width, alt: product.title }}

{% endif %} ``` 步驟五：檢查完成後的樣子是否正確 ### quick\_cart\_product.liquid 檔案調整步驟一: 找出要修改的程式碼 1 ```liquid

{% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}

{{'shopline_translations.product.quick_cart.add_to_cart' | translate}}

{% endunless %}

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

{{ product.image.src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin: product.image.width, alt: product.title }}

{% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}

{{'shopline_translations.product.quick_cart.add_to_cart' | translate}}

{% endunless %}

``` 步驟三: 找出要修改的程式碼 2 ```liquid {% if product.cover_images.size > 1 %}

{% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}

{{'shopline_translations.product.quick_cart.add_to_cart' | translate}}

{% endunless %}

{% endif %} ``` 步驟四：將找到的程式碼替換為下面的程式碼 2 ```liquid {% if product.cover_images.size > 1 %}

{{ product.cover_images[1].src | image_tag: use_lazysizes: true, widths: 'auto', sizes: 'auto', origin: product.cover_images[1].width, alt: product.title }}

{% unless is_quick_cart == false or product.available_time_type or product.sold_out and shop.sold_out_enabled %}

{{'shopline_translations.product.quick_cart.add_to_cart' | translate}}

{% endunless %}

{% endif %} ``` 步驟五：檢查完成後的樣子是否正確 ### promotion\_product.liquid 檔案調整步驟一: 找出要修改的程式碼 ```liquid

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

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

``` 步驟三：檢查完成後的樣子是否正確 ### theme.css.liquid 檔案調整步驟一：搜尋 theme.css.liquid，並在最底下加入以下程式碼 ```css .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 店家網站的白屏行為 ```css body.home.index .CustomPage { visibility: hidden; } ``` 步驟三：點擊保存以檢查格式是否正確