Preloaders are animations that are shown before the main content of a website or application is loaded.

In this post we're going to answer the question of what is a preloader, give some real world examples, and discuss when and how they should be used in website and application development.

What is a preloader?

As mentioned before, a preloader is shown before the main content of a website is loaded. Typically, it takes the form of a simple animation that keeps your visitor occupied as your website loads.

Below is an example of a preloader animation. This infinite animation displays as the main content of a website loads. Once that content is loaded, the preloader animation and screen fades out, and the website fades in.

Preloaders are used in a purely aesthetic sense, they don't actually speed up the loading time of a website or application, but they attempted to keep a visitor occupied as the website loads, which minimizes drop off and bounce rates.

They are in the same "family" of skeleton or loading screens, concept made popular by Facebook. Here, you can see an example of a skeleton screen, where the overall layout is displayed, and the shimmer animation is shown as content loads into the structure.

Should you have a preloader?

There's a very active debate about the merits of having a preloader on the website.

Realistically, you don't want to be in a situation where you need a preloader, because Google likes fast loading websites. If your visitor is waiting for several seconds, this is perceived to be bad user experience, and Google penalize your search ranking placement.

However, if you have a heavy webpage, or a web application, a preloader can occupy your visitors for the few seconds that it takes to load everything. Instead of having something load that appears broken, everything loads in at once after it's ready.

Preloaders are great for sites that don't care about ranking, but I wouldn't suggest implementing on on your site unless it's a webapp.

However, the next section we're going to take a look at a few examples of websites that use preloaders, and you'll notice that they are used for artistic effect along side improving user experience on longer loading web applications.

Websites With Preloaders - Examples

Artistic Preloaders

On many high end websites, you'll see "artistic preloaders". These aren't really intended to keep users occupied as the website loads, but instead they are used for artistic effect. Most of these pre-loaders are paired with entrance animations for pages, resulting in a really interesting page load and transition experiences.

Other "preloader" concepts

You may see the word "preloader" in web development used in a different sense. In this section, we're going to take a look at the word preload are used in a different concept - website speed.

Preloading links

Preloading a link means that when a user hovers over a link, the assets from that page are automatically loaded, resulting in a faster perceived loading time.

Read more: https://instant.page/

Preloading assets

This standard web feature allows you to dictate the order in which assets are loaded, which can increase the overall FCP and time to interactivity.

Read more: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

Preloading a cache

Some cache solutions allow you to preload cached versions of pages. Essentially generate a static HTML version of a page which can be served to a visitor much faster.

Keep in mind that these types of preloaders are completely different than a preload are used to keep a visitor occupied as a website loads. There is no relationship between these different preloading concepts.

Conclusion

Preloaders are an animation or screen displayed as the main content of a website or web application loads. It is designed to keep your visitor occupied, as an attempt to minimize the bounce rate. However, my suggestion would be to focus on the overall loading time of your website, instead of attempting to distract a visitor with a preloader.