Does Your Website Need a Preloader? When It Helps and Hurts

A preloader is the screen a website shows before the page itself: a logo, a name being written, a counter, a curtain that lifts. On a luxury brand's site it can feel like the lights dimming before a show. On the wrong site it feels like a queue.

We build a lot of them and remove nearly as many. This guide covers when a preloader earns its place, when it hurts, the rules we follow, and the styles that work, with examples on our own site you can try.

A preloader, also called a loading screen or intro animation, is a short screen shown while a page loads, before the content appears. Originally it hid slow loading. Today it is just as often a brand moment, a few seconds that set the mood before the visitor sees anything else.

Those two jobs need different designs. A preloader that covers loading should end the moment the page is ready. A preloader that is a brand moment should be short, deliberate and shown only when it adds something.

When it introduces a brand whose feel matters as much as its information: fashion, jewellery, hospitality, interiors, creative studios. A logo that draws itself in or a name that appears letter by letter tells visitors what kind of place they have arrived at before they read a word.

It also helps when the first screen is heavy. A scroll video hero or a wall of photographs needs a moment to load, and a short branded screen is better than visitors watching a film stutter into place. Our scroll video hero guide explains why those heroes need that moment.

When it appears on every page or every visit. The first time it is an introduction. The tenth time it is an obstacle, and returning customers are the people you least want to slow down. It also hurts when it is long, when it shows a fake progress bar that has nothing to do with loading, or when it is there to hide a site that is simply slow.

And it hurts when it is the wrong kind of business. A clinic's booking page, an online shop's checkout or a firm's contact page should never make anyone wait. Visitors there have a task, and a preloader stands between them and it.

Homepage only. Once per visitor, remembered by the browser so returning visitors go straight in. A couple of seconds at most. The brand's own mark or name rather than a spinner, in the brand's colours. No loading bar unless it is genuinely measuring something.

The page underneath should already be loading normally and be ready the moment the preloader lifts, with scrolling working immediately. Visitors who have reduce motion turned on should skip it entirely. And everything the page says should be in the page itself, not added after the animation, so search engines and fast readers get it straight away.

The logo reveal: the brand mark appears, the name follows and the screen wipes away. Our own homepage does this once per visitor, with the B mark, then the name, then a dark curtain sweeping across. The name reveal: the brand name is written or spelled out letter by letter, which suits fashion and hospitality.

The image wall: a grid of the brand's own photographs gathers while a short counter runs, which suits portfolios and galleries. Our website library opens this way. And the colour wipe: a single band of the brand colour crosses the screen and reveals the page, which is the quietest option and the hardest to get wrong.

Not by themselves. Search engines read the page's code, not the animation in front of it. The risk is speed. If a preloader holds the page back until every image has downloaded, real visitors wait longer and Google's speed measures can suffer. Build it as a short layer above a page that loads normally, and the cost is small.

Measure before and after with Google's PageSpeed Insights. If the main content is slower to appear with the preloader than without it, shorten it or let it lift sooner. For the wider speed picture, read do website animations slow your site down, and for the other details that shape a first impression, what makes a website look premium.