Build
Web Performance
Making pages fast, and proving it with the right metrics.
The territory
30 core terms mapped for this field, ranked by how often builders reach for them. Each one is a future entry. Want to bust one? One entry, one file, one pull request.
- Core Web VitalsGoogle's three user-experience speed metrics that affect ranking"the Google speed score" · "the metrics Google grades you on"
- Largest Contentful Paint (LCP)Time until the biggest above-the-fold element renders"how long until the big image shows" · "when the hero finally appears"
- Interaction to Next Paint (INP)Worst-case delay between a tap and visible response"the page feels laggy when I click" · "buttons don't respond right away"
- Cumulative Layout Shift (CLS)Score for content jumping around as the page loads"stuff moves and I tap the wrong thing" · "the page jumps while loading"
- Time to First Byte (TTFB)Delay before the server sends the first byte of HTML"the browser sits there blank" · "the server is slow to answer"
- First Contentful Paint (FCP)When any first pixel of content appears"when something finally shows up" · "the first thing you see"
- Critical rendering pathThe minimum work a browser must do to paint"what's blocking the first screen" · "the stuff needed before anything shows"
- Render-blocking resourceCSS/JS that stops painting until it loads and parses"something up top is holding the page hostage" · "the stylesheet stalls everything"
- Main thread blockingJS monopolizing the single thread that handles UI"the page can't do anything while it thinks" · "everything is stuck on one lane"
- Long taskAny main-thread block over 50ms that freezes interaction"something hogs the browser" · "the page locks up for a second"
- Total Blocking Time (TBT)Lab proxy for interaction delay, sums long tasks"how long the page is frozen in a test" · "total time it can't respond"
- Bundle sizeTotal bytes of JS/CSS shipped to the browser"my JavaScript is too fat" · "how much code am I sending"
- Code splittingBreaking one big JS bundle into on-demand chunks"chop up the big JavaScript file" · "only ship the code this page needs"
- Tree shakingBuild step that drops unused exports from the bundle"strip out code I never call" · "remove the dead library parts"
- Lazy loadingDeferring offscreen images or components until they're needed"only load pictures when you scroll to them" · "load later, not now"
- Image optimization (WebP/AVIF, responsive srcset)Serving right-sized, modern-format images per device"my photos are way too heavy" · "send smaller pictures to phones"
- LCP image prioritization (fetchpriority)Telling the browser which image matters most"tell the browser this image comes first" · "make the hero image load first"
- Layout shift reservation (aspect-ratio, width/height)Reserving space so media doesn't shove content"set width and height so nothing jumps" · "hold the space for the image"
- Critical CSSInlining only the styles needed for the first screen"above the fold styles" · "inline the top-of-page CSS"
- Font loading strategy (font-display: swap, FOUT/FOIT)Controlling whether text hides or flashes while fonts load"text is invisible for a second" · "the font pops in and reflows"
- Resource hints (preload, prefetch, preconnect)Hints telling the browser to fetch things early"tell the browser to grab it sooner" · "warm up the connection"
- Caching headers (Cache-Control / max-age)Rules telling browsers/CDNs how long to reuse a file"make it not re-download every visit" · "tell the browser to remember it"
- Compression (Gzip / Brotli)Shrinking text assets in transit over the wire"zip the files before sending" · "make the download smaller"
- Third-party script taxAnalytics/chat/ads tags dragging down your page"the tracking tags are slowing us down" · "other people's scripts wreck my speed"
- Waterfall chartTimeline diagram showing when each request starts and ends"that staircase graph of requests" · "the network timeline"
- Lab data vs field data (synthetic vs RUM)Simulated lab tests versus metrics from real visitors"it's fast on my machine but not for users" · "real-user numbers"
- Real User Monitoring (RUM)Collecting performance timings from actual visitors' browsers"measure real people, not a test" · "speed data from live traffic"
- 75th percentile (p75)The threshold value 75% of visits fall under"not the average, the slower users" · "how bad is it for most people"
- Performance budgetA hard byte/timing ceiling enforced in CI"fail the build if it gets slower" · "a size limit we can't cross"
- Layout thrashing (forced reflow)Read/write DOM loops forcing repeated recalculation"the page recalculates over and over" · "measuring and changing in a loop"
Deeper in the field
- Speed Index How quickly visible content fills in over time
- Perceived performance How fast it feels regardless of measured time
- Page weight Total transferred bytes required to load a page
- Minification Removing unnecessary source characters to reduce transferred asset bytes
- Async vs defer Script modes that avoid blocking HTML parsing while JavaScript downloads
- Unused JavaScript / CSS Shipped code that never contributes to the current page
- JavaScript execution cost Time spent parsing, compiling, and running JavaScript on-device
- Bundle analyzer Visual treemap showing what's bloating your bundle
- Asset fingerprinting (content hashing) Hashed filenames so updated assets aren't served stale
- Back/forward cache (bfcache) Restores complete pages instantly during back and forward navigation
- Critical request chain Serial dependencies where one fetch triggers the next
- Lossy vs lossless image compression Trading visual fidelity for smaller file size
- Content-visibility / CSS containment Skipping layout work for offscreen sections
- Layout, paint, and composite Three levels of browser rendering cost
- Virtualized list (windowing) Rendering only visible rows in a huge list
- Web Worker / offloading the main thread Running heavy JS on a background thread
- Idle callbacks (requestIdleCallback) Running non-urgent JS when the browser is free
- Memory leak / detached DOM nodes Growing memory that slows a long-lived page
- LCP phases TTFB, resource delay, download time, and render delay composing LCP
- INP phases Input delay, processing time, and presentation delay behind an interaction
- Time to Interactive (TTI) When the page reliably responds to input
- Performance profiling Recording browser work to locate CPU, rendering, and scripting bottlenecks
- Network and CPU throttling Simulating slower devices and connections for repeatable lab tests
- Resource Timing API Browser timings for individual images, scripts, stylesheets, and fetches
- PerformanceObserver Browser API for collecting paint, layout-shift, and interaction entries