Skip to content
Digital Agency AwardFounded 2021, the specialist awards body for digital agencies

Guide · Web performance

Website Speed: Simple Fixes That Cut Load Time

Editorial team ·

Website speed is mostly about doing a few boring things well: smaller images, saved files, lighter fonts and fewer scripts. This guide gives a short fix list in the order that usually pays off, plus a way to check each change with free tools.

  1. What to fix first

    Start with images, then caching, then fonts and scripts. That order usually pays back the most for the least work. Images are often the heaviest files on a page, and the fixes need no new code.

    Speed also matters for search. Google said it would start using page experience as part of its ranking systems from mid-June 2021, with the full effect by the end of August. Google called it one of many factors, so a fast page will not rank on speed alone. A slow page still loses visitors who leave before it loads.

    Do not guess at the problem. Run a test first, as the last section shows, and fix what the report flags.

    Sources: Google Search Central Blog, More time, tools, and details on the page experience update

  2. Shrink and size your images

    Big photos slow a page more than almost anything else. Three fixes cover most cases:

    • Serve the right size. A photo shown at 600 pixels wide should not be a 3,000 pixel file. Lighthouse flags images larger than the space they fill.
    • Use a modern format. WebP and AVIF compress better than JPEG and PNG, so the same picture loads faster and uses less mobile data.
    • Load below-the-fold images late. Lighthouse lists offscreen images and suggests lazy loading them, so the first screen loads first.

    Keep the main image at the top of the page out of the lazy group. It is usually the largest item on screen, and delaying it makes the page feel slower.

    Sources: web.dev, Properly size images; web.dev, Serve images in modern formats; web.dev, Defer offscreen images

  3. Cache what does not change

    When someone visits twice, their browser can keep a copy of your files and skip the download. You turn this on with the Cache-Control header on your server. For files that never change, such as logos, fonts and versioned scripts, web.dev gives an example of one year:

    Cache-Control: max-age=31536000

    That number is seconds: 60 x 60 x 24 x 365. Lighthouse flags static files with no cache time or a very short one. If you use a content delivery network or a hosting plan with built-in caching, check that it is switched on before you edit anything by hand.

    Give a file a new name when it changes, such as site.v2.css, so visitors get the new version at once.

    Sources: web.dev, Serve static assets with an efficient cache policy

  4. Fonts and scripts

    Custom fonts can hide your text. Some browsers show nothing until the font file arrives. Add font-display: swap to the font rule, and the browser shows a system font first, then swaps. With Google Fonts, add &display=swap to the end of the font link.

    Scripts can block the page, too. Lighthouse flags a script in the head of the page that has no defer or async attribute. The browser must stop and run it before showing anything. Add one of those two attributes where the script allows it, and move the rest to the bottom of the page.

    Then remove what you do not use. The Coverage tab in Chrome DevTools shows how much code on a page never runs. Old chat widgets, extra tracking tags and unused plugins are common culprits. Each one is another file to fetch.

    Sources: web.dev, Ensure text remains visible during webfont load; web.dev, Eliminate render-blocking resources; web.dev, Remove unused JavaScript

  5. Test with free tools

    Google PageSpeed Insights reports on a page for both phone and desktop. It uses Lighthouse to run a test, and it also shows real-world data from Chrome users where enough exists. You can run Lighthouse itself in Chrome DevTools, and it can test pages that sit behind a login.

    Watch one number above all: Largest Contentful Paint, or LCP. It marks when the biggest item on screen has loaded. web.dev says to aim for 2.5 seconds or less, measured at the 75th percentile of visits.

    Use this simple routine:

    1. Test your home page and one key service page on mobile. Write down the LCP and the score.
    2. Fix the top item the report lists. Change one thing at a time.
    3. Test again. Keep the change only if the number improves.
    4. Repeat monthly, and after any new plugin, font or big photo.

    Scores move a little between runs, so judge by the trend. A drop of several points in one test is not proof of a problem.

    Sources: Google, About PageSpeed Insights; web.dev, Largest Contentful Paint (LCP); Google Developers, Lighthouse

  6. Sources

    1. Google Search Central Blog, More time, tools, and details on the page experience update
    2. web.dev, Properly size images
    3. web.dev, Serve images in modern formats
    4. web.dev, Defer offscreen images
    5. web.dev, Serve static assets with an efficient cache policy
    6. web.dev, Ensure text remains visible during webfont load
    7. web.dev, Eliminate render-blocking resources
    8. web.dev, Remove unused JavaScript
    9. Google, About PageSpeed Insights
    10. web.dev, Largest Contentful Paint (LCP)
    11. Google Developers, Lighthouse

All guides · News · Methodology