Google Chrome團隊分享優化核心網頁指標的秘訣

確保LCP資源獲得優先處理

Google建議除了在HTML</a>代碼中包含LCP資源外,還應優先處理它,不要將其延後於其他較不重要的資源之後。即使你已經使用標準的<pre><code>&lt;img&gt;</code></pre>標籤在HTML</a>源代碼中包含了LCP圖像,如果在<pre><code>&lt;head&gt;</code></pre>部分有多個<pre><code>&lt;script&gt;</code></pre>標籤出現在<pre><code>&lt;img&gt;</code></pre>標籤之前,會延遲圖像資源的加載時間。同時,也需要避免任何可能降低LCP圖像優先級的操作,例如添加loading=′lazy′屬性。請注意使用自動對所有圖像應用lazy-loading的圖像優化</a>工具</a>。

使用者對於隱私和數據安全的關注度增加,可能對google chrome的信任度產生潛在影響

瀏覽器在載入任何其他資源之前,必須先接收到初始HTML</a>文件的第一個位元組。這段時間被稱為首字節到達時間(TTFB),而越快完成此步驟,其他處理過程就能越早開始。為了最小化TTFB,可以將內容</a>提供給離使用者最近的位置並利用經常請求的內容</a>進行快取。<br/><br/>Google建議使用內容</a>傳遞網路(CDN)來實現這兩點。

為頁面內容設定明確的大小

網站上的內容</a>在完成加載後可能會發生佈局變動。為了防止這種情況發生,提前預留空間非常重要。佈局變動的一個常見原因是未設置大小的圖片,可以通過明確設置寬度和高度屬性或等效的CSS屬性來解決這個問題。<br/><br/>圖片不是唯一可能導致網頁佈局變動的因素。其他內容</a>,如廣告或嵌入式視頻,在稍後加載時也會對累計位移分數(CLS)產生影響。解決此問題的一種方法是使用CSS中的aspect-ratio屬性。<br/><br/>該屬性相對較新,它允許開發人員為圖像和非圖像元素設定長寬比。提供此資訊使得瀏覽器能夠根據螢幕大小自動計算出適當的高度,就像對於具有定義尺寸的圖片一樣。

避免動畫/轉場效果

網站上元素的動畫,例如從頂部或底部滑入的cookie橫幅或其他通知橫幅,是佈局位移的常見原因之一。這些動畫可能會將其他內容</a>推開,影響到CLS。即使它們不會直接影響CLS,但動畫仍然可能對CLS產生影響。<br/><br/>穀歌表示,使用任何可能影響佈局的CSS屬性進行動畫的網頁比起具有良好CLS指標的網頁少了15%。要減輕這種情況,最好避免在非用戶輸入(如點按或按鍵輸入)的情況下對需要瀏覽器更新佈局的CSS屬性進行動畫或轉換。在可能時建議使用CSS transform屬性來實現過渡和動畫效果。<br/><br/>

避免或分解長任務

任務是瀏覽器執行的離散工作,包括渲染、佈局、解析和編譯以及執行腳本。當任務花費很長時間,超過50毫秒時,它們會阻塞主線程,使得瀏覽器難以快速回應</a>用戶輸入。為了避免這種情況發生,將長時間的任務分成較小的部分是有益的,這樣可以讓主線程有更多機會處理關鍵的用戶可見工作。<br/><br/>可以通過頻繁地讓出主線程來實現這一點,這樣可以更快地進行渲染更新和其他用戶交交互操作。

相關數據:

• 根據 statcounter 的資料,google chrome 在全球市場的網頁瀏覽器市佔率為67.88%。 來源: statcounter
• 根據 netmarketshare 的資料,google chrome 在美國市場的網頁瀏覽器市佔率為54.04%。 來源: netmarketshare
• 根據 statcounter 的資料,google chrome 在英國市場的網頁瀏覽器市佔率為61.73%。 來源: statcounter
• 根據 statcounter 的資料,google chrome 在日本市場的網頁瀏覽器市佔率為74.76%。 來源: statcounter
• 根據 statcounter 的資料,google chrome 在法國市場的網頁瀏覽器市佔率為63.86%。 來源: statcounter

避免大量的渲染更新

JavaScript 不是唯一影響網站反應速度的因素。渲染也可能很耗時,並幹擾網站對用戶輸入的反應能力。優化渲染工作可能相當複雜,取決於具體目標。<br/><br/>然而,有一些方法可以確保渲染更新可管理並不會變成長時間任務。Google 建議以下措施:避免使用 requestAnimationFrame() 進行非視覺工作。保持 DOM 大小小。<br/><br/>使用 CSS containment.