燈塔初學者指南

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

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

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

關鍵要點：

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

網站性能的重要性

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

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

為何選擇Lighthouse

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

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

如何使用Lighthouse

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

使用Chrome

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

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

之後，點擊Lighthouse選項卡。

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

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

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

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

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

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

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

性能

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

首次內容繪製 (FCP)

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

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

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

影響網站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，此屬性現在默認啟用。此屬性允許文本使用用戶的系統默認字體顯示，直到網站的字體加載完畢。

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

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

  

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

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

  總結

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

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

  <script>标签添加defer或async属性。例如：</script>

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

以上是燈塔初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！