Core Web Vitals
10 challenges teaching FCP, LCP, CLS, INP, TTFB and custom performance metrics with Playwright PerformanceObserver.
First Contentful Paint (FCP)
EASYMeasure when the first content appears on screen. FCP marks the point when the browser renders the first bit of content from the DOM, giving users the first feedback that the page is loading.
FCPtarget ≤ 1800ms
Tips (3)
- FCP is triggered by text, images, SVGs, or canvas elements
- Reduce render-blocking resources to improve FCP
- Use font-display: swap to avoid invisible text
Largest Contentful Paint (LCP)
EASYMeasure when the largest content element becomes visible. LCP reports the render time of the largest image or text block visible in the viewport.
LCPtarget ≤ 2500ms
Tips (3)
- LCP candidates include images, video posters, and text blocks
- Preload critical images with rel="preload"
- Use srcset for responsive images
Cumulative Layout Shift (CLS)
MEDIUMMeasure visual stability - how much the page content shifts unexpectedly. CLS measures the sum of all unexpected layout shifts that occur during the page lifecycle.
CLStarget ≤ 0.1
Tips (4)
- Always include width/height on images and videos
- Reserve space for ads and embeds
- Avoid inserting content above existing content
- Use transform animations instead of layout-triggering properties
Interaction to Next Paint (INP)
MEDIUMMeasure responsiveness - the delay between user interaction and visual feedback. INP observes all click, tap, and keyboard interactions and reports the worst latency.
INPtarget ≤ 200ms
Tips (4)
- Break up long JavaScript tasks (>50ms)
- Use requestIdleCallback for non-critical work
- Debounce input handlers
- Consider using Web Workers for heavy computations
Time to First Byte (TTFB)
MEDIUMMeasure server response time - how long it takes for the browser to receive the first byte of content from the server.
TTFBtarget ≤ 800ms
Tips (4)
- Use a CDN to reduce latency
- Optimize server-side code and database queries
- Enable HTTP/2 or HTTP/3
- Implement effective caching strategies
Detect Slow-Loading Images
MEDIUMFind images that are loaded without lazy loading and impact initial page load. Learn to identify and fix images that block the critical rendering path.
CUSTOM
Tips (4)
- Use loading="lazy" for below-the-fold images
- Compress images with modern formats (WebP, AVIF)
- Use responsive images with srcset
- Consider using blur-up placeholders
Find Render-Blocking Resources
HARDIdentify CSS and JavaScript files that block the initial render. Learn to defer or async non-critical resources.
CUSTOM
Tips (4)
- Use async or defer for non-critical scripts
- Inline critical CSS in <head>
- Use media queries to load CSS conditionally
- Consider code splitting for JavaScript
Detect Memory Leaks
HARDLearn to identify memory leaks by monitoring DOM node count and heap size over time. Memory leaks cause performance degradation.
CUSTOM
Tips (4)
- Watch for detached DOM nodes
- Clean up event listeners on unmount
- Avoid storing references to DOM elements
- Use WeakMap/WeakSet for caching
Analyze Network Waterfall
HARDLearn to read and analyze the network waterfall to identify bottlenecks. Find slow requests and optimize the critical path.
CUSTOM
Tips (4)
- Look for long bars indicating slow resources
- Check for sequential requests that could be parallelized
- Identify large resources that could be compressed
- Use HTTP/2 to enable multiplexing
Achieve Lighthouse Score 90+
EXPERTThe ultimate performance challenge: achieve a Lighthouse performance score of 90 or higher. Apply all optimization techniques.
CUSTOMtarget ≤ 90ms
Tips (5)
- Optimize all Core Web Vitals (FCP, LCP, CLS, INP, TTFB)
- Minimize JavaScript bundle size
- Enable text compression (gzip/brotli)
- Serve images in next-gen formats
- Eliminate unused CSS/JS