Make your site load in under two seconds

Most small business sites we test take four to six seconds to show anything useful on a phone. Two seconds is not hard to reach. It is mostly four jobs, done in this order.

01Measure first

Before you change anything, write down where you are. Open your home page in a private window, open the browser's developer tools, and run the built-in speed test with the phone setting and a slow connection. That is what most of your visitors have.

The number to watch is the time until the largest thing on the screen has loaded. On most sites that is the first big picture or the main heading. Under two and a half seconds counts as good; we aim for two, so there is room when the page grows.

Run the test three times and keep the middle result. Speed tests jump around, and one lucky run will make you think the work is done.

02Shrink the pictures

Pictures are almost always the heaviest part of the page. Save them as WebP, at no more than twice the size they show on screen, and let the browser pick the right one with srcset:

<img src="garden-800.webp"
     srcset="garden-800.webp 800w,
             garden-1600.webp 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1600" height="1067"
     alt="The back yard in June"
     loading="lazy">

The width and height stop the page from jumping as the picture arrives. The browser works out the shape before it has a single pixel.

03Load fonts early, and fewer of them

Every font weight is another file. Most sites need two: a regular and a bold. Host them yourself, tell the browser about the main one early, and let it show the text in a fallback font while it waits.

<link rel="preload" href="/fonts/body-400.woff2"
      as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "Body";
  src: url("/fonts/body-400.woff2") format("woff2");
  font-display: swap; /* show text at once */
}

How many weights is too many?

If you can count more than three font files in the network list, cut back. A light weight for one heading is rarely worth a tenth of a second on every page.

04Make scripts wait

A script in the head stops the page until it has loaded and run. Almost nothing needs that. Add defer, and the script waits politely until the page is ready:

<script src="/js/menu.js" defer></script>

05Let the browser remember

Files that never change, such as fonts and versioned pictures, can be kept by the browser for a year. Ask your host to send this header for them:

Cache-Control: public, max-age=31536000, immutable

On a florist's site we looked after last spring, these five steps took the home page from 5.4 seconds to 1.8 on a mid-range phone. Nothing was redesigned; the page just stopped carrying what it did not need.