Basic

Request count versus file size

Two different costs are often confused. Many small requests cost connection and per-request overhead. One huge file costs bytes. On HTTP/2 the count is cheaper than it used to be, and on HTTP/1 it is not. Know which protocol you are on before you merge or split.

What you will see

A smaller number than the raw size if the server compresses. If identical, compression is off and that is the first fix.

About 1 min of reading

Try It

Measure the three axes on one page

Count requests

curl -s -o /dev/null -w '%{num_redirects} redirects\n' http://localhost:3000/ ; grep -oE '<(script|link|img)' index.html | wc -l

Before you run it, say out loud what it will print. Then open the answer.

What it prints

The subresource count from the markup, plus what the server adds.

Sum the bytes

curl -s -o /dev/null -w '%{size_download}\n' http://localhost:3000/

Before you run it, say out loud what it will print. Then open the answer.

What it prints

The HTML bytes. Add the CSS and JS tokens to get the page total.

Find the blockers

grep -nE '

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Any synchronous script in the head is a blocker. Each one delays parse of everything after it.

Check compression

curl -s -H 'Accept-Encoding: gzip' -o /dev/null -w '%{size_download}' http://localhost:3000/public/css/main.css?v=20261010

Before you run it, say out loud what it will print. Then open the answer.

What it prints

A smaller number than the raw size if the server compresses. If identical, compression is off and that is the first fix.

Do not judge the count on a warm cache. The second visit transfers fewer bytes and issues fewer requests, which flatters both numbers.

Data Flow

Page to three numbers

1 Count the requests

↓

2 Sum the bytes transferred

↓

3 Mark which requests block first paint

↓

4 Report all three per page

Why this works

What to count first

Count the requests that block the first paint. That set is usually under ten, and it is where the next hour of work belongs.

Where the server helps

Compression and content-based caching remove the bytes axis almost entirely for repeat visits. That is a server setting, not a page change, and it is usually the bigger win.

Examples

Count the requests

A page with 40 requests on a connection that re-negotiates per request is paying 40 handshakes. A page with 4 requests of 500 KB is paying bytes. The fixes are opposite.

HTTP/2 changes the trade

Multiplexing makes many small requests cheap, so splitting into small files stops being a penalty. It also stops being a win, so do not merge for the sake of merging.

Blocking is a third axis

A request that blocks rendering costs time even if it is small and few. Count, size, and blocking are three separate numbers to measure.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← What is actually slow

Previous Lesson

What is actually slow

Next Lesson

Cache headers and the token

Cache headers and the token →