Web Vitals โ metrics to QA test Web Page UX as LCP, FID & CLS vs 75th percentile page loads
aka Lighthouse, Lighthouse-Score
Replace images AVIF (bad support) > WebP > PNG + JPG - but sometimes PNG has better lossy compression ratio than WebP?!
LCPโ
Largest Contentful Paint for loading perf, ๐<2.5s & 4s>๐ฉ, โฑ to load/render first largest element (text/img) on Viewport
FIDโ
First Input Delay for interactivity delay, ๐<100ms for best UX, from user action to browser response.
CLSโ
Cumulative Layout Shift to measure visual stability ๐<0.1 arb
FCPโ
First Contentful Paint to measure perceived load speed to see any content render on screen
TTIโ
Time To Interactive to measure load responsiveness when page become useable
TBTโ
Total Blocking Time to measure t Blocking Main Thread (ฮFCP-TTI) prevent input responsiveness
INPโ
Interaction to Next Paint to measure worst Latency for any kbd/click action on page
TTFBโ
Time To First Byte - Server/CDN Latency to send first byte to Client
Long Tasks APIโ
API to report tasks > 50ms Blocking Main Thread
WebPageTestโ
Online API to audit Web Vitals free starter plan
Best practices scoreโ
aim for 92%, unless you want to really need sourceMaps to debug. Also, stuck SOL for frameworks like Docusaurus stuck on outdated react/etc
bfcacheโ
back/forward cache
Referencesโ
WebPageTestโ Online API to audit Web Vitals free starter planChecklyโ Online API to supercharge Playwright with screencap, API checks, Web Vitals, CRON Jobs, Vercel Int - 2wk trial then $30/maria-hiddenโ arial label to omit element from screen readers (no impact on visuals) - leaving this on SVGs is (wrongly) will lower Web Vitals - but since it's not needed for now, will omit all these