Abstract:

still updating...almost finish!

Outline

1. Intro.

2. Metrics

3. Metrics's Meaning

4. Metrics's Calculation

5. How to Use Google Lighthouse

6. Related tools

7. Intergration - Lighthouse CI

8. Best Practice

9. Reference

10. Conclusion | Takeaway | Wrap

1. Intro.

Automated auditing, performance metrics, and best practices for the web.
From Google Lighthouse Github About section.

My comment: Google Lighthouse 是網站的客觀評分工具。

2. Metrics - 5 Categories - 5 Scores

1. Performance

   評估成效並找出可以加快網頁載入速度的機會。

2. Accessibility

   判斷所有使用者是否都能存取內容並有效瀏覽網站。

3. Best Practice

   遵循最佳做法，改善網頁的程式碼健康狀態。

4. SEO - Search Engine Optimization

   確保網頁針對搜尋引擎結果排名進行了優化。

5. PWA - Progressive Web App

   Many users of your page visit on a slow cellular network connection. Making your page load quickly on a mobile network helps to ensure a positive experience for your mobile users.
   Other refs:
   what are pwas
   Lighthouse中的PWA是什麼？白話文解釋、分析優缺點
   Day 14 - PWA - ( Progressive Web Apps，PWA）

Ref:

• https://developer.chrome.com/docs/lighthouse

3. Metrics's Meaning | Impact

Impact :

1. Bounce
2. Conversation
3. Page View

4. Metrics's Calculation

Weighted average vaule
Expand Performance, Accessibility,Best Practice

Best Practice

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score.

5. How to Use Google Lighthouse

• Open Chrome DevTool

  F12 or Control + Shift + I then switch Tab to lighthouse

• Add on Chrome Extension - lighthouse

• Node CLI

6. Related tools

• Web Vitals

  
  pictute from Fireship

  Tool : Chrome extension - Web Vitals
  Measure metrics for a healthy site
  Web Vitals are quality signals key to delivering great UX on the web (https://web.dev/vitals). This extension measures the Core Web Vitals, providing instant feedback on loading, interactivity and layout shift metrics. It is consistent with how these metrics are measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console).
  

• Unlighthouse

  Like Google Lighthouse, but it scans every single page.

7. Intergration - Lighthouse CI

Automate running Lighthouse for every commit, viewing the changes, and preventing regressions

8. Best Practice

From official document

9. Reference

• Article-how to run local performance tests with lighthouse
• Youtube Vidio-The ultimate guide to web performance

10. Conclusion | Takeaway | Wrap | Tips | 內化

language:Javascript