Why your site feels slow on mobile data

A client called last month to say their new website was fine on office wifi and unusable on the road. Nothing was broken. The homepage was simply asking a phone on 4G to download nine megabytes of photographs before it showed anything.

Where the weight actually is

On almost every site we audit, images account for most of the page size. A camera produces a 4000-pixel-wide file; a phone screen shows it at 400. The other 3600 pixels are downloaded and thrown away.

• Export at the size the layout actually uses, then double it for retina screens.
• Save as WebP, which is usually half the size of the same JPEG.
• Add width and height attributes so the page stops jumping while it loads.
• Let anything below the first screen load lazily.

Then look at the fonts

Four font weights from two families is eight files before a single word appears. Two weights of one family covers most designs, and the page renders sooner.

If the first screen takes longer than three seconds on mobile data, most visitors never see the second one.

Measure before and after

Run the page through PageSpeed Insights and note the mobile score. Fix the images, run it again. On the client site above, that one step took the homepage from nine megabytes to nine hundred kilobytes, and the score from thirty-one to eighty-four. Nothing about the design changed.

If you would rather not do this yourself, it is part of every care plan we run.