Not all websites are equal, especially when it comes to website optimisation. Indeed, the speed at which your website loads can mean the difference between a happy customer and losing customers.
As of 2018, Google announced that speed is a ranking factor both for SEO (Search Engine Optimisation) and Ads. It is therefore absolutely vital that all website owners need to pay attention to speed.
It’s not just Google that cares about how fast your website loads. Clients and consumers now expect lightning-fast page speeds when browsing the web. We’ve covered some interesting stats previously about website speed but let’s see some stats specifically on some of the benefits that come with improving your website loading speeds:
- When load time was improved by just 0.1s, bounce rates on product listing pages in retail and travel improved by 5.7% and 5.4% respectively.
- Luxury sites saw an 8% increase in page views per session when load time was improved by one-tenth of a second.
- Walmart saw a 1% increase in revenue for every 100ms improvement in load time.
So you can see that it doesn’t take much improvement to see noticeable upturn in lead generation, sales and enquiries. A little goes a long way.
Know what you’re up against
Before we get into our five practical steps you can use to improve your website speeds, it is important to know how you are currently performing.
Go and check out the official Google page speed tool to scan your website, it will give you a score out of 100 for both mobile and desktop.
Once you have completed this scan, some common suggestions Google gives might include the following:
- Reduce initial server response time
- Reduce unused JavaScript
- Reduce unused CSS
- Properly size images
- Minify CSS/JavaScript/HTML
- Serve images in next gen format
- Defer offscreen images
(The actual list of audits Google tests against is much longer. You can read more on the official docs.)
In essence, all these suggestions are about sending only what is essential over the server to the user on your website. Basically, you need smaller chunks of data, so you need to optimise how that data appears and use modern best practises where possible.
Now, let’s dive in and take a look at what we can actively do to help improve your website loading speeds.
1) Hosting
This is the first place I always look when it comes to setting a website up for success. I can understand that, in an attempt to save costs, most people opt for cheap shared hosting often for next to nothing. However, with hosting, you get what you pay for.
This doesn’t mean you need to pay through the nose to get fast hosting. Simply moving away from shared hosting to VPS or cloud hosting will see a big improvement for you. Some key things to look for in any hosting provider are things like:
- Security & software updates
- SSL certificates
- Caching
- SFTP/SSH access
- Scheduled backups
- Memory, storage, bandwidth
- Any limits imposed on your hosting plan
- Server location
- Uptime
Some very good options for WordPress hosting include: https://spinupwp.com/, https://wpmudev.com/hosting/, and our favourite https://nimbushosting.co.uk/.
2) Unoptimised images
Most web pages are a combination of text and images, with image bytes making up about half of all bytes on a page. Therefore, it is important that images are optimised before being added to your website to send the smallest file sizes possible, allowing for images to be downloaded quicker by the browser.
Firstly, resize your images so they are only at largest size they will need to be on your website. There’s no point adding a 2000px wide image when the largest your image gets on desktop viewports is only 800px wide.
We then need to compress those images before using them, in order to further reduce the file size of the image. We highly recommend TinyJPG for such a thing as it maintains the high image quality while reducing the file size by as much as 70% in some cases. That’s 70% less to be stored and sent over your server to the user. Winning!
Another top tip for making sure you are using next-gen image formats where possible is to use WebP images for modern browsers. WebP is roughly 26% smaller in size than the PNG format and 25-34% smaller than JPEG images. AVIF formats are still very early in development and not as widely supported; however, they are 50% smaller than JPEG with the same quality.
Don’t forget to lazy-load your images as well!
3) Fonts
We’ve touched on images, and it also makes sense to look at the fonts we use on our websites. Fonts can be an easy one to get right if done properly. It’s not always possible as the font you use may only be available via a CDN link or third party link, however if your font is available on Google or open sourced, then I highly recommend self-hosting your fonts on your server.
This means one less external HTTP request being sent by the browser making it quicker for your fonts to load and avoid that annoying FOUT (Flash Of Unstyled Text). Google fonts now allow downloading fonts directly from their site which you can add to your assets folder in your site.
Remember to use display: swap on your fonts to let the browser know it can use a fallback font while this is loading and, if you can, preloading fonts is a great idea to hint to the browser we will need these fonts upfront.
4) Cache
Caching is probably the main thing that will make the biggest difference to your website speeds. Cache essentially takes a snapshot of your website as it currently is and uses this to serve to the next visitors to your website. This makes it quicker as the browser doesn’t have to request all your assets and files every single time.
It is crucial to set up an effective cache policy for your website to avoid this unnecessary fetching of data on each request. Instead you can normally set up cache rules for how long a cache should remain before being cleared, and rules on when to clear the cache such as when updating or adding new content to a page.
One of the best WordPress cache tools I have come across and stacks up with real world testing is WP Fastest Cache. If you’re using WordPress as your CMS (Content Management System), I highly recommend this.
5) Minify CSS/HTML/JS
As we touched on earlier, you want to be sending the smallest amount of data possible to your visitors and that means compressing your files. You can minify your HTML files, CSS files and JS files to remove all whitespace and unnecessary characters, duplication etc in order to create a much leaner file. Smaller file size = a faster download for your visitors. Happy days! Again, if you are using WordPress, I tend to use Autoptimize and recommend them highly. Simple to use, and does its job very well.
So there we have it, five of our go-to website optimisation tips to help speed up your website and delight your visitors every time. If you know you need to speed up your website, but you’re not sure how to do this yourself, why not get in touch with one of our web development experts who can help get you on track with a fast, well optimised website.
