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.
1.) Host
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?
Why?
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.
What?
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?
For many, the answer to this question is simple, they will log onto their WordPress website or Theme Forest, download and install a template and start inserting their own pages and posts, this is fine and a great way to get a website up and running in quite frankly, minutes. The issues with pre-built themes is that 90% of the time they are jammed full of features that you probably are not even using, they will be including multiple Javascript files, multiple large CSS files and plugins that just bloat the load times of your web pages, however there are many ways to fix this, which I will cover later on in this post.
At StrategiQ, 95% of our web builds are bespokely designed and developed WordPress websites, not only does it allow us to create awesome and innovative sites for our clients, but it gives us full control on how we handle every element on every page, from loading Javascript files in the footer to only installing the necessary plugins we need. If you have the skill set, I would always recommend building your own WordPress themes. If this is not an option then make sure you do research on pre built themes.
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
The bread and butter of every website is its HTML, CSS and Javascript, without these, there isn’t a website, so why not show them some love? Minifying is the process of removing white space, comments and block delimiters, all of these contribute to the file being rendered and loaded faster by the server. Combining these files by their file type, i.e. merging all CSS and Javascript together to make one larger file can contribute to increasing load speeds by reducing the amount of requests the server has to make.
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:
- https://cssminifier.com/
- https://jscompress.com/
- https://developers.google.com/speed/pagespeed/insights/
WordPress Plugins
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:
- https://wordpress.org/plugins/w3-total-cache/
- https://wordpress.org/plugins/autoptimize/
- https://wordpress.org/plugins/bwp-minify/
- https://wordpress.org/plugins/wp-super-minify/
Task Runners
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
Where you load your files on a page is just as important as optimising them. Your webpage is executed and loaded from top to bottom, having Javascript files load in the header stops the page from rendering anything beneath it therefore increasing the load time of the CSS and HTML which is what the user will see, by moving them into the footer, the visual aspect of the website will load quickly while the Javascript will load in the background.
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.
Caching Plugins
WordPress has a large list of caching plugins to its name, my personal favourites are:
- https://wordpress.org/plugins/wp-super-cache/
- https://wordpress.org/plugins/w3-total-cache/
- https://wordpress.org/plugins/wp-fastest-cache/
- https://wordpress.org/plugins/zencache/
6.) Content Delivery Networks (CND)
A CDN is an external server hosted by a company or organisation that allows you to upload and host your static resources, most commonly used for Javascript files, CSS, fonts and images. There are a small amount of free CDNs created by Yahoo, Google and Microsoft. There are also some paid packages with services such as maxCDN and CloudFare.
The real benefits of a CDN lie in how a browser handles requests and downloads, most browsers only allow a small number of downloads to take place at any time therefore reducing the chance of creating a bottleneck. Loading files from a CDN stops this as the file is being download from an external domain therefore allowing many more downloads to take place at one time, increasing the perceived load time of pages. Most Javascript libraries such as jQuery and Angular are all hosted on Content Delivery Networks, so next time you think about using one of these, always check to see if they are hosted on a CDN.
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.
In Conclusion….
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.
