Increasingly over the last few years, Google has been placing more precedence on website performance. In particular, site and page speed has been worked into a core aspect of their ranking algorithms. Despite this, it’s incredible how many websites there are out there that have not been optimised and are missing out on vital opportunities. Below we outline our 7 top tips for optimising your website for page speed.
1. Choose a Reliable Host in Your Target Location
It should be no surprise to you that your web hosting and more broadly the servers your website uses plays a large role in your overall site speed and performance. If your website is hosted on an unreliable server, then your site is likely to mirror this unreliability. Virtual Private Servers (VPS) are some of the most dynamic and reliable options available to website owners. Whilst a VPS is technically on a shared server, each VPS rests within a separate node. This virtual separation means your website will never experience slowdowns due to another platform, making VPS hosting a reliable, cost-effective alternative to a dedicated server.
Not only this, but many experts also acknowledge that the location of the datacenter your server is housed in also plays a role in the performance of your website. For example, if you have a website aimed at a UK audience, you should aim for your services to also be based in the UK. Simply put, the data on your website travels through a network of cables and the further the data has to travel, the longer it takes for your site to load.
2. Utilise Dynamic Caching
Some websites serve a visitor with a fresh page every time they visit the same website. If your website is constantly changing this is necessary, but in reality, it’s not needed all the time. Serving a new page every time a visitor comes on site places a load onto the database and CPU. Generating the page for the user also takes time, which can cause delays for visitors.
To get over this, dynamic caching is recommended. The idea behind this is to create a saved version of the page people are visiting and save that within their cache, meaning it doesn’t have to be created for them every time they visit the site. This is a faster process but also it lowers the strain on servers and frees up those resources for other parts of your website. A final upside to this is that your site will be able to hold more visitors.
3. Deploy a Content Delivery Network (CDN)
On your website, there are lots of components that remain the same for long periods of time, or ever. Because these are relatively unchanged, it’s good practice to serve these resources to users from a server that is nearest to them.
A CDN or Content Delivery Network will analyse the IP address of the user visiting your site and will make the decision to send the required components from a server that is closest to the user’s location. Through this process, people from completely different sides of the Earth will experience similar load times.
There are a lot of aspects to implementing this correctly, so if you’re not a techie, please consult an expert if you would like to take on this task. However, there are some plugin options available that can assist with the work, particularly if your site is built with WordPress. Be careful about just letting a plugin loose on the code of your site, verify that the changes it wants to make will not negatively impact the user experience of the page.
5. Defer and Inline CSS
This is essentially the same task as point 4, however it’s targeting another language that is a cornerstone of website construction: CSS. There is a finer line to work with deferring the loading of this code, because the CSS is what usually visually composes the different elements outlined by the html. If we delay the CSS our pages will not look good!
The solution to the above problem is to inline the code that is above the fold. The fold means the area of the website that loads before you have to scroll down. By inlining this code, you separate the CSS that defines the area above the fold and insert them directly into the code for every page, as opposed to on a separate stylesheet. This means that section will be loaded instantaneously. Once the rest of the page has been rendered, the CSS files can then be loaded.
To implement this, you’ll have to firstly, get the essential CSS for the above the fold section. Admittedly, this can be quite a difficult task, but there are more online tools that are capable of doing this for us. In some cases, it’s as easy as typing in the URL of your site and it will provide you with the essential CSS you are looking for.
You will then need to take this code and insert it into the key pages of your site. Again, enlisting the help of a professional is a good idea if you want to ensure the implementation is perfect.
6. Implement Lazy Loading on Images
Even for those who are extremely cautious with their images, they will usually take up the majority of the size of a page. Especially when you consider the size that some images are uploaded, which can be hundreds of MB. As a result of this, it becomes important to only load images when a user is actually going to be viewing them.
The answer to this problem it to implement a lazy loading strategy. Lazy loading essentially means that an image is only downloaded when the user has scrolled far enough down a webpage to view it. If all the images are loaded onto a page at the very beginning, it will take a long time, and the user might not even get far enough down the page to see them. It’s a waste of resources for both the user and yourself.
As with the previous two points, this is a difficult task to execute manually. There are options that can speed up the process, particularly if you operate on a WordPress site, where there is the Jetpack plugin. There are a whole host of features that this plugin can help with and lazy loading is one of the most useful.
7. Cutting Excess Code
Depending on what platform your website is built on, there could be a huge amount of code that is included into the templates but doesn’t help with your site in any way, shape or form. Reducing this will help the page load faster. As an example, WordPress adds lines of code that lets emojis be rendered. Whilst this is a feature with its benefits, you have to weigh up whether it’s better to cut those lines or to keep them for the added functionality they add.
The seven options we’ve outlayed above are a mix of optimisations for servers and on page. By approaching the task of speeding up your site from both these angles, there should be a lot of progress to be made. By improving the load speed of your site, you’ll improve the site not just in the eyes of search engines, but users will have a better experience which is one of, if not the most important factor to optimise for.