How to make your website load faster and smoother.

February 08, 2018

When you spend your time crafting a stunning looking website, the last thing you want to worry about is how it loads. However, as you will come to realize, that beautiful hero image of a mountain range you are using is taking it’s time to load. So, what can you do in this situation? Well, you need to speed up your website.

There are a few options you can use to achieve this. You could ditch your shared hosting for a dedicated host with a CDN. This option is sure to give your website a boost. However, it’s pricey! As a new business, money is tight and this might not be top of the priority list for where to spend those hard earned dollars.

You could use an image optimization plugin. Let me rephrase that. You should use an image optimization plugin (if you haven’t stop reading this and go put one on you website, I will still be here when you get back). There are some great free options that will squash those images down to a more suitable file size which helps your website to load that little bit faster. However, there is a catch, usually you are limited by how much compression you get, or a maximum file size allowed to be compressed or a maximum amount of images you are allowed to compress unless of course you pay for the premium version.

So, you have compressed your images but your site is still loading slowly. Get a caching plugin. This lets your visitors browser save a copy of certain assets of your website so that when they next come to your website it loads a lot quicker becuase it already has some of what it needs.

So your site is still loading slowly? Well luckily I have a solution for you. Drumroll please…..

A preloader.

What the heck is a preloader? I’ve heard these called many things. Site loader, spinner, spinny thing, thing that spins while my site loads. Here is what a preloader does. When someone comes to your site, there computer is going to be asking the server to send all the bits that make up your site. This takes time and hence why we get the slow loading effect. So while your site is going through this process with your visitor, why not distract them. A preloader is really just two things. An overlay (a colored screen that covers your whole site), and an animated image. The animated image is the important part. It not only distracts your visitor but it also tells them that something is happening behind the scenes and to just hold on while it loads (the object of the game is to get them to not close that tab).

As a web developer I build a lot of websites, which means I build a lot of preloaders. It usually takes me an hour or so to put a preloader on my site, by the time I’ve decided on an image, created an animation, tweaked the animation till I’m happy with it, made sure everything is dead centre and fixed any bugs I find. I thought that I could probably speed this process up. So, I took the idea to my business partner Craig and we set about creating a plugin to do this. It needed to be installed fast (like 30 seconds and the preloader is on the website ready to go fast), easy to use, and fully customisable.

We call it the Coded Preloader Plugin. It makes the process of putting a preloader on your website a breeze. Simply install and activate the plugin, head over to the settings page, choose an image, choose an animation and hit save. Finished!

If you want to get a bit fancy you can. We put in as many animations as we could think of. You can set the speed of the animation. We even threw in an insane mode purely because of Elon Musks insane mode in the Tesla cars (honestly you probably shouldn’t use insane mode for your preloader). There are a ton of styling options from adding fully styled text and headings to overlay colors and more.

Could you put a preloader on your website without this plugin? Sure. It’s really not too hard if you are comfortable with PHP, CSS, JS and WordPress actions and hooks. If that last sentence gave you a mild panic attack I’d suggest going with the plugin approach.

So the best way to get your website loading smoother than a bald dudes head is to use a preloader. I’d recommend implementing some of the above options as well.