If you have a website, you probably know the frustration and struggle of having people leave your site within the first 5 seconds and not knowing how to make them stay longer. It’s a common problem, but still a problem nonetheless.
You can always work it out to make your site speed up the loading process, but there are also preloaders. If you can’t make your site load in less than one second, set up a preloader so that your website visitors have something to stimulate their eyes while waiting for those couple of milliseconds.
What is a Preloader?
Preloaders are the animated icon or animation that users see when they reach a website and the page is still loading its content. If you have browsed the Internet, you’ve definitely seen a preloader. They most commonly appear as a circle with the outline going in circles that are positioned at the center of the page.
However, preloaders have also come to mean complicated animations that retain users’ attention on your page even while the page is still loading. These complicated animations could either be created by web developers or made with an external online tool like a plugin if you have access to a WordPress plugin and can use it on your website. Using preloaders for a WordPress website is exactly what I want to share in this post, but not before we get into the why’s of getting one.
Why You Should Get a Preloader
Have you ever gotten to a page and the loading icon keeps going on and on and you don’t know whether the content will still appear or you should just exit the tab. More often than not, I lean towards the latter. That’s just from personal experience but I imagine a lot of people would too. Google itself did a research that showed more than half of people will leave a web page if it takes more than 3 seconds to load.
Some websites are even worse because there’s no loading icon at all – just a blank white page. What that gets you is a higher bounce rate. Preloaders are definitely essential these days as attention spans get shorter and Internet connections grow stronger and faster. If I have to spell it out for you, here are a couple of purposes that make preloaders worth the effort:
- To inform users that your website did not hang or crash, and the page is just loading
- To give your users something to stimulate their eyes or brains with as they wait for the content to load
- To reinforce your branding and make an impression (some preloaders allow you to customize it so that your own brand is front and center even before users see your content)
How to Add a Preloader to Your Website
Preloaders are doable on any website using any hosting site as long as you know how to tweak the HTML or CSS codes. With loads of ready to copy-and-paste codes on the Internet, you can put a preloader to your website just by following the process in tutorials. In this section, we won’t get too technical. Like you, I want to find the easiest way to do this. So, here are some of the easiest ways you can add a preloader to your site without jQuery.
SpinKit Animated Preloaders
There’s at least a dozen preloader designs that you can choose from and you can access the CSS code by clicking “Source” on the top center. Before that, make sure you also paste these lines of code below the body tag of your website’s HTML code:
Materialize is another rather simpler source of animated preloaders. They have basic loaders which consist of linear and circular loaders. The linear loaders are just a horizontal line with a color animation going to the right to signify loading progress. The circular loaders are the typical circle loaders, but they offer codes for different colors.
This is much preferable if your website is a business website that’s more formal or business-appropriate. Icons and full-screen animations might not look as professional. Still, the different colors could make a little impact on people when they see your loader.
If you want your preloader to be a little different than most websites, browse through the collection at Preloaders.net. They have preloaders categorized per kind of animation or industry. To give you a visual, they have smiley preloaders and preloaders related to money and finance. Those are just two categories but they have at least 15 others. If you want to lessen the chances of sharing a similar preloader with another website, you can buy premium preloaders that would highly be unique to your website only.
Loading.io is a popular resource used by developers and coders themselves. You might encounter this in a number of video tutorials on Youtube. They have a vast selection of animated icons in their icon library, which you can customize. And there’s more—you can also upload your own icon or image, or create and animate your own text to make into a preloader in GIF, SVG, CSS, or APNG.
7 Best WordPress Plugins for Creating Preloaders
The resources above can work for websites from any hosting platform. However, WordPress as we already know have a rich plugin library for anything and everything you want to include in your website and that includes preloader creation.
First on our list is Preloader, the most trusted preloader plugin if we’re going to take the number of downloads as a basis. It’s currently being used on more than 20,000 WordPress websites. And as of this writing, it’s just been updated just days ago. Those are good signs that this is a reliable plugin to use. This plugin allows you to use your own image for a preloader with plenty of customization options. I’m going to let the numbers speak for this one and let you discover the possibilities with this one on your own.
WP Smart Preloader
WP Smart Preloader is quite popular considering its simple preloaders. It’s probably the no-coding-required customization, and also, given the animations are still a bit different from your usual circle loader. They have some kind of hypnotic movement, which is probably why it’s effective in keeping users on the page even if it takes time to load fully.
With 8,000 downloads, this is one of the most used preloader plugins. The best thing about this is that it’s compatible with different browsers, so the preloader would work no matter where your website visitors view your website from.
Preloader Plus is another frequently recommended preloader plugin. From it’s own plugin description on WordPress.org, it can be a preloader but can also act as a “welcome screen” to keep users engaged with your site.
Like Preloader, you can add your own image to the landing page only or to all the other pages on your site. You also have the option to edit the colors, text, time duration of the animation, or use an icon if you don’t want an image. With this plugin, you can also edit the CSS or HTML codes to further personalize your preloader, but this plugin still makes the process 10x easier than doing it without.
BH Custom Preloader
BH Custom Preloader is the only preloader on our list that uses jQuery. With raw tutorials, it can be quite confusing to follow, but this plugin makes it easier to configure. Once you install the plugin, you’ll see it from the Settings side menu.
From there, you can change the preloader image, background color, and the time duration or delay of the preloader. You can also activate it for all pages, which means it will appear every time a user opens a different page on your site or you can have it on the homepage only.
There are only good things rated for this plugin. Flat Preloader is actually one of the top recommendations I’ve found among preloader plugins. Once the plugin is activated, you shall see it on the side menu that appears when you hover your cursor on Settings in the admin page, like the previous plugin.
When you click on Flat Preloader, you’ll be able to see all the preloaders they have on offer, select one you like, and click save changes. The preloaders available through this plugin are more kid-friendly animated drawings, so they’re suitable for websites that are more casual and playful than for business and work.
A word of warning, though, this plugin has not been updated in 10 months. I would normally not recommend plugins that haven’t been updated for at least 3 months, 6 max, but for a simple preloader plugin, it probably wouldn’t impact your website’s performance that much and also wouldn’t have a lot of problems. Just take this into consideration as the plugin might not work well with future WordPress updates.
Loft Loader comes in second to Preloader when it comes to the number of downloads. As of this writing, there are at least 10,000 active installations of it. This plugin has significantly more features than others on this list.
Even with lesser downloads, Loft Loader seem to be superior in terms of the sophistication of the settings. One feature that isn’t available on any other plugin is the option for the users to close the preloader of their own accord. It means Loft Loader’s preloaders are designed to be interactive and engaging enough to guarantee that users will stay through it long enough to have the option to close it themselves.
Coded Preloader is a plugin that you have to install on your WordPress. You can’t install it from WordPress.org, partly also because there is no free version of this plugin. However, it will be accessible from the admin dashboard once installed. It’s made by two designers for a seamless preloader creation that involves uploading an image and selecting an animation in a similar interface as WordPress’ itself.
I added this as an alternative as a lot of the icons and options available in all of these other plugins are roughly similar in appearance. With this, you can be sure that your preloader is unique. It costs between $20 and $60, which isn’t too hefty or risky if it doesn’t work out.
Preloaders are definitely worth getting into if only for the chance of getting more people to stay on your website for longer. The ROI is more promising than the risk of it not working out is threatening for your website. With how quickly audiences are shifting their attention to, you must also try everything that can impact even the slightest positive effect. As regards to this post, I say preloaders it is!