Performance Mastery

Core Web Vitals are a set of specific factors that Google considers important in a webpage's overall user experience. They consist of three specific page speed and user interaction measurements: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

LCP measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. It marks the point in the page load timeline when the page's main content has likely loaded.

CLS measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less. It identifies how much the visible content of a page moves around during the loading phase.

FID measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less. It measures the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction.

INP is a metric that assesses a page's overall responsiveness to user interactions throughout the entire lifespan of a user's visit. It replaced FID as a Core Web Vital in March 2024. It measures the latency of all click, tap, and keyboard interactions.

FCP measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. This includes text, images (including background images), <svg> elements, or non-white <canvas> elements.

TTFB is a foundational metric for measuring connection setup time and web server responsiveness in both the lab and the field. It helps identify when a web server is too slow to respond to requests.

Lab data is collected in a controlled environment with predefined device and network settings (e.g., Lighthouse). Field data (RUM - Real User Monitoring) is collected from real users visiting the page in the wild (e.g., Chrome User Experience Report).

TBT measures the total amount of time between FCP and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. It is a lab proxy for FID/INP.

TTI measures the time from when the page starts loading to when it's visually rendered, its initial scripts have loaded, and it's capable of reliably responding to user input quickly.

A long task is any continuous execution of JavaScript on the main thread that exceeds 50 milliseconds. Long tasks block the main thread and prevent the browser from responding to user input.

CLS = Impact Fraction * Distance Fraction. Impact fraction measures how much space an unstable element takes up in the viewport between two frames. Distance fraction measures the distance that unstable elements have moved, relative to the viewport.

Speed Index measures how quickly content is visually displayed during page load. Lighthouse calculates this by taking a video of the page loading and computing the visual progression between frames.

Perceived performance is how fast a website *feels* to a user, regardless of its actual load time. Techniques like skeleton screens, optimistic UI, and progress bars improve perceived performance.

RAIL stands for Response, Animation, Idle, and Load. It is a user-centric performance model that breaks down the user's experience into these four distinct interactions.

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.

It describes the loading state of the document ('loading', 'interactive', 'complete'). It can be used to time specific phases of the page lifecycle.

CrUX is a public dataset of real user experience data on millions of websites. It is the primary source of 'Field Data' used by Google Search Console and PageSpeed Insights.

The Performance API provides methods and properties to measure the performance of web applications, including the timing of navigation and resource loading.

You use the PerformanceObserver API to observe 'largest-contentful-paint' entries. It yields the highest value recorded until the user interacts with the page.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP:', entry.startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

navigationStart (deprecated in favor of startTime) is when the user prompts the navigation. fetchStart is when the browser is ready to fetch the document using an HTTP request.

bfcache is a browser optimization that allows for instant back and forward navigation. It snapshots the entire page state (including the heap) to avoid re-parsing and re-executing scripts.

Use a PerformanceObserver for 'layout-shift' entries. Sum the values of entries that aren't preceded by a user input within 500ms.

First Paint is when the browser renders *anything* from the page (even a background color). FCP is when the browser renders the first piece of 'content' (DOM element like text/image).

Enables developers to create custom performance markers and measures using performance.mark() and performance.measure() to profile specific app logic.

Use PerformanceObserver to observe 'longtask' entries.

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn('Long Task detected:', entry.duration);
  }
}).observe({entryTypes: ['longtask']});

Hydration is the process of attaching event listeners to static HTML rendered by a server, making it interactive. Slow hydration can lead to a high TBT or INP.

An HTTP response header that communicates backend performance metrics to the browser, which can then be viewed in DevTools or via the Performance API.

An LCP of 2.5 seconds or less is considered 'Good'. 2.5s to 4s 'Needs Improvement', and over 4s is 'Poor'.

It refers to the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page, grouped into windows.

It uses a weighted average of Lighthouse metrics (LCP, TBT, CLS, FCP, Speed Index). The weights change as Google refines what matters most for UX.

DOMContentLoaded is critical for starting JS-heavy apps. Load is critical for ensuring full visual completion (including images).

Techniques like <link rel='prerender'> or <link rel='prefetch'> where the browser loads resources it *thinks* the user will need soon to make future navigations instant.

A browser API that allows developers to queue non-essential background tasks to be executed when the main thread is idle, avoiding impact on user interactions.

Refers to keeping the main thread free from heavy computations or long tasks so the browser can remain responsive to user input and maintain smooth animations.

The frequency at which images are displayed on a screen. For smooth animations, web pages should aim for 60 frames per second (16.67ms per frame).

Jank is a term used to describe visual stuttering or jerky animations caused by long tasks on the main thread or dropping frames.

Passive listeners (e.g., for scroll) tell the browser they won't call preventDefault(), allowing the browser to optimize scrolling without waiting for the JS to execute.

The sequence of steps the browser goes through to convert HTML, CSS, and JS into pixels on the screen. (DOM -> CSSOM -> Render Tree -> Layout -> Paint).

Use modern formats (WebP/AVIF), implement responsive images (srcset/sizes), use lazy loading, compress images, and serve appropriate dimensions.

A technique that delays the loading of non-critical resources (like images or iframes) until they are needed (e.g., when they enter the viewport).

Add the loading='lazy' attribute to the <img> tag. Browsers handle the implementation automatically based on scroll position.

<img src='hero.jpg' loading='lazy' alt='Description'>

Part of the responsive images spec. It provides a list of image sources and their widths, allowing the browser to choose the most appropriate one based on screen density and size.

srcset is for serving the *same* image in different sizes. <picture> is for *art direction* (different crops) or serving different *formats* (e.g., AVIF with WebP fallback).

A modern image format that provides superior lossless and lossy compression for images on the web. It's significantly smaller than JPEG or PNG.

A newer image format that provides even better compression than WebP. It supports HDR and is backed by Netflix, Google, and Apple.

A CSS property that tells the browser to display fallback text using a system font until the custom web font finishes loading, preventing the 'Flash of Invisible Text' (FOIT).

FOIT (Flash of Invisible Text) is when content is hidden until the font loads. FOUT (Flash of Unstyled Text) is when content shows in a system font first, then snaps to the custom font.

Use <link rel='preload'> in the HTML <head>. Make sure to include crossorigin for fonts.

<link rel='preload' href='font.woff2' as='font' type='font/woff2' crossorigin>

The script is downloaded in parallel with HTML parsing and executed as soon as it's ready, which might interrupt parsing.

The script is downloaded in parallel with HTML parsing but only executed after the document has been fully parsed. This is generally preferred for performance.

Preload is for high-priority resources needed for the *current* page. Prefetch is for low-priority resources that might be needed for the *next* navigation.

Informs the browser that your page intends to establish a connection to another origin, allowing it to perform DNS lookups, TCP handshakes, and TLS negotiations early.

A lighter version of preconnect that only performs the DNS lookup for a specific domain.

Minify CSS, inline critical CSS, load non-critical CSS asynchronously, and remove unused styles using tools like PurgeCSS.

The CSS required to render the 'above-the-fold' content (what the user sees first). Inlining this prevents the browser from waiting for external CSS files before rendering.

Change the rel attribute on the fly from 'preload' to 'stylesheet' or use the window.onload event.

<link rel='preload' href='style.css' as='style' onload="this.rel='stylesheet'">

Gzip is the standard compression algorithm. Brotli is a newer, more efficient algorithm optimized specifically for the web, offering 15-20% better compression than Gzip.

<script type='module'> is deferred by default and allows for native ES modules. Browsers only load dependencies that are actually imported.

A dead-code elimination technique used during the build process (by Webpack/Rollup) that removes unused exports from your JavaScript bundles.

The practice of splitting your code into smaller chunks that can be loaded on demand (e.g., per route or per component) instead of sending one giant JS bundle.

Use React.lazy and Suspense or dynamic imports().

const OtherComponent = React.lazy(() => import('./OtherComponent'));

A security feature that ensures the resources (like JS from a CDN) haven't been tampered with. It doesn't affect speed directly but is a standard practice.

Use SVGO to remove metadata, use symbols/sprites for icons, and minify the path data.

Inlining (Base64) saves a request but increases HTML size and prevents caching. Externalizing allows caching but adds an HTTP request.

The image responsible for LCP should *never* be lazy-loaded. It should often be preloaded to ensure it starts downloading as soon as possible.

A new attribute (fetchpriority='high'/'low') that allows developers to give the browser a hint about a resource's importance relative to others.

<img src='hero.jpg' fetchpriority='high' alt='Hero'>

Use the preload='metadata' attribute, use the tracks for captions, and ensure videos are compressed and served in efficient formats like MP4/WebM.

Allows a server to send resources to the browser before it's even asked for them. While powerful, it's complex and often replaced by 103 Early Hints.

An HTTP status code that allows a server to send informational links (like preloads) to the browser while the main response is still being generated.

Load them asynchronously, use 'Partytown' to run them in a web worker, or use 'preconnect' for their domains.

The time it takes for the browser to parse, compile, and execute JS. Even if a script is small to download, it might be expensive to run.

By spawning a new Worker thread for heavy non-DOM calculations, keeping the main thread responsive.

const worker = new Worker('worker.js');
worker.postMessage(data);

Configuring tools like Webpack or Vite to minify code, extract CSS into files, and use content hashing for better caching.

Minification removes white space/comments/variable names (reduces file size). Compression (Gzip) encodes the file to be smaller over the wire (reduces transfer size).

Instead of Loading the whole FontAwesome library, use SVG icons or tree-shakeable icon packages for React/Vue.

Chrome assigns a priority (Highest, High, Medium, Low, Lowest) to every resource based on its type and position in the document.

Use the 'Network' tab in Chrome DevTools. Sort by size or time, and look for long waterfalls or blocked requests.

Setting a maximum allowed size for your JS/CSS/Image assets (e.g., 'no more than 200kb of JS') and enforcing it during CI/CD.

A CDN is a distributed network of servers that serve content from locations closer to the user, reducing latency and offloading traffic from the origin server.

The primary header for controlling caching. Directives like 'max-age', 'no-cache', 'no-store', and 'public/private' determine how and for how long a resource is cached.

'no-store' prevents the browser and intermediaries from ever storing the response. 'no-cache' allows storing but requires re-validation with the server before use.

A unique identifier for a specific version of a resource. The browser sends it in the 'If-None-Match' header to check if the file has changed since it was cached.

An older validation mechanism using timestamps. The browser uses 'If-Modified-Since' to check for updates.

A cache directive that tells the browser to serve the stale version of a resource while fetching an updated version in the background for the next use.

Tells the cache which request headers should be used to determine if a cached response matches (e.g., 'Vary: Accept-Encoding').

'Cache-Control: immutable' tells the browser that the file contents will never change as long as the URL is the same, preventing unnecessary re-validation.

The process of removing a cached resource before its expiry. In front-end dev, this is usually solved by 'Cache Busting' (adding a hash to the filename).

HTTP/2 introduced multiplexing (multiple requests over one TCP connection), header compression (HPACK), and binary framing, reducing the overhead of many small requests.

The next version of HTTP that uses UDP instead of TCP. It solves the 'Head-of-Line Blocking' problem in HTTP/2 and significantly improves connection setup time.

TCP is connection-oriented and ensures packet delivery (reliable but slower). UDP is connectionless and better for speed (potentially unreliable, used in HTTP/3).

A programmable network proxy that runs in a separate thread. It allows for offline support, push notifications, and advanced caching strategies.

'Cache First' looks in cache and falls back to network. 'Network First' looks at network and falls back to cache (good for dynamic data).

A system for storing and retrieving network requests and responses, typically used within a Service Worker for PWA functionality.

Latency is the delay (ping) for a single packet to travel. Bandwidth is the total data capacity (pipe size). For small files, latency matters more; for large ones, bandwidth.

A performance issue where a single delayed or lost packet blocks the entire queue of requests/packets behind it.

Use a fast DNS provider (Cloudflare), minimize the number of unique domains your site uses, and use 'dns-prefetch'.

An HTTP/1.1 mechanism that allows reusing the same TCP connection for multiple requests instead of opening a new one for each.

Brotli (developed by Google) generally offers better compression ratios for text assets compared to Gzip.

Running server-side logic (e.g., A/B testing, header modification, security checks) on the CDN nodes closer to the user instead of the origin.

An algorithm that increases the amount of data sent over a connection gradually. This is why few large files are often faster than many small files.

The multi-step process for establishing an encrypted connection. It adds RTTs (Round Trip Times), which is why 'Preconnect' is helpful.

An OPTIONS request sent by the browser to verify permissions for actual cross-origin requests. It adds latency to API calls.

Use 'simple requests' (GET/POST with specific headers) or ensure the API and Front-end are on the same origin (e.g., using a proxy).

Base64 encoding increases file size by ~33% and isn't cached separately from the HTML/CSS it's in.

WebSockets are bi-directional. SSE is one-way from server to client. For real-time data, both are faster than polling.

Fetch is modern, promise-based, and better integrated with Service Workers. Performance is similar, but Fetch is easier to optimize.

Used to send small amounts of data (like analytics) to a server without delaying the navigation or page unload.

navigator.sendBeacon('/log', analyticsData);

Every redirect adds another round-trip and DNS lookup. Ensure internally links point to final URLs (including trailing slashes).

Directs the browser to close the TCP connection immediately after the request, preventing reuse. Usually should be avoided for performance.

Using the 'importance' field in the fetch init object to hint to the browser how to prioritize the network request.

fetch('/api/data', { priority: 'high' });

Local Storage is synchronous and limited to ~5MB. IndexedDB is asynchronous, structured, and can store much larger amounts of data.

It simulates slower conditions in DevTools, allowing developers to see how the site performs for users on 3G or high-latency connections.

Cold cache: First visit, everything must be downloaded. Warm cache: Returning visit, many assets are already stored locally.

Adding a hash (e.g., main.a1b2c3.js) to filenames. This allows for long 'max-age' caching while ensuring updates aren't blocked by old caches.

Specifies the compression algorithm used (gzip, br, deflate) so the browser knows how to decompress the asset.

Allows the browser to send data in the first packet of a reconnection, reducing handshake latency to zero in some cases.

A method for securely verifying a TLS certificate that avoids the browser having to talk to a 3rd party server, reducing connection time.

In the Network tab, click a request and go to 'Timing'. Look at 'Initial Connection' and 'SSL'.

The DOM is a tree-like representation of the HTML document. Every tag is an object. Manipulating the DOM can be expensive for performance.

The CSS Object Model is a map of CSS rules applied to the DOM. The browser combines DOM and CSSOM to create the 'Render Tree'.

Reflow is the process of calculating the position and size of all elements in the document. It is very expensive and is triggered by changes to DOM structure or styles (e.g., width, font-size).

Repaint happens when changes are made to an element's visibility that don't affect its layout (e.g., color, visibility, background-image).

Use 'transform' and 'opacity' for animations (handled by GPU), use 'requestAnimationFrame', minimize DOM access, and use 'DocumentFragment' for batching.

Happens when you alternate between reading and writing to the DOM in a loop (e.g., read element.offsetWidth then set element.style.width). This forces the browser to recalculate layout repeatedly.

A browser API that tells the browser you want to perform an animation and requests it to call a function before the next repaint. It synchronizes with the display refresh rate.

Hints to the browser that an element will change, allowing it to optimize ahead of time (e.g., by creating a new compositor layer).

A separate 'layer' of the page that is sent to the GPU. Changes here (like transform) don't trigger reflow/repaint on the main page.

Top/Left triggers Reflow. Transform is handled during the 'Compositing' phase on the GPU, which is much faster and doesn't block the main thread.

Avoid deep nesting, use pagination or lazy loading for long lists, and remove unnecessary wrapper divs.

A programming concept (used by React) where an ideal 'virtual' representation of a UI is kept in memory and synced with the 'real' DOM via 'reconciliation'.

A web standard for encapsulating DOM trees. It allows for scoped styles and private DOM structures, which can help prevent large global CSSOM recalculations.

Introduced in Chromium, it allows the browser to skip the rendering work for elements that are currently off-screen. 'content-visibility: auto' is a huge performance win for long pages.

Used with 'content-visibility' to provide a placeholder size for elements before they are rendered, preventing CLS (layout shifts).

Allows developers to tell the browser that an element and its contents are independent of the rest of the page, allowing for aggressive rendering optimizations.

Use 'Windowing' or 'Virtual Scrolling' (e.g., react-window) to only render the items currently visible in the viewport.

InnerHtml is easier but can be slower (parsing string) and is a security risk (XSS). CreateElement is faster for small updates and more secure.

A part of visual CSS rendering where box layouts occur. Creating a new BFC (e.g., via overflow: hidden or display: flow-root) can isolate layout shifts.

When the browser renders HTML before the CSS has loaded. Correcting this by putting <link> in the <head> is a fundamental performance/UX practice.

Offloading rendering tasks (like compositing and painting) from the CPU to the Graphics Processing Unit to achieve smoother visuals.

The process of converting compressed image data into pixels. This can block the main thread. 'decoding: async' on <img> tags can help.

A browser optimization that delays the clearing of the old page's pixels during navigation until the new page has enough content to show, avoiding white flashes.

Setting aspect-ratio prevents layout shifts (CLS) by reserving space for images/videos before they load.

The phase where the browser reapplies CSS rules to the DOM tree. Large CSS files or complex selectors make this slower.

Keep them flat and simple. Descendant selectors (e.g., '.nav ul li a') are slower than simple class selectors (e.g., '.nav-link').

When you read a layout property in JS, the browser is forced to run layout *immediately* to give you the correct answer. Avoiding this is key to smooth performance.

Creating an Image object and setting its src in the background so it's in the browser cache when needed.

const img = new Image();
img.src = 'large.jpg';

A lightweight version of a Document. You append elements to it first and then append the fragment to the real DOM, triggering only one reflow.

In DevTools, open the 'Command Menu' (Ctrl+Shift+P) and type 'Show Frames Per Second (FPS) meter'.

An automated tool for improving the quality of web pages. It provides audits for performance, accessibility, SEO, and more.

A free tool by Google that analyzes the content of a web page, Then generates suggestions to make that page faster. It shows both Lab and Field data.

The most powerful tool for performance profiling. It allows recording page load or runtime and viewing a flame graph of the main thread.

A tool that allows you to run performance tests from various locations around the world using real browsers and at real consumer connection speeds.

A set of APIs for interacting with the DevTools. Used by automation tools like Puppeteer and Playwright to gather performance metrics.

The field of knowledge about making websites as fast as possible.

Synthetic monitoring (Lighthouse) uses a robot. RUM (Field Data) uses real telemetry from your actual users.

A visualization of the network activity on a page. It shows when each resource started loading, how long it took, and its priority.

Use the 'Coverage' tab. It shows exactly which lines of code were executed during the session and which were not.

A tool used in CI to check that your JS bundle size doesn't exceed a predefined threshold.

Mobile tests are run with a throttled processor and slower network (simulating an average device). Desktop tests are run with much faster settings.

In the 'Rendering' tab of DevTools, check 'Layout Shift Regions'. It will highlight elements as they move.

Used to find memory leaks and profile memory usage over time using Heap Snapshots.

Used to inspect and clear storage (Local, Session, Cookies, IndexedDB) and manage Service Workers.

In the Network tab, use the 'Throttling' dropdown and select 'Offline'.

A graphical representation of the call stack over time. Higher stacks mean deeper call nesting; wider bars mean the function took longer.

Ctrl+Shift+F allows you to search through all loaded source files for specific classes or functions.

A specific check performed (e.g., 'Ensure text remains visible during webfont load') that yields a Pass/Fail or actionable advice.

Allows you to manually block specific requests (like tracking scripts) to see how the site performs without them.

Shows a high-level overview of network activity, main-thread activity, and screenshots of the visual load.

A low-level profiling tool built into Chrome (chrome://tracing) that provides even more detail than the DevTools Performance tab.

PSI includes real user 'Field Data'. The extension only runs a 'Lab' test from your specific machine and network.

Yellow tasks are usually JavaScript. Red bars on top indicate 'Long Tasks' (>50ms) that are candidates for optimization.

Visualizes the compositing layers of the page in 3D, helping identify why certain elements are being promoted to the GPU.

A Node library for controlling headless Chrome. Used to automate performance audits and capture metrics in a pipeline.

Look at the 'Reduce the impact of third-party code' audit, which breaks down execution time by external providers.

A Chrome extension that shows the Core Web Vitals HUD (Heads-Up Display) on every site you visit.

Allows you to step through the drawing commands of a specific frame to see exactly how the browser painted an element.

Shows a breakdown of the number of requests and total size by resource type (Document, Script, Style, Image).

Lighthouse 'Accessibility' category checks for ARIA, contrast, and proper tagging which improves navigability speed for screen readers.

These are RUM/Error tracking tools that also record performance metrics and session replays to find issues in production.

In the Performance tab recording, hover over the 'LCP' marker in the Timings track. It will highlight the DOM element.

Allows you to modify CSS/JS directly in the browser and persist them, letting you test optimizations without redeploying.

A DevTools experiment that shows the raw communication between the front-end and the browser core.

A report in Google Search Console that tells site owners which pages pass or fail the 'Good' threshold based on actual user data.

Allows auditing specific interactions (like completing a checkout) rather than just a cold page load.

A tool to monitor and troubleshoot your site's presence in Google Search results, including page speed metrics.

Look at the 'Experience' track in the Performance tab. It will list 'Layout Shift' occurrences and their scores.

A visualization of your JS bundles, showing exactly which npm packages are taking up the most space.

To bridge the gap between developer perception and real user experience, providing actionable metrics to improve speed and conversion.