如何使用Lighthouse工具分析網站?

為什麼要使用 Lighthouse?

作為開發者,我們需要分析自己所開發的網站,從而作出不同的改進,為用戶及其他的開發者提供更加良好的體驗,就此,Lighthouse是一個能夠為開發者分析網站良好的開發工具,Lighthouse能夠多方面地分析網站,當中包括效能(Performance)、可訪問性(Accessibility)、編程是否用了最佳的方法(Best Practices)、搜尋引擎優化(SEO)。

如何下載 Lighthouse extensions?

我們需要先前往 google chrome extension shop,並按下"加到Chrome”的按鈕

Lighthouse zh.png

按下”新增擴充功能”

Lighthouse_new.png

新增完成後,前往需要進行分析的網站,開啟位於瀏覽器右上角的extension,並選擇Lighthouse extension 。

hxgonspace_lighthouse.png

在選擇extension後,Lighthouse的介面會彈出,按下”Generate report”進行網站分析。

Generate report.png

分析完成後,Lighthouse會提供一份完整的分析報告,當中包括你的網站在效能(Performance)、可訪問性(Accessibility)、編程是否用了最佳的方法(Best Practices)、搜尋引擎優化(SEO)的得分,下文將簡單介紹四項的評分準則。

效能(Performance)

Lighthouse view.png

效能的評分標準主要是基於,網站於用戶進入網站後,網站生成內容所需的時間,若生成所需的時間越少,效能的分數越高。

報告中亦會提供一些意見讓開發者提升網站效能

Lighthouse view2.png

可訪問性(Accessibility) 這項測試主要是測試開發者的網站能否為所有人提供良好及易用的體驗(包括殘障人士),報告中亦有提供開發無障礙網站的指南以供開發者參考。

Lighthouse view3.png

最佳的方法(Best Practices) 這項測試主要是分析,開發者是否運用了一些安全及正確的方法去開發網站,例如網站是否使用了HTTPS確保用戶瀏覽時的安全。

Lighthouse view4.png

搜尋引擎優化(SEO) 搜尋引擎優化主要是測試開發者的網站有沒有跟隨搜索引擎優化建議,若網站有良好的搜尋引擎優化,網站在搜尋引擎的排名便會越高,令網站更容易被瀏覽,優化網站的方式有很多種,例如使用網站地圖(Sitemap)、元數據(Metadata)、結構化資料標記(JSON-LD)等等。如閣下想了解更多關於seo的技術,歡迎向我們查詢

Lighthouse view5.png