如何提高網站載入速度

一、為什麼要重視網站載入速度

網頁載入時間較長會嚴重影響跳出率

Google的報告指出：

如果網頁載入時間從 1 秒增加到 3 秒，跳出率就會提高 32％

如果網頁載入時間從 1 秒增加到 6 秒，跳出率就會上升 106％

二、如何檢測網站的載入速度

1.PageSpeed Insights

在這裡可以檢視到移動端和桌面端的載入速度，還有最佳化建議，按照最佳化建議對相應的頁面，進行最佳化。

圖片來源：pagespeed insights

這裡的分值可以看到你的網站的載入速度評分：紅色表示差，橙色表示中等，綠色表示良好。

圖片來源：1。PageSpeed Insights

往下會有最佳化建議，按照這裡的最佳化建議提示，對可最佳化的網址頁面進行最佳化。

圖片來源：1。PageSpeed Insights

2.gtmetrix.com

在這裡可以看到我們網站桌面端的載入速度，並且給出一些最佳化建議。紅色表示差，橙色表示中等，綠色表示良好。

圖片來源：gtmetrix。com

三、網站載入速度緩慢的原因

在GSC的核心網頁指標裡面可以看到我們桌面端和移動端頁面載入的一些問題：

1.FCP問題

（首次內容繪製-使用者從頁面開始載入到看到頁面第一個內容元素的時間）；

2.LCP問題

（最大內容渲染-使用者開啟網站看到頁面最大元素所需要的時間）

3.FID問題

（首次輸入延遲-使用者第一次與網頁互動，瀏覽器的響應時間）

4.CLS問題

（累計佈局偏移-網頁元素髮生的意外偏移）等。

圖片來源：google幫助中心

圖片來源：GSC

在網站載入速度的評分中，LCP和TBT（FID）的權重最高，我們可以重點關注這兩個指標。

圖片來源：Google幫助中心

導致LCP不佳的原因有：

（1）緩慢的伺服器響應速度；（2）JavaScript 和 CSS加大渲染時間；（3）緩慢的資源載入速度；（4）客戶端渲染緩慢等。

導致TBT（FID）不佳的原因有：

圖片來源：google開發工具

（1）繁重的JavaScript 執行；

（2）javaScript的執行時長；

（3）第三方程式碼阻礙主執行緒執行等。

四、如何提高網站載入速度

（一）最佳化LCP

1.提升伺服器響應速度（最佳化首位元組時間）

（1）最佳化的伺服器，使得伺服器可以在瀏覽器請求時立即提供靜態頁面。

（2）使用CDN，將使用者分佈到附近的 CDN，近距離的伺服器網路可以加快網路速度。

（3）瀏覽器快取，使用瀏覽器快取可以減少首位元組時間，優先使用快取提供 HTML 頁面。

（4）儘早建立第三方連線，第三方域的伺服器請求也會影響 LCP，使用rel=“preconnect”來告知瀏覽器你的頁面打算儘快建立連線。

2.減少阻塞渲染的JavaScript 和 CSS

（1）減少 CSS 阻塞時間，削減 CSS；延遲載入非關鍵 CSS；

（2）減少 JavaScript 阻塞時間，削減和壓縮 JavaScript 檔案；延遲載入未使用的 JavaScript；

（3）最大限度減少未使用的 polyfill。

3.提高資源載入速度

（1）最佳化和壓縮影象

a。首先考慮不使用影象。如果影象與內容無關，則將其刪除；b。壓縮影象到一定尺寸（使用 Imagemin）；c。將影象轉換為更新的格式（JPEG 2000、JPEG XR 或 WebP）；d。使用響應式影象，自適應桌面和移動端影象；e。考慮使用影象 CDN內容分發網路。

（2）預載入重要資源。使用來更加及時地獲取該資源。

（3）壓縮文字檔案。 Gzip 和 Brotli 對HTML、CSS、JavaScript進行壓縮。

（4）自適應服務。根據網路連線的具體情況，展示不同介面內容。

（5）使用 Service Worker 快取內容。

4.提升客戶端渲染

如果你搭建的是客戶端渲染網站，那麼要注意最佳化提升客戶端渲染時長。

a。減少 JavaScript阻塞時長；b。使用服務端渲染；c。使用預渲染；

（二）最佳化FID（TBT）

FID的最佳化指導就是改善總阻塞時長（TBT）

1.減少第三方程式碼的影響

a。按需載入第三方程式碼；b。減少非必要的第三方程式碼、指令碼；

2.減少頁面的javaScript

a。減少單個頁面的JavaScript 數量；b。分割長任務的JavaScript；

3。減少javaScript的執行時長

a。延遲載入未使用的JavaScript；

Chrome 開發者工具中的程式碼覆蓋率選項卡能夠告訴你網頁上有多少未在使用的 JavaScript。

圖片來源：Google開發工具

b。精簡未使用的JavaScript。

4.使用wed worker

Web worker能夠讓 JavaScript 在後臺執行緒上執行。將非使用者介面操作移動到單獨的工作執行緒上，這樣可以縮減主執行緒阻塞時間。

5.最小化主執行緒工作

當網站忙於主執行緒工作時，可能無法快速響應使用者的互動，導致糟糕的使用者體驗。

a。最佳化第三方JavaScript；b。避免大型、複雜的佈局；c。縮小CSS，推遲非關鍵詞CSS；d。拆分減少 JavaScript 負載；e。刪除未使用的程式碼。

（三）重要的最佳化網站載入速度方法

1.最佳化圖片

（1）使用正確的圖片格式， PNG、JPEG 或 WebP，webp更優；

（2）使用適當大小的影象，使用imagemin壓縮影象，或者使用其他的圖片壓縮外掛進行壓縮；

（3）使用影片替代GIF，網頁中如果存在GIF，那麼儘量轉化為影片，GIF動圖可能佔比較大的流量；

（4）使用響應式圖片，適用不同的裝置上瀏覽；

（5）使用CDN圖片，減少圖片檔案傳輸大小；

（6）延遲載入螢幕外影象，使用lazysizes codelab 延遲載入螢幕外影象。

2.最佳化影片

（1）延遲載入影片，頁面上影片尤其是螢幕外的影片可以做延遲載入，這樣可以提高頁面的載入速度；

（2）使用影片外部託管平臺，如YouTube、Vimeo或Wistia，可以節省空間，加快載入速度。

3.最佳化 CSS

（1）延遲載入非重點CSS；

（2）縮小CSS；

（3）刪除未使用的 CSS；

（4）提取關鍵CSS。

使用 Chrome DevTools 中的Coverage 選項卡來識別非關鍵 CSS 和 JS。綠色（關鍵），紅色（非關鍵）。

圖片來源：Chrome DevTools

4.最佳化 JavaScript

（1）延遲載入較大的JavaScript檔案，這樣可以確保你的其餘內容可以立即載入；

（2）透過程式碼拆分減少 JavaScript 負載，長任務的JavaScript 會佔較長的載入速度；

（3）刪除未使用的程式碼；

使用 Chrome DevTools 中的Coverage 選項卡來識別哪些程式碼是關鍵的，哪些程式碼是未使用的。 點選檢視細分程式碼。

圖片來源：Chrome DevTools

圖片來源：Chrome DevTools

（4）使用現代程式碼加快頁面載入速度。

5.預載入重要資源

（1）使用內容交付網路；

（2）預載入關鍵資源；

（3）提早建立網路連結。

6.最佳化第三方資源

（1）減少不必要的第三方程式碼，例如各種外掛，聊天工具等；

（2）阻止慢速第三方JavaScript；

（3）高速載入必要第三方JavaScript。

7.最佳化網站字型

使用系統字型，不同瀏覽器和裝置通用，減少字型下載時間。

8.避免多個頁面重定向，重定向會減慢頁面載入速度

使用screamingfrog。co。uk來檢查我們重定向的頁面，檢視哪些頁面的重定向是必須的（已收錄的，有反向連結的，有展示點選的），非必須的可以直接刪除，減少重定向額外的 HTTP 請求。

9.使用 Facade （外觀）延遲載入第三方資源

不要將第三方嵌入直接新增到 HTML 中，影片嵌入、社交按鈕小部件和聊天小部件都可以採用 facade 模式，延遲載入這些第三方元素，提高頁面的載入速度。

10.啟用瀏覽器快取

啟用瀏覽器快取，使用者在第一次瀏覽你的網站時，網站的資料會快取在瀏覽器臨時儲存庫中，當用戶再次訪問，瀏覽器可以載入該頁面，而無需向伺服器傳送另一個 HTTP 請求。

（來源：Google SEO 喵喵）