When a site feels slow, the first suggestion is always to compress the images. Images are the easy answer because they are the visible weight. But image compression has been solved for a decade, and on most of the sites we are asked to look at the images are fine. The delay is coming from decisions made in the design phase, by people who were not thinking about milliseconds.
The four usual culprits
- Fonts. Four weights of two families, loaded from a third-party host, blocking the first paint. This is a typography decision with a performance invoice attached.
- A video in the hero. Autoplaying, muted, several megabytes, decoded before anything else can settle, competing with the very headline it sits behind.
- Third-party tags. Analytics, a chat widget, a heatmap tool, two ad pixels and a consent banner, each added by a different team, none ever removed.
- Scroll-animation libraries. A whole framework loaded so that three sections can fade upwards, when six lines of CSS would do it and cost nothing.
Every one of those was a design decision. That is the good news, because design decisions can be re-made.
What it costs you
The number that matters is how long before the visitor sees the thing they came for. On a mid-range phone on a real network, a hero video and two font families can push that past three seconds, which is roughly where people start leaving. The cruel part is that this hits your least patient traffic hardest: paid campaign clicks, on mobile, arriving cold.
How to design for it instead
- One family, two weights, self-hosted, with a system fallback that is close enough in metrics that the swap does not shift the layout.
- A still frame in the hero, with the video behind a deliberate play. If the video must autoplay, it is content, so give it its own section and let the page paint first.
- An owner for the tag list, and an audit every quarter. Anything nobody can name the purpose of comes off.
- Animation in CSS, driven by the tokens you already have. The library is almost never worth its own weight.
- A performance budget agreed at the brief, in the same paragraph as the brand guidelines: a design constraint, not a launch checklist item.
We treat it as a scope item on marketing sites for exactly this reason: on Shantellé and Thomas Crowther, the type and hero decisions were made with the budget already on the table, which is much cheaper than discovering it afterwards.
The test that settles arguments
Open the site on a real phone, on a throttled connection, and film the first five seconds. Then film a competitor. Nobody argues with the recording, and it turns a technical debate into something the whole room can judge in the language they actually care about: how long the visitor stares at nothing.