總經理/帝王引擎 Vince Wu
2022-10-07內容大綱
問題：【Google-pagespeed】如何預先載入最大內容繪製圖片
預先載入 LCP 元素所使用的圖片，以縮短 LCP 載入時間。
圖片：
解答：
( 1 ) 請先查看是哪張圖片觸發了LCP指標，要改善頁面的 LCP 載入時間，您必須優化該元素的加載時間。
a. Google-pagespeed 看更多詳細內容
b. 瀏覽器 開發人員工具 (DevTools) > 效能 (performance) > 可查看哪個圖片元素觸發LCP指標
( 2 ) 將觸發LCP指標的圖像優化處理，圖像優化是一組技術，可以改善所有負載指標並減少佈局偏移 (CLS)。
a. 圖片壓縮：壓縮意味著應用不同的算法來刪除或分組圖像的各個部分，使其在此過程中變得更小。而有兩種類型的壓縮 - 有損和無損。
- 有損壓縮會從文件中刪除部分數據，從而導致質量較低的輕量級圖像。例如：JPEG 和 GIF 。
- 無損壓縮保持大致相同的圖像質量，即它不會刪除任何數據，但它產生沉重、高質量的圖像。例如：RAW 和 PNG 。
透過線上壓縮軟體Tinypanda可壓縮圖像大小，但須注意免費版有圖像最大容量限制，若超過5MB則無法壓縮 (付費使用則不在此限)。
b. 透過在 <link> 中使用 rel="preload" 可以在此頁（current page）預先載入（preload）稍後需要使用的資源，讓它們在稍後瀏覽器進行頁面轉譯的時候可以立即被使用。