了解網站速度審核

已發表: 2020-08-26

在 Eastside Co，我們設計和構建了一些世界上最好的 Shopify 和 Shopify Plus 網站。 我們注重確保用戶體驗是最佳的——其中一個關鍵部分是了解網站性能，以及“好”的樣子。 有許多類型的網站審核可用，速度審核就是其中之一。

本文旨在詳細介紹網站速度審核的工作原理。

首先，讓我們從為什麼要進行速度審計開始。 目的很簡單：您的網站對使用各種設備的訪問者的加載效果如何？ 進行有效的速度審核將確定它的加載速度，並為您提供如何使其更快的指示。 （不要忘記查看我們的深入文章，了解如何在您進行審核後提高 Shopify 網站的速度。）

考慮使用 Shopify PLUS？


速度審核將顯示您的網站在桌面和移動設備上的加載方式之間的比較。 但有一些重要的注意事項需要牢記。

運行速度審計的權力

從您的筆記本電腦運行網站速度審核會產生誤導性的結果。 或者，如果您安裝了 Lighthouse 並且您希望獲得實時數據，它會。

首先，在進行審計時需要考慮許多因素。 很快就會打破常見的神話。 但首先，要牢記進行審計的權力。

您可以依賴 PageSpeed Insights (PSI) 作為速度審核工具。 你可以。 但有一個關鍵因素要記住：

PSI不會捕獲現實世界的瓶頸。 或根據實際頁面的關鍵績效指標 (KPI) 進行衡量

PSI 是一個模擬環境，為性能問題提供調試。

要找到現實世界的瓶頸和頁面 KPI，您需要像 Google Lighthouse 這樣的工具。 但是您還需要硬件來運行它。

雖然您可以在筆記本電腦/台式機上安裝 Lighthouse，但您獲得的指標分數會偏低。 這是因為 Lighthouse 使用限制算法來創建現實世界的瓶頸和網絡延遲。

這需要運行它的硬件提供大量處理能力。 這就是為什麼在 Eastside Co，我們使用專用的審計服務器。 它擁有強大的處理能力來運行審計，谷歌可以對其進行所有限制。



跟我們工作

關於 PSI 結果的一句話

Google 的 PageSpeed Insights (PSI) 是一種流行的工具。 它使用 Lighthouse（也是一個 Google 工具）來運行審計。 但請記住，它是在模擬環境中進行的。

將詳細討論性能指標及其含義。 首先，讓我們處理關於 PSI 結果的那些神話：

  • 用戶體驗來自一個單一的指標：不，事實並非如此。 您需要從大量值而不是一次來評估指標。

  • 您可以定義一個代表用戶：再次，不。 用戶將通過各種設備和網絡連接訪問您的網站。

  • 您的網站為您加載速度很快，因此它適用於所有人：不，不是真的。 網絡延遲和網絡速度是可以改變用戶體驗的兩件事。

收集的性能數據有兩種類型：實驗室數據和現場數據。

實驗室數據

實驗室數據（由 PSI 生成）是來自受控環境的性能數據。 它使用預設進行網絡和設備設置。 這個想法是您將獲得一組可重現的數據用於調試目的。

現場數據

字段數據是從實際頁面加載中收集的性能數據。 因此，這是您的用戶實際體驗的數據。

主要區別在於：PSI 生成的實驗室數據具有更廣泛的指標。 現場數據比較有限，但是是真實的用戶體驗。

性能指標解碼

在我們了解指標分數及其含義之前，有幾個關鍵點需要了解。

為什麼分數會波動

Lighthouse 將顯示審計結果的波動。 這是有原因的，它們與燈塔本身沒有任何關係。

  • 投放的廣告不斷變化。 如果您在網站上投放廣告或運行 A/B 測試，這將導致性能差異。

  • 互聯網流量路由變化。 通過網絡到網站本身的路徑可能會改變。

  • 所用硬件的變化。 與移動設備相比，功能強大的台式電腦。

  • 防病毒軟件會導致帶寬需求。 這將導致審計結果的波動。

  • 將 JavaScript 注入頁面的任何瀏覽器擴展。

加權

這些指標使用 Lighthouse 算法中內置的加權平均值。 這些權重在報告中不可見。 它們提供了用戶對性能感知的平衡度量。 這來自 Lighthouse 團隊的定期研究。

指標

現在我們可以遍歷頂級指標來解碼它們的含義：

首次內容繪製 (FCP) - 此指標衡量首屏文本加載所需的時間。 這是您無需滾動即可看到的內容。 字體過多和字體文件過大都會影響這個分數。 從外部資源加載字體也會變慢。

速度指數 (SI) - 該指標記錄視覺變化超過折疊停止的時間。 這意味著視頻和英雄圖像都會影響速度指數得分。

最大內容繪製 (LCP) - 該指標尋找最大的圖像或文本塊。 它測量將該項目加載到視口中所需的時間。 這可能是主圖或一大段文字。

交互時間 (TTI) - 此指標衡量頁面準備好供用戶輸入所需的時間。 延遲加載的應用程序和跟踪或分析腳本將影響此指標。

總阻塞時間 (TBT) - 這個指標類似於 TTI。 但它測量頁面上的阻塞時間總量。 這是指用戶無法單擊元素或滾動頁面。

累積佈局偏移 (CLS) - 該指標衡量視覺穩定性。 換句話說，它衡量了頁面加載時內容的變化程度，從而使閱讀或查看內容變得困難。

最後...

關於網站速度審計的要點是：有實驗室數據和現場數據。 實驗室數據是模擬環境，現場數據是實時用戶體驗。 要運行 Lighthouse 來查看現場數據，您需要主機具有盡可能多的處理能力。 PSI 的實驗室數據可用於基本指導和調試目的。

如果您想了解更多關於我們的網站速度審核的信息，或者我們如何為您的電子商務業務設計和構建 Shopify 或 Shopify Plus 商店，請聯繫我們！

與我們交談