Guides

Performance Tunning

Suggest Edits

Layout engine Performance tunning

Google PageSpeed Insight 主要會根據下列的指標來對您的網站做分數的測量,分別為

總阻塞時間(以下簡稱 TBT),累積佈局偏移 (以下簡稱 CLS ), 首次內容繪製 (以下簡稱 FCP)

本篇內容將會給您指引, 避免您在對網站進行客製化的同時影響了這些指標, 導致網站跑分的降低

TBT

Javascript evaluation

Javascript 的執行時間會影響到您的跑分成績, 下面我們列出幾點可以幫助網站撰寫出不會影響跑分的 Javascript 的方式

  1. 若是您需要在您的網站上加入第三方 Javascript, 請盡量避免使用會阻塞瀏覽器的 render 的方式引入, 您可以在第三方 Javascript 上加入 defer 標籤來避免阻塞

    ex: <script src=“yourjsfile.com” defer />

  2. 若是您的 Javascript 過大, 請將您的 Javascript 進行 minify 等方式進行壓縮, 若是您不確定該怎麼將 Javascript 進行壓縮, 可參考下列類似的服務 https://codebeautify.org/minify-js

  3. 請確認您的 Javascript 只有在需要的頁面載入, 避免在不需要的頁面載入不需要的 Javascript 導致影響跑分, 您可以利用我們提供的 page.url 或是 page.identifier 來做到這件事情, 請參考我們的 layout engine 文件

CLS

  1. Banner & topbar

  2. 請盡量避免使用 Javascript 動態的方式來插入 Banner 或是 Topbar, 因為此舉會造成畫面的跳動進而影響到 CLS 的評分, 請盡量使用 html 的方式來繪製您的額外元素

FCP

  1. 建議您可以使用 Critical Path CSS 來進一步加速您的畫面 render, 使用步驟為
    1.1 先連絡您的 MS 專員, 要求開啟 Critical CSS 功能
    1.2 產出 Critical CSS (可自行撰寫, 或是利用線上工具
    1.3 新增 Critical CSS (檔名固定格式為 critical_{controller_name}_{action_name})
    1.3.1 確定檔案名稱, 檢視你要新增的頁面的 body class name, 前兩個依序為 controller_name, action_name
    1.3.2 至後台編輯 HTML/CSS → 資源檔新增 critical_{controller_name}_{action_name} 已首頁為例 即為 (critical_home_index), 並貼上 1.2 步驟產出的 css code 出版。
633

1.3.1 已首頁為例, 可以看到前兩個 class 為 home & index, 即為 controller_name, action_name

  1. img lazyload
    2.1 若是您需要在 layout engine 內新增客製化圖片, 建議可以使用我們免費提供的 CDN 網址, 藉此可以提供您免費的圖片快取與加速載入
 您可以在設定 > 圖片庫中, 找到您之前曾經上傳至圖片庫的圖片, 您可以直接使用複製連結按鈕來複製原圖網址

2.2 請確保您使用的圖片大小是使用者視窗適合的大小
2.3 您可以在您的 img tag 內加入 sl-lazy 這個 class, 讓我們的系統幫你自動做圖片的延遲載入

GTM

如果您有在店裡使用 GTM 來為您的網站作客製化, 由於 GTM 也會影響跑分, 避免在不需要的頁面載入不需要的 GTM 導致影響跑分, 您可以利用我們提供的 page.url 或是 page.identifier 來做到這件事情, 請參考我們的 layout engine 文件
並且請盡量避免在您的 GTM 內去對您的 DOM 元素做額外的操作, 此舉會造成更大的分數降低

Updated 7 months ago