Fast on the connection your visitors really have

Most websites are built and signed off on a fast laptop, on good Wi-Fi, by people who’ve visited the site a hundred times, so everything is already stored in their browser. Most visitors get something very different: a mid-range Android phone, mobile data that comes and goes, and a first visit with nothing stored at all.

For many of them, data isn’t only slow. It costs money. A homepage that downloads 6 MB takes a real bite out of a prepaid data bundle, and plenty of people close the tab before it finishes.

Here’s how to see your site the way they do, and what to fix first.

See it the way your visitors do

Test on a real, ordinary phone. Not the newest flagship. Something mid-range and a couple of years old, on mobile data with Wi-Fi switched off. Use a private tab, so nothing is already cached.

Slow your laptop down. In Chrome, open DevTools, go to the Network tab, tick Disable cache and choose a slow connection such as Slow 4G or 3G from the throttling menu. Reload your homepage and notice how long it stays blank.

Check the page weight. The bottom of the same Network tab shows how much was transferred. That’s what a first-time visitor downloads.

Look at real-user data. When your site has enough visitors, PageSpeed Insights shows data from real Chrome users at the top of the report. It’s measured on your actual visitors’ phones and connections, which matters more than the lab score underneath.

Set a budget

It’s much easier to keep a page fast than to make it fast again. Pick limits for your key pages and hold to them. For a typical business site, we start from:

  • Under 1 MB transferred on a first visit to the homepage
  • Under 300 KB of JavaScript
  • Fewer than 50 requests

These aren’t official figures, just numbers that keep a site comfortable on a slow connection. A photography portfolio needs more, and a simple landing page far less.

Fix the biggest things first

Images

Images are usually most of the weight, and the easiest win.

  • Resize before uploading. A photo straight from a phone is often 4,000 pixels wide and several megabytes. A full-width banner rarely needs more than 2,000 pixels, and an image in a blog post far fewer.
  • Use modern formats. WebP and AVIF files are often much smaller than JPEGs of the same quality, and every current browser supports them. WordPress accepts both, and image plugins or a CDN can convert your existing images automatically.
  • Let phones download smaller files. WordPress creates several sizes of every upload and lists them in the image’s srcset, so a phone can pick a smaller one. Themes that use full-size images as CSS backgrounds throw that away.
  • Lazy-load images lower down the page, but never the main image at the top. WordPress adds lazy loading automatically and tries to skip the first large image. Check that your theme doesn’t undo that.
  • Always set a width and height, so the page doesn’t jump around as images arrive.

Fonts

  • Use one or two font families, and only the weights you actually need. Each weight is a separate download, unless it’s a variable font.
  • Serve fonts from your own domain in WOFF2 format, so the browser doesn’t have to connect to another server first.
  • Use font-display: swap, so text appears straight away in a fallback font instead of staying invisible while the font downloads.

JavaScript

JavaScript costs twice: once to download, and again for the phone to run it. On a mid-range phone, running it is often the bigger cost.

  • Audit third-party scripts. Chat widgets, heatmaps, social feeds, several analytics tools at once. Each one costs your visitors something. Keep the ones someone actually uses.
  • Stop plugins loading scripts everywhere. A slider needed on the homepage shouldn’t load on every blog post.
  • Swap heavy embeds for light ones. A YouTube embed loads a lot before anyone presses play. A thumbnail that loads the player when tapped costs almost nothing.

The server

All of that assumes the page itself arrives promptly. On a slow connection, a slow server makes everything worse. Page caching, and a CDN with locations close to your visitors, cut the wait before anything starts to load.

Design for patchy connections

Speed isn’t only about the first load:

  • Show text first. A page that’s readable before its images arrive feels faster than one that stays blank until everything has loaded.
  • Keep forms short, and make sure a dropped connection doesn’t wipe what someone typed.
  • Offer WhatsApp or a phone number beside your forms, for visitors who find that easier on a poor connection.

Keep it fast

Performance creeps back: a new plugin, a marketing script, a 5 MB banner uploaded on a busy afternoon. Re-test your key pages every month, and whenever something new is added to them.

What Google measures, and what usually fixes it: Core Web Vitals, minus the jargon

Website speed optimization is one of our services, from image clean-ups to server tuning, and every WordPress rebuild is built to stay light.

One useful email a month

Practical tips on keeping a website fast, secure and easy to find. No spam, and you can unsubscribe any time.

We’ll email you a link to confirm. See how we handle your data in our privacy policy.

Keep reading