It would take roughly 0.71 seconds (according to Google) to find an article based around how loading times can affect the behaviour of your users. It’s a huge and important topic to talk about; fortunately for us as developers, there are some great tools and resources to help us build a solid and well optimised website. In this article, I will talk about the steps I go through to achieve this.
Deciding upon a Website Hosting Provider can be a daunting prospect, there are many out there, on the face of it they all provide the same service, but what should you be looking for to get the best value for your money?
The 3 core values you should strive for when building a website are Security, Speed and Reliability. The foundation of these is your hosting provider, the first step is to understand what you need and why? Is your website a small personal blog, an SME’s site or even a high traffic e-commerce website? This is the most basic question you should answer before deciding upon a host. Once you have, you then need to know what types of hosting there is and what would be best for your needs.
Hosting comes in many different forms, the 3 most popular are Free, Shared Hosting and Dedicated Servers.
Free hosting options come with more negatives than they do positives, usually they are run by lone wolves who hire out their own server space, in return they usually ask you to insert banner ads on your website. If you’re after a reliable and speedy service, then free is probably not your best option, although if you’re looking for a way to get your blog up and running quickly, this could be viable.
The most popular and convenient option for the large majority of WordPress users is Shared Hosting. As implied by the name, your website will be sharing hosting with a large number of other websites, this rarely compromises your security but allows hosting providers to offer you an affordable package. The drawback is bandwidth, although some providers may suck you in with an ‘unlimited’ package, this is seldom the case and as soon as you breach your bandwidth limit, the costs begin to stack up.
All hosting providers will offer a dedicated server package, this is just a physical server that allows you to have full control, you won’t be sharing this with anyone and it will allow you unlimited usage with the most reliability, security and speed, which is what we all want! As much as this sounds like the most attractive proposition, they can be expensive and most of the time, based on the amount of control you have, they will need manual configuration and ongoing management – not something everyone has the skill set and/or time to do.
There are still many other options out there and my advice would be to study these, read up about specific providers, read some reviews and make a considered decision based on that.
2.) Should I Buy a Theme or Build My Own?
3.) Image Optimisation
One of the most simple, yet overlooked aspects of increasing a website’s load speeds are images, unfortunately many people are happy with just purchasing an image from a stock website and just blindly uploading it to their blog or using HTML to include it in one of their templates. With the current design trends being all about big bold imagery, it is essential you do everything you can to make sure your users are not sitting waiting for them to load, as much as the days of 56kb dial up are over, we should still follow some simple steps to decrease image file size.
Save for Web
The first step you should take before even thinking about using an image on your website is open it into your preferred Photo Editing Software i.e. Photoshop and saving it for web, this feature allows you to compress the file size of the image by percentage, by default it is set at 100% and by slowly decreasing it until you start losing image quality you can dramatically decrease the size of your image file sizes.
Online Compression Tools
If you do not have Photo Editing Software at your disposal there are plenty of online tools that do the same thing. Optimizilla for example allows you to upload your images and select your desired percentage of compression and then download the optimised images. Other popular online compression tools are:
Image Compression Plugins
There are a number of good, well-supported plugins that take out the manual labour of self-compression. The most popular being WP Smush, after installing and activating this plugin, whenever you upload an image to your media library, before inserting it into your database and uploads folders, it uses advanced lossless techniques to compress the images. This is a free plugin, there is also a ‘pro’ version that gives you better compression, 365 days a year support and allows you to bulk compress images. In my personal opinion, if you have the tools and the time I would recommend using all 3 of the techniques I have spoken about to squeeze the most out of your images.
4.) Optimising, Minifying & Combining CSS, JS and HTML
Online Minifying Tools
There are many minifying tools out there that do exactly what you expect them to do, by pasting in your existing code they generate a minified version that you can simply include in your codebase. Popular tools are:
There are hundreds of WordPress plugins that handle Minifying, many of them also encompass Caching and Combining of said files. I will list my favourites below, but my advice would be to research these plugins before you use them so you fully understand what they can do and provide:
One of the more advanced ways of handling these is by using task runners, the two most popular being Gulp and Grunt. These tools are built on Node using the streaming build system, this means that all file edits are made in memory and no changes are made until told to do so.
There are many good tutorials on the web that help you run through the process of installing and using Gulp and Grunt so if this level of customisation is what you are looking for, I would highly recommend looking further into these.
Placement of Scripts
5.) Enable Caching
The most effective and instantaneous change you can make your load times is to enable caching, once active when a user requests to view a page on your website for the first time, the files generated by the server are stored locally on your machine, so the next time the user requests that page, they can be loaded locally, resulting in faster load times.
WordPress has a large list of caching plugins to its name, my personal favourites are:
6.) Content Delivery Networks (CND)
Google Pagespeed Insights
If there’s one organisation in the world you should trust to let you know if your website is speedy or not, then it’s Google. Not only is this article centered around optimising your website for users, but also for Search Engines such as Google. Luckily for us, Google offer a service called PageSpeeds Insights. By simply entering the URL of your website or a specific page, it gets analysed and you get told exactly how it shapes up in Google’s eyes.
They split up the results into two sections, ‘Mobile’ and ‘Desktop’ with each one giving suggestions on how to optimise your website for speed and user experience. The suggestions are categorised into red (Should Fix), orange (Consider Fixing) and green (Passed). The most frequent issues presented by PageSpeeds are to reduce the amount of ‘Render Blocking’ JS and CSS files in the ‘Above-The-Fold’ content. I mentioned about this in the Optimising CSS and JS section and Google also deem this to be an important part of increasing a website load times.
The tool also provides you with a download link if it recognises that some resources are not as optimised as they could be, I recommend you download them and replace wherever you can.
The techniques I have mentioned above are what I deem to be the most important to building a solid, well optimised web page, there are still many more and I recommend doing as much research as you can on this topic. Not only does this contribute towards SEO, but it also decreases bounce rates, increases conversions and allows your users to have a good experience navigating your website.
If you have any questions about increasing your WordPress website’s loading times, please get in touch with StrategiQ today or contact me on Twitter @lorrycaton.