Core Web Vitals: Put Your App into Orbit with Best Practices

on YouTube ↗29m

" summary

Core Web Vitals are presented as concrete metrics (LCP, CLS, FID and experimental INP) with their good/needs-work/bad thresholds, and measurement methods using Chrome UX Report, Lighthouse (navigation/timespan/snapshot), DevTools (Performance/Performance Insights, Coverage) and the Web Vitals JS library. Practical fixes that move the metrics are described: preload CSS and images, defer or split JavaScript, set image width/height, use web workers and priority hints; LCP is broken down (~40% TTFB, ~10%/~10%/~40% other) so improving LCP often requires server-side (TTFB) fixes.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 1:07UX problems
3. 5:41Core Web Vitals
4. 10:55LCP metric
5. 17:36CLS metric
6. 20:44FID metric
7. 23:09INP metric
8. 24:13Summary

" related talks

• 39mCore Web Vitals under controlMarta Wiśniewska · Web Summer Camp 2024
• 25mCore Web Vitals under controlMarta Wiśniewska · Voxxed Days Zurich 2023
• 25mCore Web Vitals under controlMarta Wiśniewska · JNation 2024
• 15mCore Web Vitals – Measuring Performance Like a ProOfir Elarat · ReactNext 2024
• 34mOptimizing Web Applications with Core Web VitalsANDREINA GOMEZ · Nerdearla 101 2022
• 01h 14mCore Web Vitals: Theory and practiceElizabeth Sweeny, Ivan Akulov · HolyJS 2020 Moscow
• 30mThe ins and outs of Core Web VitalsDan Shappir · JSConf Budapest 2022
• 43mDemystifying and leveraging Web VitalsClément Pasteau · reactjsday 2020