There are so many websites out there that don’t reach their full potential, due to a lack of focus on performance optimisation. Today it’s not enough to have a great looking website, you also need to deliver your content quickly if you want to cut through on an overcrowded digital space.
Here are 10 top tips to optimise the performance of your website.
1. Optimise Images
Images can be some of the most performance hungry assets so it’s important you take steps to optimise them. When exporting your images from image editing tools such as Adobe Photoshop, be sure to select “save for web” and export them in the format best suited to the type of image you are exporting. Adjust the image quality settings to see the visual trade-off between file size and visual quality. If you have a CMS then then you should speak to your digital agency about how your platform optimises the images for different devices and screen sizes, for example you don’t want to serve a desktop sized image to a mobile device.
2. Minify CSS/JavaScript
Code is often written in a format that makes it easier to read, utilising line breaks and spaces. Whilst this benefits people reading the code, it does mean there are a large number of unnecessary characters. This may not have much of an impact on performance with only a few lines of code, but on larger websites with hundreds or thousands of lines, it can have a significant impact.
Minifying is the process of removing all the unnecessary characters and therefore reducing the file size of the code. There are many resources online to aid in the minification process.
3. Enable Compression
Enabling compression of resources such as images, fonts, stylesheets, and JavaScript’s can reduce the size of the files by up to 80 per cent. This can significantly reduce the amount of time it takes for them to be downloaded by the browser and subsequently the time to complete the first render of your pages. This is a simple thing to achieve and can reap huge rewards.
4. Cache Static Assets
Caching is the process of storing data in memory so that it can be served much faster for subsequent requests, without the need to download it over the network again. Setting long caches for static assets such as images, fonts, styles, and JavaScript’s reduces the number of requests that are made to the server and prevents users from repeatedly downloading the same assets when they revisit the same pages on your site. However, there should be a strategy in place to trigger a fresh download if an asset is updated – a process known as cache-busting.
5. Lazy Load Larger Assets
Normally when a user opens a webpage, the entire page’s contents are downloaded and rendered in a single go. However, there’s no guarantee that the user will actually view all of the downloaded content in which case it is wasting memory and bandwidth.
Instead of bulk loading all the content when the page is accessed, content can be loaded when the user accesses a part of the page that requires it. With lazy loading, pages are created with placeholder content which is only replaced with actual content when the user needs it.
The benefits of lazy loading are that a user connects to content faster reducing the chances of them leaving the website.
6. Optimise Web Fonts
When using web fonts, try to minimise the number of different typefaces. Each web font will need to be downloaded before it can be displayed in the user’s browser. Different variants like bold and italic are also likely to be separate files. Therefore, by only including variants that are used on your pages you can minimise the number of files that need to be downloaded. You can also reduce the size of the font files by “subsetting”. This means removing characters or “glyphs” that are not going to be used, for example mathematical symbols or special characters.
7. Serve Assets From A CDN
Content Delivery Network (CDN) is a system of distributed servers that deliver pages and web content to a user, based on their geographic location. This service makes the delivery of assets much quicker. A few years ago, this wasn’t so important but as brands are becoming more and more international it’s becoming a bigger priority. You will pay more to store content on the delivery network, but it will give you some real performance improvements so definitely something to think about if you are an international brand or have high traffic volumes.
8. Minimise The Use Of Plugins
Although plugins can improve your website by adding functionality and improving user experience they can also cause some issues. They can significantly slow your site and cause other technical difficulties.
9. Minimise Redirects
Redirects generate additional round trip times (RTT) and therefore double the time required to load the initial HTML document before the browser even starts to load other assets. As such if redirects can be avoided, they should be.
10. Invest In Good Hosting
One of the key things that will impact your website’s performance is how good your hosting is. Investing in your hosting infrastructure is vitally important and ensuring your hosting provider is clear on your performance requirements will help to ensure the right provision is defined. Everything else that can be optimised will make a difference but if you opt for low cost hosting then this will significantly hinder your site’s performance.