Every web performance term and metric explained in plain language — from Core Web Vitals to advanced optimization techniques.
Caching stores resources locally to avoid re-downloading them on every visit. Use `Cache-Control: max-age=31536000, immutable` for versioned static assets (JS, CSS with content hashes) and `Cache-Control: no-cache` with ETag for HTML pages. CDN caching reduces TTFB from 200–500ms to 10–50ms globally. The `stale-while-revalidate` directive serves cached content instantly while updating in the background. Proper multi-layered caching (browser + CDN + server-side) reduces return-visit load times from seconds to under 500ms, cuts bandwidth costs by 60–80%, and directly improves LCP, FCP, and TTFB. Approximately 40% of websites still have suboptimal cache headers — fixing this is one of the easiest, highest-impact performance wins available.
Chrome DevTools is the browser's debugging toolkit with Performance profiling (flame charts, long task detection), Network analysis (waterfall, timing), and Lighthouse integration. The primary tool for diagnosing exactly why pages are slow.
CrUX is Google's public dataset of real Chrome user performance data — the field data source Google uses for ranking. It tracks CWV + FCP + TTFB at p75 over a 28-day rolling window. Accessible via PSI, Search Console, BigQuery, and API.
The CLS Score is a unitless number representing cumulative visual instability. It uses a 'session window' approach — shifts are grouped into windows, and the largest window becomes your CLS score. Good CLS is ≤ 0.1.
Code splitting divides JavaScript into smaller chunks loaded on demand rather than all upfront. Use route-based splitting (automatic in frameworks), React.lazy() for component-level splitting, and dynamic import() for feature-level splitting. Target ≤ 200KB initial bundle.
Gzip compresses text resources by 60–80%. Brotli compresses 15–25% better than Gzip. Both are applied server-side transparently. Enabling compression is one of the easiest, highest-impact optimizations.
A CDN distributes content across global edge servers, serving resources from the nearest location. Reduces TTFB by 50–90%. Also provides DDoS protection, compression, and HTTP/3. Essential for any site with geographically diverse users.
Core Web Vitals are three Google metrics — LCP (loading ≤ 2.5s), INP (responsiveness ≤ 200ms), and CLS (visual stability ≤ 0.1) — that directly influence search rankings by measuring real-user experience. They became a ranking signal in June 2021, were updated in March 2024 (FID → INP), and remain unchanged in 2026. Google evaluates the 75th percentile of field data from CrUX over a rolling 28-day window. Only ~42% of mobile sites currently pass all three — optimizing is both a ranking and revenue opportunity.
Critical CSS is the minimal styles for above-the-fold content. Inline it in <head> to eliminate render-blocking CSS, improving FCP by 500ms–2s. Automate with Critters or Critical.
The CRP is the browser's process for converting HTML, CSS, and JS into pixels: Parse HTML → Parse CSS → Render Tree → Layout → Paint. Optimizing it means fewer blocking resources, smaller files, and fewer round trips — directly improving FCP and LCP.
CLS measures how much visible content shifts unexpectedly during a page visit. Good CLS is ≤ 0.1 (unitless). Uses 'session windows' — shifts grouped into max 5-second windows, and the largest window becomes the CLS score. The easiest CWV to fix (add dimensions, reserve space) and has the highest pass rate (~72% of mobile origins).
Defer: downloads in parallel, executes after DOM is ready (preserves order). Async: downloads in parallel, executes immediately when ready (no order guarantee). Both prevent render-blocking. Use defer for most scripts, async for independent analytics.
DOMContentLoaded fires when the HTML document is fully parsed and the DOM tree is built, without waiting for images, stylesheets, or subframes. Diagnostic marker for DOM readiness — not a CWV or ranking factor.
Field data (CrUX, RUM) captures real users and is what Google uses for ranking. Lab data (Lighthouse) provides reproducible testing for debugging. Both are essential — use lab data for diagnosis and iteration, field data for measuring real impact.
FCP measures when the first text or image becomes visible. Good FCP is ≤ 1.8 seconds at p75. While not a Core Web Vital, it's a Lighthouse metric (10% weight) and a leading indicator of LCP problems. Improving FCP means fixing the critical rendering path.
Fully Loaded Time measures when all resources on a page have finished loading. Less important than CWV for ranking but indicates total page weight and resource efficiency. Useful for identifying unnecessary resource loading.
PageSpeed Insights combines CrUX field data (what Google uses for rankings) with Lighthouse lab data (actionable diagnostics) in one free tool. Field data shows real-user CWV pass/fail; lab data shows a 0–100 score with fix recommendations.
Image optimization involves choosing the right format (WebP 30% smaller than JPEG, AVIF 50% smaller), proper compression (80% lossy quality is visually lossless), responsive delivery via srcset (right-sized per device), and CDN-based transformation. Images are 50–75% of page weight. Optimizing them is usually the single highest-impact performance improvement available.
INP measures the latency of all user interactions throughout a page visit and reports the worst one. Good INP is under 200ms at p75. It replaced FID as a Core Web Vital in March 2024 because it captures the full interaction lifecycle (input delay + processing + presentation delay) for every interaction, not just the first.
LCP measures when the largest visible content element (image or text block) finishes rendering. Good LCP is under 2.5 seconds at p75. It's the most impactful Core Web Vital for perceived loading speed and directly affects rankings, bounce rates, and conversions.
The LCP Element is the specific content element in the viewport that the browser identifies as the 'largest' for measuring LCP. Identifying and optimizing this element is the single most impactful LCP improvement.
Lazy loading delays loading offscreen images and iframes until the user scrolls near them, reducing initial page weight by 50–80%. Use native `loading='lazy'` for images/iframes. Never lazy-load the LCP element — use `fetchpriority='high'` instead. Use Intersection Observer for custom lazy-loading of components and embeds.
Lighthouse is Google's open-source auditing tool scoring performance (TBT 30%, LCP 25%, CLS 25%, FCP 10%, SI 10%), accessibility, best practices, and SEO. Runs in Chrome DevTools, CLI, CI/CD, and powers PSI's lab data. The essential first step for performance optimization.
Long Tasks are main-thread tasks exceeding 50ms that block user input. They're the root cause of poor INP and high TBT. Break them with scheduler.yield(), setTimeout(0), or Web Workers.
Main Thread Work is the total CPU time on the browser's main thread — JS execution, CSS computation, layout, paint. Lighthouse flags > 4 seconds. Reducing it improves TBT, INP, and overall responsiveness.
Minification strips whitespace/comments (20–60% reduction). Tree shaking removes unused exports (30–60% reduction). Both are build-time optimizations applied before compression. Essential for keeping JavaScript lean.
Page Experience Signals are Google's collection of ranking factors that measure overall user experience: Core Web Vitals (LCP, INP, CLS), HTTPS, mobile-friendliness, no intrusive interstitials, and safe browsing status.
A page 'passes' CWV when all three metrics (LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1) meet the 'good' threshold at the 75th percentile of real-user data. Failing even one metric means no ranking boost.
Resource hints are HTML <link> attributes that tell the browser about resources it will need: preload (fetch now, high priority), preconnect (establish connection), dns-prefetch (resolve hostname), prefetch (fetch for future navigation). Preloading the LCP image with fetchpriority='high' can save 200–500ms of LCP.
RUM collects performance metrics from every real visitor — the gold standard for understanding actual user experience. Essential because INP can only be measured in the field. Implement via Web Vitals JS library or commercial tools (SpeedCurve, DebugBear).
Render-blocking resources are CSS/JS files in <head> that must load before the browser renders anything. They directly delay FCP and LCP. Fix by inlining critical CSS, deferring scripts, and removing unused code.
Four rendering strategies: CSR (JS builds page in browser — slow FCP/LCP), SSR (server renders per request — fast FCP, higher TTFB), SSG (pre-built at deploy — fastest), ISR (SSG + background refresh — fast + fresh). Choose based on content dynamism and SEO needs.
Server Response Time is how long your web server takes to process a request and send back the first byte. It's the primary contributor to TTFB and affects every subsequent loading metric. Target: under 200ms for static, under 500ms for dynamic.
Speed Index measures how quickly the visible area of the page is populated with content. Good Speed Index is ≤ 3.4 seconds (Lighthouse). It captures the overall visual loading experience — rewarding progressive rendering over delayed all-at-once rendering. Lab-only metric, 10% of Lighthouse score.
TTFB measures the time from the browser's request to receiving the first byte of the response. Good TTFB is under 800ms. It includes DNS + TCP + TLS + server processing + transit time. TTFB is the foundation of all loading metrics — poor TTFB makes good LCP nearly impossible.
TTI measures when the page becomes fully interactive — the main thread has a 5-second quiet window with no long tasks. Good TTI is ≤ 3.8s. Largely replaced by TBT (lab) and INP (field) but useful for diagnosing heavy JavaScript loading.
TBT measures the total time the main thread was blocked by long tasks (> 50ms each) between FCP and TTI. Good TBT is ≤ 200ms. It carries 30% of the Lighthouse score (highest weight) and is the best lab proxy for real-world responsiveness (INP).
The window load event fires when the entire page — including all images, stylesheets, scripts, and subframes — has fully loaded. Mostly replaced by CWV for performance measurement but still useful for resource-dependent scripts.
Our team can audit your site and explain exactly what's slowing you down — in plain language. Request an audit today.
