埃德溫（Edwin）是戰略內容專家。在加入Yoast之前，他花了幾年時間在荷蘭領先的網頁設計雜誌上磨練自己的技能。
您經常聽到的兩個詞是移動速度和網站速度。這並不是沒有道理的，因為這兩個因素是並存的。移動友好性和網站速度是我們必須處理的最緊迫的問題。測量頁面速度一直以來都是一門黑手藝。的 網站速度工具 我們今天使用的數據已經足夠了，但是通過新的Web Vitals指標，Google試圖從一個更現實的角度出發， 頁面體驗 考慮在內。在這裡，我將仔細研究如何使用Google Lighthouse檢查您的移動網站速度和SEO。
目錄什麼是Google Lighthouse？
燈塔 是Google構建的頁面體驗工具，最初旨在審核Progressive Web Apps（PWA）。該工具執行五項審核，以檢查可訪問性，性能，SEO，漸進式Web Apps和最佳實踐的擴展列表。在新的Core Web Vitals的支持下，這些審核共同為您提供了有關移動網站以及桌面網站或Web應用程序的質量和性能的出色概述。
網站速度完全取決於感知和用戶體驗。如果您的網站仍然感覺很慢，那麼數字速度就沒有任何意義。 3G或更小巧的移動連接在世界範圍內吸引著大量用戶。即使使用閃電般的5G連接，站點也可能會感到緩慢而緩慢。我們都知道，緩慢的網站可能會對您的轉化帶來毀滅性影響。縮短載入網站所需的時間（毫秒）可能會有所不同。更不用說當載入緩慢的廣告按下您只想單擊的按鈕時發生的挫敗感。
您可以直接通過Google Chrome中的開發人員工具運行Lighthouse審核-或安裝Chrome擴展程序
在測試過程中，Google Lighthouse模擬通過功率稍有下降的設備通過不穩定的3G連接訪問您的移動網站。為了儘可能真實地模擬現實情況，數據包會丟失。這些見解與其他數據結合在一起。進行測試後，您將獲得一份包含分數的報告以及可解決問題的可行建議。
PageSpeed Insights與Google Lighthouse
PageSpeed見解 可能是最常用的網站速度分析工具。它為您提供了不錯的分數，並列出了可能的改進，並且使您對網站的感知載入速度有了一個了解。另外，PageSpeed Insights會提供建議並確定改善頁面性能的機會。其中有些確實很難實現，因此對於大多數網站而言，獲得100/100的夢想是不二之選。
PageSpeed Insights和Lighthouse曾經是完成這項工作的兩種不同工具。他們倆都提供了寶貴的見解，但很難合併。隨著Web Vitals的出現和頁面體驗的更新，Google全面改善了指標。它們不僅變得更易於理解，而且還成為共享指標。當然，每種工具都是針對特定的子任務製作的，並提供特定的指標。這些指標來自不同的環境。
現場數據與實驗室數據
Web Vitals引入了確定性能的新方法。可以說，其中一些指標可以在實驗室環境中進行模擬計算，也就是說，其他指標僅在經過現場測試和收集後才有意義。此外，某些指標在這兩種設置中均能正常工作。 Google頁面體驗工具使用各種指標為您提供改善網站所需的數據。
如果仔細觀察，您會發現某些指標僅在開發人員工具和Lighthouse等實驗室工具中有效。欄位指標顯示在諸如Search Console和PageSpeed Insights中的「 Web Vitals」報告之類的工具中。諸如LCP，FID和CLS之類的核心Web生命將隨處可用。
核心網路生命
全新的Core Web Vitals將出現在所有衡量網站速度，性能和體驗的Google工具中，甚至出現在Search Console中的新Web Vitals報告中。現在，您只需要了解三個基本指標就可以了解您的網站或特定頁面的效果。這些核心網路生命力是：
這些新的Web Vitals採用更實用的方法，並將用戶體驗放在首位。這些工具會通過普通設備上的限制連接來訪問您的站點，因此它可以模擬現實世界中真正的訪問者可能會遇到的情況。這些由Web Vitals支持的工具不僅可以像過去使用的經典速度工具那樣載入您的網站，還可以檢查它如何以及何時響應輸入-以及是否在初始載入之後發生了事情。它會找到您的內容準備就緒的確切時間，因此您可以在感覺太慢時嘗試對其進行優化。另外，您會發現妨礙良好頁面體驗的煩惱。
此外，請記住，Lighthouse不僅會衡量性能，而且還會檢查SEO，各種最佳做法和可訪問性。它是一個完整的工具，可以幫助您從整體上改善您的網站。
PageSpeed Insights給出的分數略有不同。您還會注意到Field Data和Lab Data之間的差異在Lighthouse結果中查找的內容
加快移動網站速度的整個思路是兩方面的：您的網站必須快速，而且必須感覺很快。因此，您需要儘快將內容顯示在屏幕上。不要讓人們等待。此外，用戶必須能夠儘快與您的內容進行交互。由於Google宣布頁面速度和頁面體驗是SEO的排名因素，因此您需要解決這些問題。
您應該優先考慮什麼？首先載入您的內容。令人敬畏的圖形和殺手級動畫可以等待。您的信息以及人們正在尋找的內容很可能出現在內容中。您可以將其餘的內容載入到後台，稍後再放到屏幕上。
Lighthouse 6.0使用的性能指標
在衡量網站的性能時，Lighthouse 6.0使用以下指標：
- 首次滿意塗料：FCP衡量用戶瀏覽到頁面後瀏覽器呈現第一段DOM內容所花費的時間。這包括非白色圖像
- 速度指數：速度索引衡量頁面載入過程中內容可視化顯示的速度。
- 最大的滿意塗料：LCP是關於最大內容對象（例如，圖像或文本塊）載入需要多長時間的信息。這是最重要的新指標之一。在這裡，獲得高分意味著用戶將您的網站視為快速載入。
- 互動時間：TTI測量從載入頁面到能夠快速可靠地響應用戶輸入所花費的時間。該頁面看起來載入起來很快，只是發現按下某些按鈕尚無任何作用。
- 總封鎖時間：TBT測量FCP和TTI之間可能發生阻塞的時間，從而防止響應。
- 累積版式移位：CLS會查看頁面完整載入過程中發生的版式轉移數量。每次元素在屏幕上從一幀跳到另一幀時，這都算作布局偏移。還記得那些在最後一刻載入的討厭的廣告嗎？
您可以通過轉到Lighthouse Scoring計算器查看分數的計算方式：
Lighthouse計分計算器顯示差異指標的權重
燈塔報告還提供了一些機會來提高移動網站的網站速度，包括節省多少載入時間。其中包括減少渲染阻止樣式表，渲染阻止腳本，適當調整圖像大小以及修復屏幕外圖像。
Lighthouse確定了最大的有意義的繪畫元素，因此您可以輕鬆地對其進行優化
總而言之，Lighthouse為您提供了有關頁面性能的大量見解。利用這些見解來發揮自己的優勢。
燈塔SEO檢查
Lighthouse不僅能提供性能，還具有可訪問性測試，基於最佳實踐和PWA分析來改善網站的建議。 Lighthouse的另一個很酷的功能是基本的SEO檢查。通過此檢查，您可以運行簡單的SEO審核以發現網站可能存在的基本SEO問題。它還為您提供了修復建議。由於Lighthouse在瀏覽器中本地運行，因此您也可以在登台環境中運行檢查。
目前，燈塔檢查：
雖然是基本的，但是Lighthouse檢查將提醒您任何要解決的SEO問題。
如何安裝Google Lighthouse
Chrome瀏覽器的開發人員工具審核面板（Mac：Shift + Cmd + I； Win：Ctrl + Shift + J或F12）內置了Google Lighthouse，使用它非常容易。從那裡，您可以運行測試並獲得完整的報告。此外，還有一個單獨的 Chrome的Chrome附加組件 會在您的工具欄上添加一個按鈕，儘管使用時會保持不變，但有一些限制：您無法驗證本地伺服器上的網站，並且經過身份驗證的頁面也將無法使用。
您也可以將Lighthouse作為 節點 包。這樣，您可以將測試合併到構建過程中。使用Node軟體包時，您還將看到只有在Node環境中可以運行的一些審核，而在DevTools的Audits面板中卻沒有。
要從命令行全局安裝Lighthouse，請使用：
npm install -g燈塔
如果要對https://example.com運行測試，請使用：
燈塔https://example.com
審核的全部結果將在終端中可用，但也可以在單獨的HTML文件中使用。
您可以在Lighthouse中看到fitTesting Yoast.com來微調測試
是時候讓Lighthouse步入正軌了。讓我們看看當我在yoast.com上照亮燈塔的焦點時會發生什麼-通過移動瀏覽器可以看到。今天，我們只關注「效果」標籤。此標籤顯示您的網站或應用當前的運行情況，並向您顯示改進方法。
在下面的屏幕截圖中，您可以看到yoast.com的結果。大量屏幕快照顯示了移動站點的初始載入，這些屏幕快照顯示了何時首次在屏幕上顯示內容。指標顯示內容顯示需要多長時間。越快越好。
一屏顯示最重要的指標
在指標部分，您會找到最重要的信息，並帶有綠色，橙色或紅色的點，以顯示效果如何。當您要優化移動站點的性能時，您需要注意有關數字，其中包括第一個令人滿意的油漆，最大的令人滿意的油漆和進行交互的時間，如前所述。另外，請嘗試改善速度指標，並確保屏幕上沒有任何跳躍。
從年級來看，您可以看到yoast.com的整體得分非常高，為78分。第一次滿意的油漆可能會好一些，但是速度指數和總的堵轉時間都不錯。幸運的是，沒有發現布局發生變化的元素。消除渲染阻止資源（如一些JavaScript和CSS）仍會有所收穫。換句話說，該站點看起來相當快，但在外觀部分仍可以使用一些加速方法。
實施網站速度修復
您可以做很多事情 提高您的網站速度。儘管解釋所有修補程序超出了本文的範圍，但可以在關鍵渲染路徑中找到許多優化。關鍵的渲染路徑由對象（例如CSS和JavaScript）形成，這些對象必須先載入，然後內容才能顯示在屏幕上。如果此內容被阻止，則您的頁面將呈現緩慢或完全不呈現。請注意這一點，並使路徑無障礙。 Google的Ilya Grigorik寫道 關於如何理解和改善關鍵渲染路徑的出色指南。而且請 優化圖像！最後但並非最不重要的一點，不要忘記繼續閱讀 Google的新網路生命。
嘗試一下！
Google Lighthouse不是將所有規則都應用到網站上的一種工具，但它是您工具包中非常有價值的補充。 SEO檢查是基本的，但是仍然歡迎。 Lighthouse更細粒度，並根據實際使用情況為您提供即時反饋。您絕對應該將其與其他頁面速度測試工具（例如PageSpeed Insights， WebPageTest 和 GTmetrix。
您在使用Google Lighthouse嗎？你是怎麼找到它的？請在評論中分享您的經驗和技巧。我希望收到您的來信！
閱讀更多： 移動SEO：最終指南»