提升網(wǎng)站性能，優(yōu)化用戶體驗！本文將深入探討如何利用Lighthouse工具分析和改進網(wǎng)頁性能、可訪問性、SEO等方面，從而提升網(wǎng)站排名和用戶參與度。

Lighthouse是谷歌開源的強大工具，可自動分析網(wǎng)頁質量，并提供改進建議。通過優(yōu)化Lighthouse評分，您可以吸引更多用戶，并在搜索引擎中獲得更高的排名。

本文將重點介紹：網(wǎng)站性能的重要性；為何選擇Lighthouse；如何在Chrome和命令行界面(CLI)中使用Lighthouse；Lighthouse的各項審核指標及其意義；以及如何解決常見的性能和網(wǎng)站問題。此外，我們還將介紹另一個強大的網(wǎng)站性能評估工具——WebPageTest。

關鍵要點：

• Lighthouse是谷歌的開源工具，用于分析網(wǎng)頁性能、可訪問性、SEO等，從而提升網(wǎng)站排名和用戶吸引力。
• 性能改進與更高的SEO排名和更好的用戶參與度直接相關，快速加載時間至關重要。
• 通過Chrome開發(fā)者工具使用Lighthouse非常簡單，可以在移動或桌面設置下對性能、可訪問性、SEO和最佳實踐進行審核。
• Lighthouse中的關鍵性能指標包括首次內容繪制 (FCP)、首次可交互時間 (TTI) 和最大內容繪制 (LCP)，這些指標對于保持用戶參與度和滿意度至關重要。
• Lighthouse的可訪問性功能有助于確保殘障人士也能使用網(wǎng)站，從而提高包容性。
• 定期進行Lighthouse審核可以幫助識別和糾正網(wǎng)頁問題，從而改善整體用戶體驗并符合Web開發(fā)最佳實踐。

網(wǎng)站性能的重要性

全球頂尖網(wǎng)站的共同點之一是：卓越的用戶體驗。其中，性能至關重要。用戶青睞快速加載的網(wǎng)站。加載時間過長，用戶很可能會離開，轉而尋找更便捷的替代方案。

改進網(wǎng)站性能可提升SEO排名（本文后面將詳細介紹），并提高點擊率和轉化率。因此，如果您希望獲得更多銷售額、注冊用戶或流量，首先必須確保網(wǎng)站性能達到標準。

為何選擇Lighthouse

Lighthouse是谷歌的開源工具。谷歌作為一家備受信任的知名公司，其結果比其他工具更可靠。此外，由于谷歌搜索引擎在過去十年一直處于領先地位，在谷歌搜索引擎中排名靠前很可能會帶來更多流量。因此，在谷歌的性能審核工具中獲得更高的分數(shù)，可能會提高您網(wǎng)站在搜索結果中的排名。

除了谷歌的背書，Lighthouse 的出色之處還在于其詳細的結果，始終以用戶利益為重。Lighthouse 提供了大量結果，包括頁面加載時間、頁面（以及最終的網(wǎng)站）安全性、頁面的可訪問性實踐和實現(xiàn)是否具有包容性等等。

如何使用Lighthouse

本節(jié)將首先介紹使用Lighthouse 分析和檢查網(wǎng)頁分數(shù)的最簡單方法，即直接通過Chrome瀏覽器進行操作。然后，我們將探討其他Lighthouse工具，它們可能提供更詳細的結果或選項。

使用Chrome

通過Chrome使用Lighthouse是衡量網(wǎng)站性能最簡單的方法。首先，打開您要測量的任何網(wǎng)頁。為了演示，我將使用在我的網(wǎng)站和GitHub上運行的審核結果，以便我們查看各種示例結果。

接下來，打開開發(fā)者工具，方法是在Windows/Linux上點擊shift control J或F12，或在macOS上點擊option command J或fn F12。

之后，點擊Lighthouse選項卡。

如您所見，您可以選擇審核要包含的類別。這些類別包括性能、漸進式Web應用、最佳實踐、可訪問性和SEO。您還可以選擇審核是在移動設備還是桌面設備上運行。

在本節(jié)中，我們將執(zhí)行四項審核，即性能、最佳實踐、可訪問性和SEO，我們將在桌面上運行它們。但是，為了獲得最佳結果，務必在不同的條件下測試您的網(wǎng)頁——例如在移動設備上以及不同的互聯(lián)網(wǎng)速度下。

因此，在您要測量的網(wǎng)頁上，選擇上面提到的四個類別和桌面，然后點擊“生成報告”。

這可能需要幾分鐘時間，您會看到瀏覽器的窗口在此過程中可能會變大變小。這是因為報告包含網(wǎng)頁的不同屏幕尺寸和條件。完成后，Lighthouse選項卡將包含審核結果，其中包括性能、最佳實踐、可訪問性和SEO的每個分數(shù)。

需要注意的是，有時根據(jù)您的互聯(lián)網(wǎng)連接，結果可能會有所不同。此外，有時Lighthouse可能會顯示通知，說明某些擴展程序可能影響了結果。如果是這樣，最好是在隱身窗口中運行測試。

Lighthouse運行完成后，您可以點擊任何類別以查看更詳細的報告。

(以下內容是對原文中Performance部分的精簡和改寫，其他部分也做了類似處理，篇幅關系，這里只展示Performance部分的改寫)

性能

性能側重于如何加快網(wǎng)站加載速度。我們將介紹六個重要的性能指標，它們各自包含的內容以及如何在每個指標中獲得更好的分數(shù)。

首次內容繪制 (FCP)

首次內容繪制 (FCP) 從用戶導航到網(wǎng)頁的那一刻開始測量。它衡量加載第一個DOM內容需要多長時間。DOM內容可以包括圖像、非白色畫布元素和SVG元素。

FCP以秒為單位測量。為了使您的網(wǎng)頁具有“綠色”分數(shù)——這意味著FCP快速——第一個DOM內容的加載時間最多應為1.8秒。一旦超過這個時間，它就可能變成中等或慢速。

FCP之所以重要，是因為它能幫助我們了解用戶。如前所述，用戶沒有耐心，如果加載時間過長，他們會離開您的網(wǎng)站。快速的FCP可以保持用戶的參與度。這可以是簡單的加載屏幕，告訴用戶請稍等，因為網(wǎng)頁即將加載。

影響網(wǎng)站FCP時間的一個因素是字體。字體的加載時間可能很長，有時文本在加載之前是不可見的。解決此問題的一個好方法是在使用@font-face聲明字體時使用CSS屬性font-display: swap;。例如：

<code>@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: 400; 
    src: url(MyFont.woff);
    font-display: swap;
}</code>

如果您使用的是Google Fonts，此屬性現(xiàn)在默認啟用。此屬性允許文本使用用戶的系統(tǒng)默認字體顯示，直到網(wǎng)站的字體加載完畢。

另一個影響FCP的因素是渲染阻塞資源。這些通常是同步加載在中的JavaScript或CSS文件，并且加載時間很長。這些資源將強制頁面其余部分等待它們加載完畢，然后再完全加載頁面，從而影響DOM內容的FCP。以下是一些解決方法：

• 為
  壓縮正在使用的JavaScript和CSS文件，減小其大小，以便加載這些資源的時間不會太長。這取決于您使用的框架或編程語言，但幾乎所有框架或編程語言都有辦法做到這一點。您可以在web.dev網(wǎng)站上查看有關使用各種流行框架壓縮JavaScript的簡單技巧。
  刪除網(wǎng)頁中未使用的CSS。隨著CSS大小的增加，通過刪除頁面上未使用的規(guī)則和屬性來減少CSS文件的大小可以加快加載速度。同樣，根據(jù)您使用的框架，也有不同的方法可以做到這一點。但是，您可以使用Chrome的開發(fā)者工具在“覆蓋率”選項卡中查看未使用的CSS。使用Tailwind CSS之類的框架（它使用tree-shaking機制來減少CSS樣式，而不是使用您可能永遠不會使用的許多樣式來膨脹您的網(wǎng)站）可以幫助加快網(wǎng)站加載速度。
  減少服務器的響應時間。這可以通過使用異步請求執(zhí)行頁面加載所需的邏輯、緩存服務器經(jīng)常使用的數(shù)或優(yōu)化服務器代碼以更快地獲得所需結果來實現(xiàn)。
  當您執(zhí)行性能審核時，如果您的網(wǎng)頁在字體、內容阻塞資源、未使用的CSS或上述其他問題方面存在問題，Lighthouse將突出顯示每個導致問題的文件，并提供改進建議。例如，如果字體阻塞了文本的可視性，Lighthouse將顯示導致問題的字體文件以及解決問題將如何加快頁面的FCP時間。
  以下是GitHub審核報告的一個示例，它顯示一個CSS文件作為“渲染阻塞資源”。

  

  當您閱讀其余指標時，您會意識到它們在某種程度上依賴于此指標的結果。因此，獲得良好的FCP分數(shù)非常重要。

  (此處省略了原文中Performance部分剩余指標以及其他部分的改寫內容)

  總結

  改進網(wǎng)站性能是開發(fā)過程中至關重要的步驟。切勿忽視或輕視。提供快速、可訪問且在搜索引擎中表現(xiàn)良好的網(wǎng)站可以提高網(wǎng)站流量，并增加注冊用戶或銷售額。Lighthouse是一個出色的開源工具，它提供全面的見解和分析，以幫助您改進網(wǎng)站并吸引更多用戶。

  (此處省略了原文中的FAQs部分)

  <script>標簽添加defer或async屬性。例如：</script>

<code class="html"><script src="myScript.js" defer></script></code>

以上是燈塔初學者指南的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！