Website loading screens and preloaders: why to drop them

Key takeaways

A website loading screen, or preloader, shows a spinner or animation until the whole page has loaded. It feels polished to the designer and slow to the visitor, because it hides content that could have appeared sooner. Drop it and show the headline and main content as quickly as possible, loading heavier parts in the background.

• Preloaders delay the first useful content visitors can see.
• Show the headline and offer first; load images and extras after.
• A preloader often hides a page that is too heavy, so fix that.
• Skeleton placeholders suit apps, not brochure pages.

What is a website preloader?

A preloader is a full-screen animation, logo or progress bar shown while a page's assets load. Some sites show one on every page; others use a splash screen only on the homepage. They became popular with heavy, animation-led templates.

• The most common business website design mistakes
• Web design trends to avoid on a business website

Why do preloaders make sites feel slower?

Visitors judge speed by when they see something useful, not when the last file arrives. Google's Largest Contentful Paint measure reflects this: it times when the main content appears. A preloader that waits for everything delays that moment, so a page that could show its headline in one second makes visitors wait three.

• Perceived vs actual website speed: which one matters?
• Core Web Vitals for business websites

What does a preloader usually hide?

A preloader is usually a sign the page is too heavy: large hero videos, sliders, animation libraries or many third-party scripts. Rather than masking that, reduce it. Compress images, remove unused scripts and load non-essential features after the main content.

• Third-party scripts: the hidden reason your site is slow

Are there any good uses for a loading indicator?

Yes, for specific actions that take time: submitting a form, calculating a quote, searching stock. A small spinner or progress message on the button reassures visitors that something is happening. That is different from blocking the whole page on arrival.

• Form error messages that help visitors finish

What should you do instead of a preloader?

Let the browser show content as it arrives. Put the headline and call to action in the HTML so they appear first, use a correctly sized hero image, lazy load images further down and defer non-essential scripts. Visitors start reading while the rest loads.

• Lazy loading: faster pages or missing content?

What does this look like in practice?

A pattern we see: a template shows an animated logo for a couple of seconds on every page, including when visitors move between pages. Removing it makes the site feel faster immediately, before any other speed work.

• See client work
• Website Design & Development for UK businesses
• Website design review: score your own site in 30 minutes

Loading screen checklist

• Remove full-page preloaders and splash screens.
• Put the headline and button in the HTML.
• Size and compress the hero image.
• Lazy load images below the first screen.
• Defer non-essential scripts.
• Use spinners only for slow actions.

Next step

Load your homepage on mobile data and count the seconds until you can read the headline.