Technote

Performance optimization Practical

Series Web infrastructure on a shoestring Part 4 of 8

Where the least money buys the most speed

Images are usually the heaviest part of a page, and shrinking them costs almost nothing if you do it in order. The CDN belongs at the end, not the start.

People often reach for a bigger server first. But a large share of what a visitor waits for is not the server thinking — it is the browser downloading files. And most of those bytes are usually images.

Happily, images are the line item you can shrink for almost nothing. You just have to work in order; skip the early steps and jump to the later ones and you spend money without gaining much.

The order, top to bottom

Four steps for images — the higher the step, the cheaper and the more it gains

The first step is most of the work. Photographs off a phone or camera are far larger than any screen needs. Put a 4000-pixel original into a column 800 pixels wide and the visitor downloads every pixel they will never see. Thirty seconds spent resizing to the width it will actually display at beats all the later steps combined.

Relative weight of three ways to prepare the same photograph — a concept diagram; real ratios vary per image

The second step, format conversion, belongs to a plugin. Modern formats hold the same picture in fewer bytes, and the standard approach serves the older file to browsers that cannot read them. It is a textbook case of free tooling being entirely sufficient.

Third, lazy loading already ships with WordPress: images below the fold wait until you scroll, so the first screen arrives sooner. One exception — never lazy-load the large image at the top. Delaying the thing that should appear first only makes the page feel slower.

The CDN belongs at the end

A CDN keeps copies of your files near your visitors and serves them from there. The benefit is real and, at the scale of a small business site, a free tier often covers it — there is little reason not to have one.

But a CDN does not make files smaller. A heavy file delivered from nearby is still a heavy file. That is why the order matters: bolt on a CDN while skipping the first three steps and you have merely sped up the delivery of a heavy page.

One common trap worth naming: stale images that refuse to update, which happens when you replace a file and reuse the same filename. Getting into the habit of changing the filename whenever you change the picture removes the problem entirely.

What is left afterwards

Once images are tidy, the remaining weight is usually scripts and fonts. Those are decided by your theme and plugin choices, so it stops being a page-level fix and becomes a question about your setup — which is exactly where the upgrade decision later in this series picks up.

Speed material is collected in the performance archive, and sorting images, caching and server configuration out in one pass is what our optimization program covers.

Next part

Mail is next: send it yourself or hand it over? The following part works out exactly where deliverability and cost trade against each other.

More on this topic

All technotes

Performance optimization Practical

Who pays for the milliseconds a tag adds?

A tracking script does not stop at downloading. While it is parsed and executed the main thread is busy, and a busy page ignores fingers. That cost is…

Marketers 5 min read

Performance optimization Practical

The object cache: what Redis actually removes

Repeated identical lookups disappear. One slow query does not. Miss that distinction and you will wire up Redis and then ask why nothing got faster.

Developers 7 min read

Performance optimization Practical

This is how a landing page gets heavy

Nobody decides to make a landing page heavy. It accumulates: one addition per campaign, and nothing ever removed when the campaign ends.

Marketers 6 min read

₩270,000 · Join the program