Web Performance

HTTP/2 vs HTTP/1.1: What Changed?

HTTP/2 replaces HTTP/1.1’s text-based, one-request-per-connection model with a binary framing layer that multiplexes many requests and responses over a single…

What is the HTTP Request Lifecycle?

The HTTP request lifecycle is the full sequence a browser follows to load a resource: DNS resolution, TCP (and TLS) connection setup, sending the HTTP request,…

What is HTTP Keep-Alive?

HTTP Keep-Alive is a mechanism that reuses a single TCP connection for multiple HTTP requests and responses instead of opening a new connection for every reque…

What is Connection Multiplexing and How Does HTTP/2 Use It?

Connection multiplexing is sending multiple independent logical streams of data over a single shared physical or transport connection instead of opening a sepa…

What Are Edge Caching Strategies?

Edge caching stores copies of responses at CDN points of presence physically close to users, so most requests are served from a nearby edge node instead of rou…

What is Lazy Loading?

Lazy loading is the technique of deferring the loading of a resource — an image, a script chunk, or a component — until it is actually needed, instead of loadi…

What is a Service Worker?

A service worker is a background JavaScript script the browser runs separately from the page, letting it intercept network requests, cache responses, and enabl…

What are HTTP Caching Headers?

HTTP caching headers are response headers such as Cache-Control, ETag, and Last-Modified that tell browsers and intermediate caches how long a response can be…

What Is the Difference Between Reflow and Repaint?

Reflow (also called layout) is the browser recalculating the position and size of elements on the page, while repaint is the browser redrawing pixels for eleme…

What Is the Critical Rendering Path?

The critical rendering path is the sequence of steps a browser must complete — parsing HTML into a DOM, parsing CSS into a CSSOM, combining them into a render…

What Are Core Web Vitals — LCP, FID/INP, and CLS?

Core Web Vitals are Google's three user-centric metrics for real-world page quality — Largest Contentful Paint (LCP) measures loading speed of the biggest visi…

What Are Code-Splitting Strategies and Why Do They Matter?

Code splitting breaks a single large JavaScript bundle into smaller chunks that load on demand — by route, by component, or by vendor library — so the browser…

Preload vs Prefetch: What Is the Difference?

rel="preload" tells the browser to fetch a resource needed for the current page at high priority right now, while rel="prefetch" tells the browser to fetch a r…

What Are Key Image Optimization Techniques for the Web?

Web image optimization combines choosing efficient formats (WebP/AVIF), serving correctly sized responsive images via srcset, lazy-loading offscreen images, an…

Gzip vs Brotli: How Do These Compression Algorithms Compare?

Gzip and Brotli are both lossless HTTP content-encoding algorithms that shrink text-based responses (HTML, CSS, JS, JSON) before transfer, but Brotli generally…

What Was HTTP/2 Server Push, and Why Was It Deprecated?

HTTP/2 Server Push let a server proactively send resources (like CSS or JS) to the client alongside an HTML response, before the browser even requested them, b…

What Are Resource Hints (preload, prefetch, preconnect)?

Resource hints are HTML/HTTP directives such as preload, prefetch, preconnect, and dns-prefetch that tell the browser to start network work — connecting, resol…

What Is the Difference Between defer and async Scripts?

Both defer and async let the browser download a script without blocking HTML parsing, but defer additionally guarantees execution happens after parsing finishe…

What Is List Virtualization and Why Use It?

List virtualization (or windowing) is a rendering technique that keeps only the small subset of list items currently visible within the scroll viewport mounted…

What Are Service Worker Caching Strategies?

A service worker caching strategy is the policy a service worker’s `fetch` event handler applies to decide whether a request is served from the Cache API, the…

What Is a Progressive Web App (PWA)?

A Progressive Web App is a website built with a web app manifest and a service worker so it can be installed to a device’s home screen, launch in its own windo…

Repaint vs Reflow: How Do They Affect Rendering Performance?

Reflow (layout) recalculates the position and geometry of elements across the page and is expensive, while repaint only redraws pixels for visual changes like…

What Is requestAnimationFrame and When Should You Use It?

requestAnimationFrame schedules a callback to run right before the browser’s next repaint, synchronizing JavaScript-driven animation with the display’s refresh…

What Is the Intersection Observer API and Why Use It?

The Intersection Observer API lets you asynchronously detect when a target element enters or exits the viewport (or another ancestor element), without the expe…