Performance is part of design

When people talk about website design, they usually mean how a site looks: colours, layout, typography, photography. Speed tends to be filed under "technical", something for a developer to sort out later. But a visitor doesn't experience those as separate things. A beautiful page that takes ages to appear, or that jumps around while loading, simply feels like a worse design.

Many of the biggest performance decisions are design decisions. The number of fonts, the size of the hero image, the background video, the third-party chat widget: all of these are chosen by whoever is designing the site, and all of them affect how fast it feels.

What "fast" means to a visitor

Speed isn't one number. From a visitor's point of view, a page feels fast when:

1. Something meaningful appears quickly. The headline and main image show up promptly, not after a long blank screen.
2. It responds when touched. Tapping a button or opening a menu reacts straight away.
3. It stays still while loading. Text doesn't jump down the page as an image or banner appears above it, making someone tap the wrong thing.

Google's Core Web Vitals measure roughly these three ideas: how quickly the main content loads, how quickly the page responds to interaction, and how much the layout shifts. You don't need to obsess over the metrics, but they're a useful reminder that performance is about experience, not just file sizes.

Images: the biggest lever

On most small business sites, images make up the bulk of what a browser has to download. That makes them the first place to look.

Use fewer, better images

Every image should earn its place. A homepage with a hero photo, six gallery thumbnails, four decorative background textures and a slideshow of eight banner images is asking a lot of a phone on a patchy connection. Often, one strong photo does more than five weaker ones.

Size them for how they're shown

A photo straight from a modern phone or camera can be many times larger than needed. If an image is displayed at 800 pixels wide, uploading a 6000 pixel original wastes bandwidth. Export images at a sensible size, roughly up to twice their display width to stay sharp on high-resolution screens.

Use modern formats

WebP and AVIF typically produce much smaller files than older JPEG and PNG formats at similar quality. Many platforms convert images automatically; if yours doesn't, convert them before uploading.

Load below-the-fold images later

Images further down the page don't need to load immediately. Lazy loading tells the browser to fetch them as the visitor scrolls towards them. Keep the main image at the top loading normally, though, since it's the first thing people see.

<img src="workshop-bench.webp" width="800" height="533" loading="lazy" alt="Hand tools laid out on a wooden workbench">

The width and height attributes in that example matter too: they let the browser reserve the right amount of space before the image arrives, which prevents the page from jumping.

Fonts: beautiful, but not free

Custom web fonts add character, but each font file is another download, and each weight and style is usually a separate file.

• Limit families and weights. One family with regular and bold is often enough. A second family for headings is fine. Loading five weights of two families, plus italics, adds up quickly.
• Consider system fonts for body text. The fonts already installed on people's devices load instantly and are designed for screen reading.
• Avoid invisible text while fonts load. Settings like font-display: swap let the browser show text in a fallback font straight away and switch when the custom font arrives, so visitors can start reading immediately.
• Choose fallbacks with similar proportions to your custom font, so the switch doesn't cause a noticeable jump.

Video and animation

Background videos are one of the heaviest things a page can carry. A looping video behind a headline might look atmospheric on a fast office connection and painfully slow on a train. If the video doesn't explain something visitors need, a well-chosen still photo is usually better.

If you do need video, such as a short tour of a holiday cottage, let visitors choose to play it rather than autoplaying, use a lightweight poster image, and host it on a service designed for streaming.

Heavy animation libraries and scroll effects can also make pages sluggish on older phones. Keep motion light and purposeful.

Third-party extras

Chat widgets, social media feeds, review carousels, booking embeds, analytics tools, cookie banners and advertising scripts each load code from other servers. Individually they seem small. Together they can slow a page significantly and make it unresponsive while they load.

For each one, ask:

• Is this actively used and valuable?
• Could a simple link do the same job? A "See our reviews" link might replace a heavy embedded review widget, and a "Follow us" link might replace an embedded feed.
• Could it load only on the page where it's needed, rather than site-wide? A booking widget probably only needs to live on the booking page.

Removing one unused script can make more difference than hours of fine-tuning elsewhere.

Layout stability

Pages that shift while loading are frustrating. Someone goes to tap "Directions", a banner pops in above it, and they tap an advert instead. Design to prevent this:

• Reserve space for images, videos and embeds with fixed dimensions or aspect ratios.
• Avoid inserting banners or notices above existing content after the page has loaded.
• Make sure late-loading fonts don't reflow text dramatically.
• Give cookie notices a fixed position at the bottom rather than pushing content down.

Design lighter from the start

The most effective performance work happens before anything is built. When sketching a page, think about weight as you would about colour or spacing:

• Does this section need an image, or would a clear heading and short paragraph work?
• Is this decorative effect worth the cost on a slow phone?
• Can this page achieve its goal with fewer elements?

A lean, focused page is usually both faster and easier to understand. Performance and clarity tend to reward the same instincts.

How to check your site

Free tools such as PageSpeed Insights or the Lighthouse panel built into Chrome's developer tools will analyse a page and point to the biggest problems, typically oversized images, render-blocking scripts or layout shifts. Test your homepage and your most important page, such as booking or contact, on mobile settings. Also try loading your site on your own phone with Wi-Fi switched off, somewhere with average signal. That's how many of your visitors will see it.

Performance checklist

• Every image earns its place and is sized and compressed appropriately.
• Images use modern formats and below-the-fold images lazy load.
• Images and embeds have reserved dimensions to prevent layout shifts.
• Fonts are limited to a few files and display text immediately.
• Background video is avoided unless it genuinely helps.
• Third-party scripts are audited, trimmed and loaded only where needed.
• You've tested key pages on a real phone over mobile data.

A fast site respects your visitors' time, data and patience. Treat speed as part of the design brief from the very first sketch, and the rest of your design gets the chance to shine.