Page load time: the 3-second rule

When someone clicks a link, the clock starts ticking. How long until they can use it? That's page load time.

• Amazon: every 100ms of latencyWhat is latency?The time delay between sending a request and receiving the first byte of the response, usually measured in milliseconds. Ask AI for more cost 1% in sales
• Google: a 0.5-second delay caused a 20% drop in traffic
• Walmart: conversions increased 2% for every 1-second improvement

The target: under 3 seconds. After that, users leave. Here's what happens during a page load:

1. DNSWhat is dns?The system that translates human-readable domain names like google.com into the numerical IP addresses computers use to find each other. Ask AI for more lookup: Finding where your server lives (20-120ms)
2. TCP connection: Establishing a connection (100-200ms)
3. Server processing: Your server creates the page (50ms-2s+)
4. Download: Sending data to the user's device (varies by connection)
5. Rendering: Browser turns code into pixels (100ms-1s+)

Every step adds up. Fast server + huge images = slow. Clean code + slow server = slow.

Core Web VitalsWhat is core web vitals?Three Google-defined metrics (loading speed, interactivity, visual stability) that measure real-user experience and affect search rankings. Ask AI for more: Google's speed report card

Since 2021, Core Web Vitals are official Google ranking factors.

Largest Contentful PaintWhat is lcp?Largest Contentful Paint - measures how long it takes for the biggest visible element on the page to finish loading, with a target under 2.5 seconds. Ask AI for more (LCP): "Is it loading?"

Target: Under 2.5 seconds. Measures how long until the biggest visible element (hero image or headline) appears. Before this, the page looks blank.

First Input Delay (FID): "Can I use it?"

Target: Under 100 milliseconds. Measures the time between a user clicking something and the browser responding. Perceived performance beats actual performance: a page that responds instantly to clicks but loads slowly feels faster than one that freezes then shows everything at once.

Cumulative Layout Shift (CLSWhat is cls?Cumulative Layout Shift - measures how much the page layout moves around unexpectedly while loading, with a target score under 0.1. Ask AI for more): "Is it jumping around?"

Target: Under 0.1. Measures visual stability, when content shifts as things load, causing accidental clicks. Common causes: images without dimensions, late-loading ads, web fonts that reflow text.

LatencyWhat is latency?The time delay between sending a request and receiving the first byte of the response, usually measured in milliseconds. Ask AI for more vs bandwidthWhat is bandwidth?How much data can flow through a connection at once - like the number of lanes on a highway rather than the speed limit. Ask AI for more

Latency = Speed limit

How long one data packet takes to travel. Measured in milliseconds. Affected by distance (New York to Tokyo = 200ms+), congestion, and server response time.

Bandwidth = Number of lanes

How much data can travel at once. Measured in Mbps. Affected by connection type (fiber vs 4G), network infrastructure, and server capacity.

High bandwidth with high latency is like a 10-lane highway with a 5 mph speed limit, getting one car across still takes forever. Distance creates latency that bandwidth can't fix.

Common performance bottlenecks

Unoptimized images

Images often account for 60-80% of a page's total size. Fix: use modern formats (WebP, AVIF), serve appropriately sized images, implement lazy loadingWhat is lazy loading?Deferring the loading of a resource like an image or component until the moment it's actually needed, speeding up the initial page load. Ask AI for more, use image CDNs.

Render-blockingWhat is render-blocking?A resource (CSS or synchronous JavaScript) that prevents the browser from painting anything on screen until it's fully downloaded and processed. Ask AI for more JavaScript

Browsers stop everything to download and execute <script> tags. Fix: use async/defer attributes, split code into smaller chunks, remove unused JavaScript.

Slow server response time

If your server takes 2 seconds to generate a page, nothing else matters. Causes: unoptimized database queries, overloaded servers, no caching, slow third-party APIs.

Too many HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. Ask AI for more requests

100 tiny files are slower than 10 big files due to connection overhead. Fix: combine files, use HTTP/2What is http/2?The second major version of HTTP - multiplexes multiple requests over a single connection and requires HTTPS, improving load speed over HTTP/1.1. Ask AI for more or HTTP/3, remove unused resources.

Third-party scripts

Analytics, chat widgets, ad networks, each adds weight. One company found removing a single tracking script improved load time by 1.2 seconds.

Tools to measure performance

Quick reference: Performance metrics