Do you know how long your website takes to load? And did you know that if it’s longer than 3 seconds, 53% of mobile users will leave your website?

In the words of Google, “that’s a big problem”.

The problem runs deeper still. Site speed is an important factor not only for UX, but for Paid Search and SEO performance too. If you have a slow website you’re likely to be missing out on a chunk of traffic and converting less of what you do get.

Site speed is so important we’ve written in-depth about the ins and outs of why it matters so much before. And our recent post about Google’s Web Vitals only serves to highlight how important Google considers site performance to be.

We wanted to revisit the topic and delve deeper into a handful of more technical ways to improve the performance of your website. As far as we’re concerned, every website out there should put these five technical site speed tips into action ASAP.

5 Technical Tips to Boost Page Speed

1. Minify your HTML, CSS & JavaScript

When a webpage is loaded, the browser reads every character that’s written into the code. Often, this will include characters used for comments or formatting, unused code, unnecessary definitions and other code that could be removed without impacting the way the code works.

These are sometimes added to increase the readability of the code but aren’t required for it to function. Removing excess code will reduce the amount of code that needs to be read, and transferred, in order for the page to load, increasing the page’s speed.

There’s a whole host of tools available to easily do this online for free, such as Uglify JS.

For instance, from the perspective of the browser, these 2 code samples are functionally equivalent, but the second is significantly shorter and therefore loads faster.

2. Optimise Images

We often see that poor image optimization is among the top offenders when it comes to slow site speed. While we all want high-quality images on our site, there’s a fine balance between image quality and site speed. There are many ways to optimise images, but here’s three.

Firstly, ensure that the image you upload to your site is the same size as the one that will be shown on the screen - there’s no point in making the browser load a large image just for the user to only be shown the smaller version.

Secondly, using the correct image format can not only improve how fast the page loads but also how good the image looks on site. This tool can help make recommendations for which resolution and format you should use for each image on your site.

Finally, image compression is the process of finding the optimal encoding for an image, based on its content. This can further reduce the size of your images and improve site speed. Tiny JPG allows you to easily compress JPG and PNG images.

You can significantly decrease your image’s size without compromising on quality.

3. Enable Text Compression

Speaking of compression, compressing your HTML, CSS and Javascript can further improve your site speed. This is a process which transforms your code from a format which is readable and editable by a human to a smaller version, which can only be read by a computer. In doing so it replaces similar strings of code with a shorter string and an instruction that tells the site how it is compressed.

Using text compression will significantly improve the performance of your site, but it’s not something that you’ll have to do yourself. This is something that can be done on the server and needs to be enabled – speak to your developer or find out more here about enabling text compression on your site.

4. Remove Render-Blocking Resources

Resources are considered render-blocking if they are not required on the initial load of the site and are loaded at a time before they are needed. For example, non-critical stylesheets and JavaScript that are in the <head> of the document will be loaded before the content in the <body>. This means that the essential content would have to wait longer to be loaded than is necessary.

Luckily, there are a few different ways this issue can be addressed. You can deliver JS and CSS inline, rather than in the head, so it loads exactly when needed and won’t block other resources from being loaded. Media attributes can be used for stylesheets to ensure they only load when necessary for that user’s devices.

Alternatively, or additionally, non-critical JS can be marked with the async or defer attributes to reduce the impact on site speed. Scripts that use the defer attribute are executed once the HTML finishes loading and the DOM is built, whereas async causes the script to be fetched asynchronously but will execute once it’s ready, causing the parsing of HTML. Therefore, the defer attribute is usually better when it comes to site speed!

Chrome DevTools: Coverage tab

Chrome’s DevTools coverage tab lets you know what percentage of your JS and CSS is critical for the first load of the page (in green).

5. Remove Unessential Content

Ok, so this tip is somewhat less technical, but no less essential, than the previous ones. Take some time to evaluate every element on the page and ask yourself “do I really need this?”.

Recently, we completed a project in which we worked with a client on a new mobile website. Each page was carefully interrogated; do we need every image, icon and piece of text. This did wonders for the client in terms of site speed, and the PPC and SEO benefits attached to it. But by removing superfluous content, the user was also able to find key information more easily and reach the conversion stage in the journey more quickly.

Final Thoughts

All of this may seem like a lot of work for a slightly faster site, but if you’re tracking how changes to your site are impacting site speed, user experience and the impact on your KPIs, you’ll see why it’s worth it!

Of course, this post is just the tip of the iceberg when it comes to improving your site speed, but it will serve as a good starting point. Watch this space for more conversion-related content, or watch the recordings of our recent conversion and analytics conference on-demand for more tips about how to improve website performance.