改善網站加載時間和 Google Core Vitals 的十種方法

已發表: 2021-08-15

目錄

什麼是核心網絡生命力

今年年初,谷歌推出了一套新的標準來定義任何給定網站的穩定性、速度和響應能力。 三個主要標準如下:

  • Cumulative Layout Shift定義了網頁結構應該移動和改變位置的程度。 基準是 0.1。
  • Largest Contentful Paint衡量加載頁面主要內容所需的時間。 最好的結果應該是 2.5 秒或更短。
  • 首次輸入延遲是網頁打開與首次變為交互的那一刻之間的時間。 最常用的時間範圍是 100 毫秒左右。

記住這些基本術語,讓我們看看如何使用 Core Vitals 使您的網站盡可能快速和高效。

1.優化您的 CDN 和瀏覽器緩存

使用這種方法,您的 FID 和 LCP 分數應該會很快提高。 從 CDN 提供靜態資產,或將它們緩存在 AWS 的 Cloudfront 等服務上。 在此之後,瀏覽器將更快地獲得所需的結果。

此外,動態頁面可以緩存在您的 CDN 中,並且已經應用了正確的 TTL 值,具體取決於您的應用程序的行為方式。

2. 為所有廣告和媒體使用精確尺寸

大小事項標誌 就您的 CLS 分數而言,這是最重要的因素之一。 始終檢查您是否已在圖像或標記資產上設置了特定高度,這非常重要,尤其是對於折疊級組件。 如果您時間緊迫,您始終可以將高度設置為自動並獲得一個在緊要關頭應該足夠好的近似尺寸。

廣告也會影響 CLS,您需要徹底檢查它們的高度和尺寸,以確保它們不會因顯示不正確而取代內容。 如果您的 CLS 持續受到影響,這可能需要聯繫您的廣告服務提供商或四處尋找一些不同的選項。

如果您使用的是 WordPress 平台,我們建議您考慮使用Ewww之類的插件,它可以自動在 Webp 中交付您的圖像,並啟用延遲加載等功能,以延遲加載頁面加載時的所有圖像。

3.根據使用的設備類型以惰性方式加載正確分辨率的圖像

這種技術可以非常快速地產生結果,應該是您首先考慮的因素之一。 令人驚訝的是,通過使用延遲加載包來延遲加載您網站上的所有圖像,您的 LCP 將受到積極影響,主要是通過降低頁面的重量並確保其盡快加載。

根據用於查看站點的設備類型為每個資產設置分辨率也很重要。 以萬能的方式加載分辨率將使網站在更小或功能更弱的設備上變得更慢,並以最糟糕的方式影響您的 LCP。

4. 明智地使用 SSR 和 CSR

谷歌一直熱衷於鼓勵和推廣評分良好的服務器端渲染 (SSR) 頁面,以激發有價值的 SEO 性能。 但是,您必須考慮 SEO 和頁面加載性能之間的平衡。 內容過多的頁面可能需要很長時間才能加載服務器端並降低您網站的總體性能。

實際內容應保留在首屏,而其他站點功能應保留以改善 SSR。 這種異步加載樣式會佔用您大量的加載和渲染分數時間。

5. 通過拆分代碼來分解一切

代碼行 對資產(尤其是 JS 文件)使用最重要的文件大小通常是一個壞主意。 相反,您應該允許 h2 協議並利用它在單獨的部分中再次異步加載資產。

此外,您可以將網站分成多個較小的文件,而不是使用一個巨大的 HTML 文件,從而減輕加載負擔。

6. 使用 Brotli 壓縮技術縮減靜態資產

就壓縮而言,Brotli 似乎是加載速度方面的最佳選擇。 但是,就 DevOps 而言,更高的壓縮比將增加打包和構建時間。

但歸根結底,網站加載時間是最關鍵的因素,應該優先考慮。

7. 讓響應內容和Api請求盡可能高效

毫無疑問,加載速度方面最重要的元素,即使是最微小的變化,也可以通過 API 產生巨大的結果。 為了優化,應經常檢查 API 響應和請求。

此外,定義數據參數並僅使用必要的參數以節省大量時間和精力。 為您的 API 選擇網絡也值得仔細考慮,因為託管在錯誤的子網上會大大增加時間要求。

8. 縮小頁面和文檔的整體大小

看網上文件的人 繁重的代碼登陸頁面(超過 75kb 的任何內容都可能很嚴重)是非常不可取的,因為它們會大大增加加載時間和獲取時間。

始終嘗試在代碼方面保持乾淨,因為很容易遺漏一些冗餘數據。

9.用佔位符圖像替換視頻縮略圖

許多站點查看者不喜歡與視頻內容互動,因此在這種情況下,在未播放的視頻上加載縮略圖是一種資源浪費。

最好選擇佔位符圖像或空白視頻空間以節省資源,從而提高網站速度。

10. 選擇可用的最快服務器

速度線 這似乎是一個顯而易見的因素,但仍然值得一提。 投資最好的服務器基礎設施通常是一個好主意,因為它直接影響整個站點的速度,無一例外。

通過花更多的錢,您將節省大量時間。 Cloudflare是一款出色的 DNS 級工具,可讓您經濟高效地優化您的網站,而無需昂貴的服務器資源。

結論

上面的提示將使您走上正確的軌道,以實現更好的 Page Speed 分數和核心生命體徵。 但是,您可能會發現自己處於一個臃腫的平台或主題上,這通常意味著創建一個新的、更清潔和更輕量級的網站的最佳行動方案。

假設您對所有這些術語感到摸不著頭腦,或者對重新設計整個網站以提高速度的想法感到畏懼。 在這種情況下,您可能需要考慮來自網頁設計專家的網站審查,他們可能會建議優化現有網站的最佳行動方案,或者建議升級到具有更優化核心生命體徵的代碼庫的新網站。