通過訪問者的眼睛查看您的網站負載
了解訪問者在訪問您的網站時的實際體驗。
注意到任何加載緩慢或不合適的東西嗎？ 這可以幫助您識別訪問者遇到的重要滯後和轉換問題。
顯示 DebugBear Web 性能測試結果的屏幕截圖，2022 年 10 月時間線幻燈片顯示了網站隨時間的渲染進度。
比如這個頁面在 0.7 秒後開始渲染，主圖在 1.3 秒後渲染。
當聊天小部件在 3.7 秒後顯示時，網站已完全呈現，也稱為視覺完成。
DebugBear 的屏幕截圖，顯示了 2022 年 10 月一段時間內網站的渲染進度在該工具中，您還可以觀看渲染過程的視頻記錄。
這是向客戶或團隊其他成員展示績效問題的影響的好方法。
屏幕截圖顯示了 DebugBear 中部分渲染網站的視頻記錄，2022 年 10 月通過查看您的真實加載統計數據來測試站點速度變化
假設您一直在優化您的網站，並且您想了解這些更改是否會產生影響。
該工具在最佳環境中運行“實驗室測試”，以發現您是否正確優化了您的網站。
當你測試你的網站時，你會得到一個官方的“實驗室分數”，它是來自谷歌 Lighthouse 工具的性能分數的六個性能指標的總結：
- First Contentful Paint（佔總分的 10%）。
- 速度指數 (10%)。
- 最大含量的油漆 (25%)。
- 互動時間 (10%)。
- 總阻塞時間 (30%)。
- 累積佈局偏移 (15%)。
使用這些數據，您將發現上一輪優化的幫助有多大，以及您可能需要更改哪些內容。
到目前為止，您可能想知道您需要更改什麼。 讓我們學習如何使用 Metrics Overview 的每個關鍵指標來優化您的網站。
如何優化網站速度
運行速度測試是您網站優化之旅的第一部分。
一旦你有了你的指標，你就需要知道如何解釋它們以及如何修復它們。
在您的網站速度報告的指標概覽區域中，您將看到我們將重點關注的關鍵指標，以幫助您加快網站速度：
- First Contentful Paint ：這可以通過修復服務器通信速度來加快。
- 最大的內容繪畫：這可以通過優化媒體和資源來加速。
此外，您可以使用請求瀑布來查看請求需要多長時間以及這對這些指標有何影響。
如何加速首次內容繪製 (FCP)
讓我們首先讓您的網站更快地出現在您的訪問者面前； 我們將首先處理 First Contentful Paint。
什麼是第一個內容油漆？
First Contentful Paint 測量在訪問者導航到該頁面後頁面內容首次開始出現的時間。
重要的是要快速顯示您的關鍵內容，以防止您的訪問者離開您的網站。 用戶離開您的網站的速度越快，Google 就會越快了解到頁面體驗可能很差。
但是你怎麼知道是什麼導致你的網站加載緩慢呢？
您如何發現哪些服務器問題導致您的網站變慢？ 讓我們來了解一下。
為什麼我的第一個有內容的油漆需要這麼長時間？
您的 FCP 可能會受到服務器連接速度、服務器請求、渲染阻塞資源等的影響。
這聽起來很多，但有一種簡單的方法可以準確地查看導致 FCP 速度變慢的原因——請求瀑布。
這個有用的工具顯示您的網站提出了哪些請求以及每個請求何時開始和結束。
例如，在這個屏幕截圖中，我們首先看到一個對 HTML 文檔的請求，然後是兩個加載文檔中引用的樣式表的請求。
屏幕截圖顯示了 DebugBear 中第一個 Contentful Paint 指標的調試數據，2022 年 10 月為什麼第一次內容繪製會在 0.6 秒後發生？ 我們可以分解頁面上發生的事情來理解這一點。
了解第一次內容豐富的繪畫之前會發生什麼
在您的網頁上加載第一部分內容之前，您的用戶瀏覽器必須首先連接到您的服務器並檢索內容。
如果此過程需要很長時間，那麼您的用戶需要很長時間才能看到您的網站。
您的目標是在您的網站開始加載之前了解正在發生的事情，以便您可以查明問題並加快體驗。
頁面加載第 1 部分：瀏覽器創建服務器連接
在首次從服務器請求網站之前，訪問者的瀏覽器需要與該服務器建立網絡連接。
這通常需要三個步驟：
- 檢查DNS記錄以根據域名查找服務器的IP地址。
- 建立可靠的服務器連接（稱為 TCP 連接）。
- 建立安全的服務器連接（稱為 SSL 連接）。
這三個步驟由瀏覽器一個接一個地執行。 每個步驟都需要從訪問者的瀏覽器到網站服務器的往返行程。
在這種情況下，建立服務器連接大約需要 251 毫秒。
DebugBear 屏幕截圖顯示用於建立服務器連接的網絡往返，2022 年 10 月頁面加載第 2 部分：瀏覽器請求 HTML 文檔（此處為第一個字節的時間）
建立服務器連接後，訪問者的瀏覽器可以請求包含您網站內容的 HTML 代碼。 這稱為 HTTP 請求。
在這種情況下，HTTP 請求需要 102 毫秒。 此持續時間包括網絡往返所花費的時間和等待服務器生成響應所花費的時間。
在 251 毫秒創建連接和 102 毫秒發出 HTTP 請求後，訪問者的瀏覽器終於可以開始下載 HTML 響應了。
這個里程碑稱為第一個字節的時間 (TTFB)。 在這種情況下，這發生在總共 353 毫秒之後。
服務器響應準備好後，訪問者的瀏覽器會花費一些額外的時間來下載 HTML 代碼。 在這種情況下，響應非常小，下載只需要額外的 10 毫秒。
DebugBear 屏幕截圖，顯示 HTTP 請求的不同組件，2022 年 10 月頁面加載第 3 部分：您的網站加載額外的渲染阻止資源
瀏覽器不會在加載文檔後立即呈現或顯示頁面。 相反，通常會有額外的渲染阻塞資源。
如果沒有任何視覺樣式，大多數頁面會看起來很糟糕，因此在頁面開始呈現之前加載 CSS 樣式表。
在這個網站速度測試示例中加載 2 個額外的樣式表需要 137 毫秒。
請注意，這些請求不需要新的服務器連接。 CSS 文件從與以前相同的域加載，並且可以重新使用現有連接。
DebugBear 屏幕截圖顯示在 HTML 文檔之後加載的其他渲染阻止資源，2022 年 10 月頁面加載第 4 部分：瀏覽器呈現頁面
最後，一旦加載了所有必要的資源，訪問者的瀏覽器就可以開始呈現頁面。 然而，完成這項工作也需要一些處理時間——在本例中為 66 毫秒。 這由瀑布視圖中的橙色 CPU 任務標記指示。
DebugBear 屏幕截圖顯示了從加載 HTML 文檔到呈現網頁的步驟，2022 年 10 月我們現在明白為什麼 FCP 會在 632 毫秒後發生：
- HTML 文檔請求為 364 毫秒。
- 加載樣式表需要 137 毫秒。
- 渲染頁面需要 66 毫秒。
- 其他處理工作需要 65 毫秒。
其他處理工作包括運行內聯腳本或在下載後解析 HTML 和 CSS 代碼等小型工作。 您可以將此活動視為渲染幻燈片下方的灰色小線。
如何優化首次內容繪製 (FCP)
現在您了解了導致網站呈現的原因，您可以考慮如何優化它。
- 服務器能否更快地響應 HTML 請求？
- 可以通過同一個連接加載資源而不是創建一個新連接嗎？
- 是否有可以刪除或更改為不再阻止渲染的請求？
既然您網站的初始部分加載得更快，是時候專注於加快整個網站的加載速度了。
如何使用 DebugBear 的建議加速最大內容繪製 (LCP)
有很多方法可以加快您的 LCP。
為方便起見，DebugBear 在他們的建議部分為我們提供了很好的後續步驟。
讓我們看一下建議的一些示例，並了解如何加快本網站的 LCP。
建議 1：從 HTML 文檔發起 LCP 圖像請求
如果頁面上最大的內容元素是圖像，則最佳做法是確保 URL 直接包含在初始 HTML 文檔中。 這將有助於它盡快開始加載。
然而，這種最佳實踐並不總是被使用，有時瀏覽器需要很長時間才能發現它需要下載主圖像。
在下面的示例中，使用 JavaScript 將最大的內容（即圖像）添加到頁面中。 因此，瀏覽器需要先下載並運行一個 200 KB 的腳本，然後才能發現圖像並開始下載它。
DebugBear 屏幕截圖顯示了導致圖像請求的順序請求鏈，2022 年 10 月如何修復：根據網站的不同，有兩種可能的解決方案。
解決方案 1：如果您使用 JavaScript 延遲加載大圖像，則優化圖像大小並刪除延遲加載腳本或將其替換為不需要 JavaScript 的現代 loading=”lazy” 屬性。
解決方案2：在其他情況下，服務器端渲染會阻止必須在頁面渲染之前下載JavaScript應用程序。 然而，這有時可能很難實現。
建議 2：確保以高優先級加載 LCP 映像
加載頁面的 HTML 代碼後，訪問者的瀏覽器可能會發現，除了您的主圖像之外，可能還需要加載大量附加資源，例如樣式表。
此處的目標是確保加載更大的主圖片以滿足 Google 的最大內容繪製要求。
其他資源，如第三方分析腳本，不如您的主圖像重要。
此外，在頁面呈現後，您網站的 HTML 中引用的大多數圖像都將位於首屏下方。 有些可能完全隱藏在嵌套的標題導航中。
因此，瀏覽器最初將所有圖像請求的優先級設置為低。 頁面渲染完成後，瀏覽器會找出哪些圖像很重要並更改優先級。 您可以在下面的屏幕截圖中看到一個示例，如優先級列中的星號所示。
DebugBear 屏幕截圖顯示以低初始優先級加載的 LCP 圖像，2022 年 10 月瀑布圖顯示，雖然瀏覽器很早就知道該圖像，但它並沒有開始下載它，如灰色條所示。
如何修復：要解決此問題，您可以使用稱為優先級提示的新瀏覽器功能。 如果將 fetchpriority=”high” 屬性添加到 img 元素，瀏覽器將從頭開始加載圖像。
建議 3：不要使用 CSS 隱藏頁面內容
有時您可能會查看請求瀑布，並且所有渲染阻止資源都已加載，但仍然沒有顯示頁面內容。 這是怎麼回事？
A/B 測試工具通常會隱藏頁面內容，直到將測試變體應用於頁面上的內容元素。 在這些情況下，瀏覽器已呈現頁面，但所有內容都是透明的。
如果無法移除 A/B 測試工具怎麼辦？
如何修復：檢查您是否可以將該工具配置為僅隱藏受 A/B 測試影響的內容。 或者，您可以檢查是否有辦法讓 A/B 測試工具加載得更快。
DebugBear 屏幕截圖顯示了一個渲染幻燈片，其中內容被 A/B 測試工具隱藏，2022 年 10 月使用 DebugBear 監控您的站點速度
想要不斷測試您的網站？ 試用我們的付費監控工具，免費試用 14 天。
這樣，您可以檢查您的性能優化是否有效，並在您的網站出現任何性能下降時收到警報。
顯示 DebugBear 中網站速度趨勢的屏幕截圖，2022 年 10 月
屏幕截圖顯示 DebugBear 中的 Core Web Vitals 數據，2022 年 10 月