still updating...almost finish!
Automated auditing, performance metrics, and best practices for the web.
From Google Lighthouse Github About section.
My comment: Google Lighthouse 是網站的客觀評分工具。
Performance
評估成效並找出可以加快網頁載入速度的機會。
Accessibility
判斷所有使用者是否都能存取內容並有效瀏覽網站。
Best Practice
遵循最佳做法，改善網頁的程式碼健康狀態。
SEO - Search Engine Optimization
確保網頁針對搜尋引擎結果排名進行了優化。
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:
Impact :
Weighted average vaule
Expand Performance, Accessibility,Best Practice
Best Practice
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score.
Open Chrome DevTool
F12 or Control + Shift + I then switch Tab to lighthouse
Add on Chrome Extension - lighthouse
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).
Like Google Lighthouse, but it scans every single page.
Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
From official document
language:Javascript
| # | syntax | 用 | 不用 | 謹慎用 |
|---|---|---|---|---|
| 1 | await | V | ||
| 2 | preload | V | ||
| 3 | lazy loading | V | ||
| 4 | srcset | V | ||
| 5 | width,height | V |
| # | item | 用 | 不用 | 謹慎用 |
|---|---|---|---|---|
| 1 | advertise | V | ||
| 2 | animation | Ｖ | ||
| 3 | SPA,SSR | 看情境 | ||
| 4 | asset | 越小越好 | ||
| 5 | CDN | V | ||
| 6 | Web Workers | V |
看影片追技術
看更多
阿瑜
