24
2024/07
【Google-pagespeed】如何預先載入最大內容繪製圖片
SEO專家 Vince Wu
問題:【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)稍後需要使用的資源,讓它們在稍後瀏覽器進行頁面轉譯的時候可以立即被使用。
關於可思科技
我們是一家「綜合型」的SEO服務公司,提供技術與內容並存的SEO優化,擁有經驗豐富的網站工程師,加上用心的文案團隊,讓網站成為「專業領域的權威網站」!
立即諮詢