Hands up if you LOVE waiting in queues. Anyone?  

People are hard-wired to hate waiting around – especially on the internet.

Just a few short years ago, we used to patiently wait 10 seconds or more until sites loaded. Now 47% of people expect a site to load in 2 seconds or less, and 64% of mobile users expect a site to load in less than 4 seconds.

Now the bad news. Every 1 second of load time sees another 11% of your potential customers scuttle away faster than a shopper with the last packet of toilet paper on the supermarket shelf.

Fantastic! So speedy sites are the way to go.

Every website owner needs to do some basic speed optimisation on their website. This calls for decent hosting, optimising and compressing your images, and adding and configuring quality caching.

However, what happens if you have taken things as far as you can, but for whatever reason, your site still takes more than a split second to load?

You need to take a leaf out the playbook of movie theatres.

As you wait for the latest blockbuster to start (suitably appropriately distanced from your neighbours), you will see the screen filled with “stuff”.

Promotions for upcoming movies, ads for local businesses, and snack bar promotions. Anything to distract and take your mind off staring at a blank screen and wondering when the movie is going to start. Movie cinemas know that distraction keeps you in your seat and waiting for the movie.

Your website can do the same to reduce perceived wait time through the addition of a preloader. Unfortunately, choc-tops are not part of the deal when you add a preloader.

What’s a Preloader (or Loading Animation)?

A preloader is an animation that shows while your website page is still loading. It gives your site time to compile all the code ready for all the bits to be seen by the viewer.

Preloaders take different forms including progress bars, loading indicators, spinners or creative animations of cartoons, logos or words.

Traditional preloaders come in GIF format, but now we see more pure CSS and SVG format preloaders as they can be easily scaled to all size screens.

In other words, a preloader gives website visitors something to look at while your site is loading as a way to distract them from how long your site is taking to load.

If you can’t speed your site up, then distract your visitors while it is loading!

Of course, if your site is super-fast and loads in under 2 seconds, then no-one will ever see your preloader, so you probably don’t need to add one.

Preloader Tips

If you are considering adding a preloader to your site, make sure that it:

  • Is fast to load. You don’t want your preloader to need a preloader.
  • Doesn’t run too long or too short. It needs to run just enough for your page to load and no longer.
  • Can be branded in your colours or with your logo. It needs to look seamless and not an add-on.
  • Suits your brand. Make sure the preloader design is relevant to your business.
  • Has a sense of fun or seasonality. You get bonus points for a loading animation with a nice touch of humour, or that matches the season. Yes – you can add Christmas preloaders for a dose of extra Christmas spirit.

If your page load time is more than a few seconds, look for animations that explain what is happening (e.g. by adding the word – “loading”) or use percentage bars to show how much longer someone has to wait. These extra clues help to give additional psychological permission for your site to take a bit longer than average.

Heart Harmony Communications Preloader

How Do You Add A Preloader To Your WordPress Site?

There are stacks of free preloader plugins in the WordPress repository.

Like all plugins, you want to choose a plugin that has been recently updated, works with your version of WordPress and is installed on many sites (this is not the time to be a crash test dummy).

Preloader Plugins that I prefer are:

These plugins are simple to add and to configure. They also work with most themes and have a couple of design options to choose from.

Preloaders for Divi

If your site uses Divi theme, I prefer to use the Expand Divi plugin (although I am watching it carefully as it hasn’t been updated for a while).

It is like the Swiss Army knife for Divi and adds a stack of useful enhancements that I use in most sites, not the least of which is enabling a preloader.

The only trick is that you need to create your preloader as a GIF elsewhere and upload it to your media directory first. You can then copy the link and pop it into Expand Divi, click save and you are done.

How Do You Create A Preloader For Divi If You Can’t Code?

Here are a few of my favourite sites that have both free and low-cost preloaders you can customise for your site and then upload as a GIF.

  • Preloaders.net– Heaps of options from classic spinners to text-based and icons.
  • Loading.io – Free and nominal fee options. I adore these and use these on many of my sites.

If you don’t want to add the Expand Divi plugin, then you can still create your GIF preloader and then use some simple CSS to centre it on your page.

If you would like a handy tutorial on adding a GIF preloader to Divi without a plugin, B3 Multimedia has some of the best Divi high-end coders out there and has put an easy to follow tutorial together.

Last thoughts

Adding a preloader to your website is quick, easy and straightforward. If it helps you to retain clients on your site, then it is well worth the half-hour (maximum) investment of your time.

Ingrid Moyle

Ingrid Moyle (BA - Psych/Industrial Relations) is the Chief Web Wizard at Heart Harmony Communications. A self-confessed multipotentialite, Ingrid shamelessly blends her passions of human resources, psychology, web design and copywriting. When not hardwired to her computer, she quests for the perfect coffee while chasing virtual reality creatures across the backstreets of Brisbane.