47% of people expect websites to load in less than 2 seconds. If your website is slow, and you can’t speed it up, you may want to add a preloader. In this post we explore what is a preloader and how to add one for free to your WordPress website (even if you can’t code).
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.
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 DP Preloader. While you can use the inbuilt options, you can also use your own by creating your preloader as a GIF elsewhere and upload it to your media directory first. You can then copy the link and pop it into the DP Preloader, 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.
Still need a hand? We can help.
