24
2024/07

【Google-pagespeed】如何預先載入最大內容繪製圖片

網站架設seo
SEO專家 Vince Wu

問題:【Google-pagespeed】如何預先載入最大內容繪製圖片

預先載入 LCP 元素所使用的圖片,以縮短 LCP 載入時間。

圖片:

解答:

 

( 1 ) 請先查看是哪張圖片觸發了LCP指標,要改善頁面的 LCP 載入時間,您必須優化該元素的加載時間。

a. Google-pagespeed 看更多詳細內容

b. 瀏覽器 開發人員工具 (DevTools) > 效能 (performance) > 可查看哪個圖片元素觸發LCP指標

 

( 2 ) 將觸發LCP指標的圖像優化處理,圖像優化是一組技術,可以改善所有負載指標並減少佈局偏移 (CLS)。

a. 圖片壓縮:壓縮意味著應用不同的算法來刪除或分組圖像的各個部分,使其在此過程中變得更小。而有兩種類型的壓縮 - 有損和無損。

  1. 有損壓縮會從文件中刪除部分數據,從而導致質量較低的輕量級圖像。例如:JPEG 和 GIF 。
  2. 無損壓縮保持大致相同的圖像質量,即它不會刪除任何數據,但它產生沉重、高質量的圖像。例如:RAW 和 PNG 。

透過線上壓縮軟體Tinypanda可壓縮圖像大小,但須注意免費版有圖像最大容量限制,若超過5MB則無法壓縮 (付費使用則不在此限)。

b. 透過在 <link> 中使用 rel="preload" 可以在此頁(current page)預先載入(preload)稍後需要使用的資源,讓它們在稍後瀏覽器進行頁面轉譯的時候可以立即被使用。


關於可思科技

我們是一家「綜合型」的SEO服務公司,提供技術與內容並存的SEO優化,擁有經驗豐富的網站工程師,加上用心的文案團隊,讓網站成為「專業領域的權威網站」!
立即諮詢