isotropic-2022
Share
Blog
Search
Menu

What Is A Preloader? - UI/UX definition, correct usage, examples

By James LePage
 on July 7, 2022

What Is A Preloader? - UI/UX definition, correct usage, examples

By James LePage
 on July 7, 2022

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

Vitra, an office chair company, has an office chair preloader for their "Chair Finder" webapp.
isotropic-2022-07-07-at-17-59-13
Graham.app counts up to 100. This dynamically changes as the page completes its load, and is accurate.
isotropic-2022-07-07-at-18-00-19
kikk.be preloader is a part of their entrance animation. This screen is displayed as the page loads, and then transitions into that page.
isotropic-2022-07-07-at-18-01-28
co.bo uses typography as their preloader screen

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram