理解站點性能和自動化速度測試的10個步驟

[ad_1]

理解站點性能和自動化速度測試的10個步驟

網站速度對於SEO很重要,這已不是什麼秘密。

Google不僅將其用作排名因素,而且從用戶登陸您網站的第二秒起就必須為其提供良好的體驗。

網站運行緩慢和性能不佳將影響用戶體驗和可訪問性,並影響企業的增長,最終影響收入。

實際上,那些致力於提高速度的組織已經看到了網站流量的增加,更好的參與度以及轉換率的提高。

Pinterest的 這是一個例子,在實施績效預算後,他們看到了用戶情感和參與度的提升,這意味著收入增加了44%。

性能優化的藍圖

考慮到所有這些,Google Chrome網路平台的Paul Irish和Elizabeth Sweeny分享了他們創建的有用藍圖,用於評估和優化網站性能。 2019 Google I / O活動

雖然這主要是針對開發團隊的,但有些關鍵任務對SEO專業人員很有用,我在本文中對此進行了進一步探討。

在這些領域開展工作將為您提供機會 與您的開發團隊更緊密地合作 一個共同的目標:

為您的用戶提供最佳體驗。

這樣做的方法。

1.了解關鍵指標

第一步是了解Google在衡量網站頁面速度時使用的關鍵指標。

對我們來說幸運的是,Google公開了這些指標,並在 他們的發展現場

Google當前使用的指標是:

  • 首次合格塗料(FCP)
  • 最大含量的塗料(LCP)
  • 首次輸入延遲(FID)
  • 互動時間(TTI)
  • 總封鎖時間(TBT)
  • 累積版式移位(CLS)

這些指標都有 不同的權重,這會影響所提供的整體效果得分。

這些指標中的許多已被Google使用了幾年,但是最近它們引入了一些更新的指標,這些指標變得越來越重要:

最大的滿意塗料 (LCP)

此以用戶為中心的度量標準顯示在視口中可見的最大元素的渲染時間。

總封鎖時間 (待定)

TBT測量網站的負載響應能力,並在頁面可用之前量化頁面的非交互性。

累積版式移位 (CLS)

另一個以用戶為中心的指標,CLS通過量化用戶經歷意外的布局偏移的頻率來衡量頁面的視覺穩定性。

2.衡量用戶體驗的質量

此步驟涉及評估對您的站點上的實際用戶的性能影響,因此確定最重要的指標的優先順序很重要。

Google彙集了 有用的矩陣 可以幫助您考慮用戶的期望以及與之相關的指標。

衡量用戶體驗」 srcset =「」 src =「 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-18-at-15.57.35-5e5e66c93a467.png

在確定優化工作的優先順序時,使用此矩陣來分析上述影響最大的性能指標非常有幫助。

3.概述頁面速度

下一步是檢查您網站的效果。在大型網站上工作時,最好總是選擇一些關鍵頁面來進行此分析。

這可能是可帶來大量收入或獲得大量流量的頁面。

另外,如果您的站點具有用於關鍵頁面的模板,則可以分析其中的一些模板,以了解整個站點的基本性能水平。

執行頁面速度測試

有多種工具可讓您執行頁面速度測試,其中一些是免費的,並且是獲取對網站性能的關鍵見解的良好起點。

Google的Pagespeed見解

Google的這款免費工具結合了Lighthouse的實驗室數據和Chrome User Experience報告中的現場數據,以分析網頁內容並提供改進建議。

Google的Pagespeed Insights「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-19-at-16.53.18-5e5e66cbe3823.png

它允許您測試移動和桌面體驗,並根據我們上面提到的指標顯示100分。

GTMetrix

GTMetrix是另一個免費工具,可提供速度指標細分以及優化機會。

另一個有用的功能是能夠根據位置,設備和瀏覽器類型自定義測試的功能,因此可以用來模擬不同的瀏覽環境。

GTMetrix「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-19-at-17.07.36-5e5e66ce5e1ba.png

使用網路爬蟲

儘管上面的工具對於逐頁分析很有用,但是如果您要進行大規模測量以及查看視覺趨勢,則使用爬網工具將非常有益。

使用搜尋器「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-20-at-09.26.34-5e5e66d851692.png

例如,通過使用DeepCrawl的自定義JavaScript功能,您將能夠從Chrome中提取許多關鍵指標。 (公開:我在DeepCrawl工作。)

這不僅使您能夠大規模收集有用的見解,而且還可以看到站點速度隨時間變化的視覺趨勢。

4.發現影響頁面載入的特定方面

有許多因素可能會影響您的頁面速度。罪魁禍首包括:

  • 大量JavaScript資源。
  • 圖片文件較大。
  • 具有大量的重定向鏈。

使用Chrome開發工具可以使您發現頁面上可能影響載入時間的所有特定方面。

最有用的報告位於「覆蓋率」選項卡下,您可以通過運行記錄來測試特定頁面的負載。

Chrome開發者工具「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-19-at-17.45.16-5e5e66d16b5af.png

這不僅使您可以查看哪些資源會影響用戶體驗,而且還可以了解頁面的不同方面的載入,渲染和繪畫所花費的時間。

這將允許您查明影響載入速度的特定問題區域。

5.設置要跟蹤的特定KPI

請務必記住,每個網站都是獨一無二的,具有特定的挑戰和個人的成功指標。

這些將根據網站的主要目標而有所不同,而KPI將取決於這些目標。

例如,我曾經與一位電子商務客戶合作,希望通過自然流量增加銷售量,因此將KPI設置為「在未來6個月內將自然用戶的銷售量增加10%」。

其他KPI可能基於增加的自然會話,生成或轉換更多的線索以及降低頁面的跳出率。

頁面速度將直接影響這些KPI,因為Google會獎勵一個快速的網站並提供更好的用戶體驗。

6.實施建議的更改

此步驟涉及實施在先前步驟中執行的測試所提供的建議更改。

常見的優化建議包括:

  • 實現緩存以減少初始請求的大小。
  • 提供下一代格式的圖像。
  • 壓縮和最小化HTML,CSS和JavaScript。
  • 消除渲染阻止資源。

在這裡,您需要與開發團隊合作,以了解站點上可能發生的情況並實現更改。

您可以向開發人員詢問很多術語,這些術語可以幫助您更好地了解網站的工作方式,Rachel Costello在以下內容中提供了這些術語的有用列表: 她最近的談話 關於技術SEO的未來。

向開發人員詢問有關「 srcset =「」 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-27-at-15.55.23-5e5e66df8ecea的條款.png7.減輕第三方標籤對性能的影響

查看您網站上的第三方標籤及其對網站性能的影響也很重要。您可能會對此處看到的結果感到驚訝。

有許多工具可以直觀地匯總不同第三方標籤的請求數量,載入時間和運行時成本。

例如, 索取地圖 在頁面上顯示標籤的地圖,並允許您選擇測試位置以從中運行分析。

請求地圖「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-19-at-17.59.32-5e5e66d63107f.png

以及 第三方網站,這使您可以識別對性能影響最大的標籤。

第三方網站「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-19-at-17.58.32-5e5e66d45a606.png

了解這些標記的影響後,您可以查看不必要的標記並進行刪除。

8.隨時間跟蹤指標

為了確保您實施的更改能夠為您帶來積極的影響,重要的是要隨著時間的推移跟蹤它們,以查看改進情況並確定任何退步。

有許多方法可以檢查性能如何發展,包括:

9.與您的行業中其他人進行比較和監控性能

在大多數SEO任務(包括性能優化)中,進行競爭者分析很重要,以便了解行業中相似網站的表現以及與之比較的方式。

使用 網頁測試的外觀比較 您可以輸入您的網站和競爭對手的網站,以比較載入體驗並查看您的匹配位置。

網頁測試視覺比較」 srcset =「」 src =「 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-03-03-at-13.52.48-5e5e8b18ae6ae .png10.衡量績效與收入之間的相關性

此列表的最後一步是您可以做的最有價值的事情之一:將上面收集​​的實際用戶指標與實際業務目標聯繫起來。

這將使您能夠收集ROI數據並證明所進行的改進的商業價值。

執行此操作的一種方法是選擇要監視的重要代表性頁面,以便了解隨著時間變化的頁面速度數據如何影響為這些頁面設置的業務KPI。

例如,您可以測量這組頁面的網站速度變化,並將結果與​​Google Analytics(分析)中的用戶或轉換日期相關聯。

自動化性能測試和監控

進行網站速度分析可能是一項耗時的工作,尤其是當您設置了要審核的較大URL時。

因此,為了有效地跟蹤一段時間內的改進,採用自動化方法進行測試可能非常有益。

有幾種方法可以自動進行頁面速度測試,包括:

使用履帶

如上所述,您可以使用網站爬網工具來運行常規爬網並隨時間監視網站速度。

通常,可以通過將爬網設置為每周,每兩周或每月運行並在準備好查看時接收通知來自動執行這些報告。

使用搜尋器自動執行「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-20-at-09.51.24-5e5e66dc6e6c2。 png

Google Search Console

Google還在去年的Google Search Console中引入了速度報告,使您可以使用「 Chrome用戶體驗報告」中的數據查看網站關鍵速度欄位指標的匯總視圖。

還可以深入研究特定問題並查找需要改進的頁面組示例。

Google Search Console「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screen-shot-2020-02-20-at-09.47.29-5e5e66da41958.png

最重要的是,您將能夠隨著時間的推移監視速度,並根據正在執行的工作查看是否有任何改進,以及發現任何回歸。

在命令行中運行Lightspeed測試

也可以通過命令行運行Lighthouse報告。這樣做的好處是您可以使其在後台運行,並且可以生成多種格式的結果。

為此,您需要安裝Google Chrome瀏覽器和 node.js (JavaScript運行時環境)安裝在您的計算機上。從這裡開始,我們將使用NPM軟體包在命令行上安裝Lighthouse。

sudo npm install -g燈塔

安裝完成後,您將可以使用以下命令直接從命令行運行燈塔測試;

燈塔{您的網址}

這將打開瀏覽器窗口,並自動為您執行常規的燈塔測試。您還可以定義輸出格式,甚至可以無頭運行命令,以免打擾您的工作流程。

例如,我將按以下方式運行分析;

燈塔https://www.asos.com/women/ –quiet –chrome-flags =「無頭」 –view

命令行中的燈塔「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screenshot-2020-03-02-at-10.21.06-5e5e66e2d33e9.png

這將使用無頭Chrome瀏覽器運行測試,並在完成後以HTML文件打開輸出,並將其保存到我的計算機中。

您可以在 Github倉庫在這裡,以及安裝和運行它的完整說明。

Google Lighthouse「 srcset =」「 src =」 https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/screenshot-2020-03-02-at-10.21.16-5e5e66e5eef4d.png

這也是開始使用命令行運行分析的一種很好的方式,並且對我提高使用它的舒適度也有很大的幫助。

總結一下

快速高效的網站的需求並沒有消失。

作為SEO專家,我們有很大的機會與我們的開發團隊合作,為網站訪問者和搜索引擎爬蟲提供最佳體驗。

通過執行上面概述的10個步驟,我們將能夠為圍繞網站優化的對話提供很多價值,但是了解特定網站的可行性也很重要。

例如,由於其設置,某些網站具有某些限制,這些限制將不允許它們以頁面速度測試建議的某些方式針對速度進行優化。

與此同時,與開發人員一起檢查是否可以實施 以用戶為中心的策略(例如平穩降級和逐步增強)將有助於進一步的優化活動。

此外,執行速度分析不再是手動任務。

有幾種工具可用於自動化這些測試,以提高效率並讓您專註於確保網站儘可能地易於使用。

圖片積分

後期圖片:DeepCrawl
由作者拍攝的所有屏幕截圖,2020年3月

相關文章