Image Lazyload 圖片懶加載
Introduction
Image Lazyload 圖片懶加載功能整合 lazysizes.js 可以顯著提升電商網站的性能和用戶體驗,是提升網站整體效果的一個重要手段。開啟該功能後可以期待以下幾個方面的效果和提升:
- 加速頁面載入速度:Lazysizes 實現了懶加載功能,這意味著圖片只在即將進入瀏覽器可視區域時才開始載入。這樣可以顯著減少初始頁面載入時間,因為並非所有圖片都需要同時被載入,特別是對於圖片密集型的頁面來說,這一點尤為重要。
- 提升用戶體驗:更快的頁面載入意味著用戶能夠更快地瀏覽商品列表,減少了等待時間,提高了互動的流暢性。這對於提高用戶滿意度和降低跳出率有直接幫助。
- SEO友善:lazysizes 設計時考慮了SEO因素,確保圖片在適當的時候(如在載入時)能夠被正確索引,有助於維護網站的搜索引擎排名。優化核心網頁效能指標 LCP(最大內容繪製),整體載入速度提升,搜尋引擎更青睞快速網站,有利於搜索排名。
- 響應式圖像支援:lazysizes 自動處理響應式圖像的sizes屬性,確保不同設備螢幕下載入最合適的圖片尺寸版本,既優化了載入速度,也提升了圖像質量,適應各種螢幕需求。
- 手機端體驗改善:僅載入首屏可見的商品圖,其他圖片延遲載入,節省流量;減少不必要的圖片處理,降低設備耗能,電池壽命延長;
受影響的範圍
建構器 | 元件類型 | 一般店家 | 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 6 months ago