Performance and Core Web Vitals

Articles

• Back/forward cache (bfcache) and page restore

  Reference guide

  Back/forward cache restores pages instantly on back and forward. Learn eligibility rules and how to keep pages bfcache-friendly.

• Using a CDN for static assets

  Reference guide

  Understand CDN delivery of static assets: edge cache and hits, origin shield, purge, and dynamic pass-through, with policy examples.

• CDN and Time To First Byte

  Reference guide

  CDN and TTFB: how the edge's cache and connection decides the TTFB you measure, and how to measure origin TTFB separately.

• Debug CLS in the trace

  Troubleshooting guide

  Debug CLS in Chrome DevTools: enable the Layout Shifts panel, run a trace, and map shift events back to the element, ad slot, or font that moved it.

• Fixing CLS (Cumulative Layout Shift)

  Reference guide

  Fix CLS below 0.1: reserve space for images and embeds, deflate ad frames, and prevent font swap reflow. Includes the shift calculation table.

• Code splitting by route

  Tutorial

  Route-level code splitting uses dynamic import() to emit per-route chunks, cutting the initial bundle and avoiding parse cost for inactive routes.

• Core Web Vitals explained

  Reference guide

  Reference guide to Core Web Vitals. LCP, INP and CLS thresholds, how they are measured from field data, and what they mean for real user experience.

• The critical rendering path

  Reference guide

  The critical rendering path explained: parse, CSSOM, render tree, layout and paint, and why script and stylesheet order decides first paint.

• DOMContentLoaded vs the load event in performance analysis

  Reference guide

  DOMContentLoaded versus load event timing, what each measures and how to read them in performance tools.

• Using fetchpriority to move Largest Contentful Paint

  Tutorial

  fetchpriority high for the LCP image explained: how it prompts an earlier fetch, its limits, and when it helps LCP.

• Font loading best practice

  Reference guide

  Font loading best practice: font-display swap, preload the LCP font, self-host versus CDN, and subsetting to cut layout shift and LCP.

• HTTP 103 Early Hints explained

  Reference guide

  What HTTP 103 Early Hints does, browser support, and when to enable it for faster navigation loads.

• HTTP caching headers explained

  Reference guide

  Understand HTTP caching: Cache-Control and max-age, ETag and Last-Modified revalidation, Vary and stale-while-revalidate, per asset type.

• HTTP/3 and QUIC explained

  Reference guide

  HTTP/3 and QUIC explained: how connections map to streams, what it fixes, and how to verify your CDN or origin is serving it.

• How the image decoding attribute affects LCP

  Reference guide

  Learn what the image decoding attribute does, how sync, async and auto differ, and whether decoding affects LCP.

• Debug INP in DevTools

  Troubleshooting guide

  Debug INP with Chrome DevTools: trace a click, read interaction timing, isolate the long task behind input delay, and the fixes for each source.

• Improving INP (Interaction to Next Paint)

  Reference guide

  Improve your INP under 200ms: understand what the metric measures, break up long main-thread work, and load JavaScript only when interactions need it.

• A heavy site that pauses on interaction

  Troubleshooting guide

  Fix a site that pauses on click or scroll: find long tasks, trim third-party scripts, split bundles, and use the Reduce main thread work audit.

• JavaScript memory leaks and how to fix them

  Troubleshooting guide

  Find and fix JavaScript memory leaks in the browser: detached DOM nodes, closure references and un-cleared intervals, using the DevTools heap tools.

• Preventing layout shift in forms

  Reference guide

  Forms and CLS: reserve field heights, stable inline errors, autofill and reCAPTCHA shifts, and the test steps that keep forms from jumping.

• An LCP, INP and CLS audit procedure

  Tutorial

  Audit LCP, INP and CLS in a repeatable procedure: field data first, per metric checks, and a re-run to verify the fix list.

• Optimising LCP (Largest Contentful Paint)

  Reference guide

  Improve your LCP below 2.5 seconds: know the LCP element, split time into server, resource, and render legs, then work the fix list top to bottom.

• Long Animation Frames API to debug INP

  Tutorial

  Use the Long Animation Frames API and web-vitals attribution to find the scripts behind slow Interaction to Next Paint.

• Long tasks and blocking time (TBT) explained

  Reference guide

  Understand long tasks, Total Blocking Time (TBT) and long animation frames. Find and split work that blocks the main thread from responding.

• Using PageSpeed Insights

  Reference guide

  Read a PageSpeed Insights report: field data from CrUX, lab data from Lighthouse, what each score means and its limits.

• Setting and enforcing performance budgets

  Tutorial

  Performance budgets: set byte weight, timing and Core Web Vitals limits, then enforce them in Lighthouse CI so performance regressions fail the build.

• Field data vs lab data for Core Web Vitals

  Reference guide

  Core Web Vitals field vs lab data: field data comes from real users, lab data comes from a controlled Lighthouse run. Understand both.

• Adding Lighthouse CI to your pipeline

  Tutorial

  Lighthouse CI catches performance and Core Web Vitals regressions before merge. Set budgets and assertions, then run them in GitHub Actions.

• Preconnect and prefetch guide

  Reference guide

  Preconnect and prefetch guide: the difference between resource hints, when each helps, and how to avoid the wasted-bandwidth trap.

• Render-blocking CSS vs JavaScript explained

  Reference guide

  Understand the difference between render-blocking CSS and parser-blocking JavaScript and how each delays first paint and LCP.

• Render-blocking CSS and JavaScript

  Reference guide

  Identify and remove render-blocking CSS and JavaScript: inline critical CSS, defer and async script loading, and preload the rest.

• Request waterfalls and critical CSS

  Tutorial

  Read request waterfalls and inline critical CSS to cut LCP and render-blocking work: the waterfall view, the blocker hunt, and the pattern.

• Using requestIdleCallback for non-critical background work

  Reference guide

  requestIdleCallback scheduling of background work, idle budget, timeout, and alternatives compared.

• Resource Timing API for site-speed analysis

  Reference guide

  Use the Resource Timing API to get real DNS, connect, TLS, TTFB and transfer-size timing for every asset and find what slows a page.

• Service Worker caching strategies

  Reference guide

  Service Worker caching strategies: cache-first, network-first, stale-while-revalidate and when to use each for HTML, images, and API responses.

• Speculation Rules API for prefetching and prerendering

  Tutorial

  Speculation Rules API prefetch and prerender usage, eagerness settings, support and fallback guidance.

• Third-party script performance impact

  Reference guide

  Third-party script performance: how to measure byte and main-thread impact, and how to defer or sandbox the scripts.

• How tree shaking removes dead JavaScript and why it can fail

  Reference guide

  Tree shaking and dead code elimination in JS bundlers, side-effect detection, and pitfalls that silently keep code.

• Reducing Time To First Byte

  Troubleshooting guide

  Reduce slow Time To First Byte: isolate it with curl, then fix server response time, database queries, caching, and CDN behaviour in order.

• TTFB vs FCP explained

  Reference guide

  TTFB vs FCP: how server time becomes render time, why fast TTFB is not fast FCP, and the fix route for each leg.

• A 30 minute web performance audit

  Tutorial

  Run a 30 minute performance audit: field and lab measures, the waterfall, image and JavaScript audits, third-party check, then a performance budget.

• Measuring Core Web Vitals with the web-vitals JavaScript library

  Tutorial

  Using the web-vitals JavaScript library to measure LCP, INP and CLS, send field data to analytics and debug the metrics in a real browser.

• Moving work off the main thread with Web Workers

  Tutorial

  Use Web Workers to run parsing, filtering and heavy computation off the main thread, improving Interaction to Next Paint without touching the DOM.

• WordPress performance quick wins

  Troubleshooting guide

  Speed up a slow WordPress site in order: page cache, image optimisation, autoloaded options, plugin hygiene, hosting, then CDN, verified by LCP.