Performance & Core Web Vitals
Master web performance from the HTML perspective — Core Web Vitals optimization, resource loading strategies, and performance auditing.
50 min•By Priygop Team•Last updated: Feb 2026
Core Web Vitals
- LCP (Largest Contentful Paint): Time to render the largest visible element — target < 2.5s. Optimize: preload hero image, use CDN, optimize server response time
- INP (Interaction to Next Paint): Responsiveness — time from user interaction to visual update. Target < 200ms. Optimize: reduce JavaScript, use requestIdleCallback
- CLS (Cumulative Layout Shift): Visual stability — elements shouldn't move after rendering. Target < 0.1. Fix: set image dimensions, reserve space for ads, use font-display: swap
- Resource Hints: <link rel='preconnect'> (early DNS + TCP + TLS), <link rel='preload'> (fetch critical resources early), <link rel='prefetch'> (likely next-page resources), fetchpriority='high'
- Lazy Loading: loading='lazy' on images and iframes — browser loads them only when near viewport. Saves bandwidth, improves initial load. Don't lazy-load above-fold content
- Script Loading: defer (download parallel, execute after parse), async (download parallel, execute immediately), type='module' (defer by default). Place scripts at end of <body> as fallback
Performance Auditing
- Lighthouse: Chrome DevTools → Lighthouse — scores Performance, Accessibility, Best Practices, SEO. Actionable recommendations with priority order
- PageSpeed Insights: Real-user data (CrUX) + lab data (Lighthouse) — shows how real users experience your site. Field data is what Google actually uses for ranking
- WebPageTest: Advanced testing — waterfall charts, filmstrip view, multiple locations, connection speeds. Compare runs, find bottlenecks in resource loading
- Chrome DevTools Performance: Record page load or interactions — flame chart shows JavaScript execution, layout recalculations, paint events. Find exactly what's slow
- Bundle Analysis: Identify large JavaScript bundles that block rendering — webpack-bundle-analyzer, source-map-explorer. Split and lazy-load non-critical code