06/03 解決 網站的 LCP載入問題

因為我的網站佈景主題的關係，一直都有這樣的載入問題，現在已經處理到一個階段。建議各位有架站的人，可以直接把你網站的CSS以及前端的HTML一起丟給AI請他幫你看一下你網站內容有什麼問題。

GOOGLE 廣告載入

通常會出現的問題就是GOOGLE廣告載入的問題，因為只要沒有預留空間的話，GOOGLE廣告就會擠出來，造成畫面上的變動，這時候會影響到載入效能(CLS數值部分），這個時候直接請AI調整載入的CSS，以及預先預留的位置就可以調整，只要動CSS就可以了，這個調整我沒有截圖到，但就是透過CSS以及最終的HTML給AI進行調整。

載入效能有問題的網頁（群組）會列在SEARCH CONSOL當中，可以透過 PageSpeed Insights 看一下有遇到什麼狀況，我一次都單獨處理一個問題，比較好容易處理以及識別。

今天就處理LCP的問題，來回問了AI幾次之後，後來發現是因為我的網站快取引擎 LiteSpeed Cache，會延遲CSS 載入，所以造成了由1000-2000豪秒的延遲，這個在網頁上的干擾很大，解法也很簡單。

在上面這個廣告方塊當中的區塊，直接加入data-no-async=”1″，直接解決這個問題。只要加上這樣。就可以讓載入時間縮短成三百豪秒。（這個處理方只有你的快取引擎是LiteSpeed Cache才適用，其他的引擎要看一下文件，可能有不同的處理方式，但大部分應該都有類似的功能）

效能調整使用到的工具

• GOOGLE Search Console
• PageSpeed Insights