Web Performance Fundamentals
Master the core techniques that make websites load fast and stay responsive across all devices and network conditions. You will build a fully optimized landing page that scores 90+ on Lighthouse across all performance metrics.
Course Content
6 modules · 30 lessonsHow Browsers Load Pages
Understand the browser's critical rendering path so you can identify exactly where performance is lost.
What is the Critical Rendering Path and why does it matter
DOM construction, CSSOM construction, render tree, layout, paint, composite
What is TTFB and how does server response time affect page speed
TTFB definition, DNS lookup, TCP handshake, TLS negotiation, server processing, waterfall chart
What are render-blocking resources and how to eliminate them
render-blocking CSS, render-blocking JS, defer attribute, async attribute, media queries on link tags, inline critical CSS
How to read a browser waterfall chart to find performance bottlenecks
waterfall chart anatomy, queuing, stalled, DNS, connect, waiting, receiving, connection limits, request prioritization
What is the browser cache and how HTTP cache headers control it
Cache-Control header, max-age, no-cache, no-store, ETag, Last-Modified, stale-while-revalidate, cache busting with hashes
Core Web Vitals
Measure and optimize Google's three Core Web Vitals metrics so your site ranks well and feels fast to users.
What is LCP and how to improve Largest Contentful Paint
LCP definition, LCP elements, LCP thresholds, slow LCP causes, preload, fetchpriority, image optimization, server response time
What is CLS and how to eliminate Cumulative Layout Shift
CLS definition, layout shift score formula, unsized images, font swap shifts, dynamic content injection, size attributes, aspect-ratio CSS, font-display
What is INP and how to optimize Interaction to Next Paint
INP definition, INP vs FID, event processing model, long tasks, input delay, processing time, presentation delay, scheduler API, yielding to main thread
How to measure Core Web Vitals in the field and in the lab
field data vs lab data, CrUX dataset, PageSpeed Insights, web-vitals.js, PerformanceObserver API, Lighthouse CI, synthetic monitoring
How to use Lighthouse to audit and score page performance
Lighthouse performance score formula, opportunities vs diagnostics, Lighthouse CI, lighthouse-plugin-field-performance, throttling settings, score variability
Image and Font Optimization
Eliminate the two largest categories of wasted bytes on most websites so pages load faster on any network.
Which image format should you use: WebP, AVIF, or JPEG
WebP vs JPEG vs PNG vs AVIF, compression ratios, browser support, alpha channel, picture element, srcset, type attribute
How to serve responsive images with srcset and sizes attributes
srcset width descriptors, sizes attribute, pixel density descriptors, art direction, picture element, viewport-relative sizes, image CDN resizing
When to use lazy loading for images and what the tradeoffs are
loading=lazy attribute, Intersection Observer, above-the-fold vs below-the-fold, LCP image pitfall, native lazy loading browser support, eager loading
How to load web fonts without causing layout shift or FOIT
FOIT, FOUT, font-display values, font preloading, unicode-range subsetting, variable fonts, Google Fonts optimization, system font stack fallback
How to compress and optimize images at build time with Sharp and Squoosh
Sharp API, Squoosh CLI, build pipeline integration, quality settings, metadata stripping, batch processing, Vite image plugins, on-demand vs build-time optimization
JavaScript Performance
Reduce the JavaScript your users download, parse, and execute so pages become interactive faster on all devices.
How JavaScript bundle size affects Time to Interactive
Time to Interactive, Total Blocking Time, main thread, parse and compile time, execution time, mobile CPU budget, coverage tab
How to code-split a JavaScript bundle with dynamic imports
dynamic import(), route-based splitting, component-level splitting, Webpack/Vite code splitting, prefetch, preload hints, React.lazy, loading states
How to tree-shake unused JavaScript with ES modules
tree shaking definition, ES modules vs CommonJS, side effects, package.json sideEffects flag, named vs default exports, dead code elimination, Webpack/Rollup/Vite tree shaking
What causes long tasks on the main thread and how to fix them
long tasks definition, 50ms threshold, main thread blocking, INP, setTimeout chunking, scheduler.postTask, Web Workers, requestAnimationFrame, isInputPending
How to use a bundle analyzer to find and remove large dependencies
webpack-bundle-analyzer, rollup-plugin-visualizer, vite-bundle-visualizer, finding large modules, replacing heavy libraries, moment.js vs day.js, lodash vs lodash-es, cherry-picking imports
Network and Delivery Optimization
Configure servers, CDNs, and compression so every byte travels to users as efficiently as possible.
How HTTP/2 and HTTP/3 improve web performance over HTTP/1.1
HTTP/1.1 limitations, head-of-line blocking, HTTP/2 multiplexing, HTTP/2 header compression (HPACK), HTTP/3 QUIC, 0-RTT connection, connection migration, server push deprecation
How CDNs work and when you actually need one
CDN edge nodes, PoP locations, origin server, cache hit vs miss, CDN for static assets, CDN for HTML, edge computing, CDN configuration, Cache-Control with CDN
How Brotli and gzip compression reduce transfer size
Brotli vs gzip compression ratios, Content-Encoding header, Accept-Encoding negotiation, static vs dynamic compression, compression levels, what to compress and what not to
What is resource hinting: preconnect, prefetch, and preload
rel=preconnect, rel=dns-prefetch, rel=preload, rel=prefetch, rel=modulepreload, as attribute, crossorigin attribute, when to use each hint, over-hinting risk
How to implement a service worker for offline caching and faster repeat visits
service worker lifecycle, install event, fetch event, cache-first strategy, network-first strategy, stale-while-revalidate, Workbox, background sync, service worker scope
CSS Performance and Rendering
Write CSS that paints fast and avoids triggering expensive layout recalculations so animations and interactions feel smooth.
How CSS triggers layout, paint, and composite — and why it matters
CSS rendering pipeline, layout-triggering properties, paint-triggering properties, composite-only properties, csstriggers.com, reflow vs repaint, GPU compositing
How to achieve smooth 60fps CSS animations without jank
16ms frame budget, transform vs positional properties, opacity animation, will-change, GPU layer promotion, containment, requestAnimationFrame for JS animations
What causes forced synchronous layout and how to avoid it
forced synchronous layout, layout thrashing, read-write batching, offsetHeight, getBoundingClientRect, FastDOM library, requestAnimationFrame batching
How to use CSS containment to improve rendering performance
contain property, layout containment, style containment, paint containment, size containment, content-visibility, auto keyword, skip rendering, contain-intrinsic-size
How to reduce unused CSS and eliminate render-blocking stylesheets
PurgeCSS, critical CSS extraction, CSS Coverage tab, async stylesheet loading, media queries on link elements, CSS-in-JS trade-offs, PostCSS