Practical tips for achieving lightning-fast web performance

Building a website isn’t a fast process. There are a myriad of issues to work through, and an extensive checklist of tasks to tick off. In the midst of all this complexity, there is one key area that cannot be underestimated: site speed.

Sure, your website may look great, and the UX design might be off the scale. But if any aspect of your website is slow to load, if there’s a lag when navigating around its pages, no one is going to stick around long enough to admire the finer points of your cutting-edge design.

Why site speed is so important for performance

The online marketplace is an intensely competitive ball game. When a web visitor – and potentially a customer, remember – lands on your website, they’re at least looking to browse your services, perhaps looking to make contact or buy from you. And, if there’s a delay in loading your pages, they’ll bounce – literally.

Slow page speed is a massive turn off for online shoppers, and the stats speak for themselves. This piece from WebsiteBuilderExpert quotes data which says that, if a page loads in two seconds, it has an average bounce rate of just 9%. Move that page loading speed to five seconds – which doesn’t sound particularly slow, really – and that bounce rate bumps up to 38%.

High bounce rates have an impact on how search engines rank your website. Visitors landing on your website and bouncing off almost straight away? Your website can’t be delivering much value – brace yourself for a plunge down the rankings hierarchy.

So, with all of this in mind, and fully on board with the importance of site speed and performance for a new, or re-launched website, the team here at Precis wanted to share some insights about how we achieved all our goals when approaching our own project.

When the new Precis website was launched in spring May 2021, successfully completing an assignment that was eight months in the making, from start to finish, we ran a test to determine both the speed and the performance of the site.

We were delighted with the result, as well as achieving a lighting-fast website, we also made a huge impact on organic performance, upping user sessions 16.76%, average time on page 20.41% and reducing bounce rate by 12.41% (data 4 months after launch compared to the same period in 2020):

Precis Digital site speed on day of launch 26/05/21

Our top tips for improving website performance

So, how did we achieve such high-performance scores and speed metrics? WordPress Developer Marcus Oskarsson, of Awave AB, was the lead developer who worked on the website and shared his top tips for achieving speedy web performance. Over to you, Marcus…

1. Reduce resources on page loads

“This was one of the most important practical steps I put in place. I lowered the volume of resources that are loaded on page loads. So for example, the site menus don’t load until you are actually on the menu header itself. What this means is that the first thing Google reads is the actual content of the page itself, and not the menu. I also implemented AJAX (used in web applications to help create dynamic, and fast, pages) as soon as the page has finished loading so that overall the amount of code is minimised and the browser can load it after you are actually on the page.”

2. Prioritise content and text

“Designers might love images and of course, they look great on a website. But when it comes to building a website with a fast loading speed, the content and text need to come first. Because of Google’s use of FCP – First Contentful Paint – the first thing you see when visiting a website should be actual content, otherwise, Google will punish you.

Then, of course, we did add images, but we used WebP, which is Google’s own format for pictures instead of jpg, or png. WebP images are smaller, so this helps with faster loading speeds.”

3. Use utility class coding

“I used something called utility classes a lot. What this means is that, let’s say I have code for how sections on the website should look like, I can then reuse this over and over again across the site – which then lowers the amount of code needed overall.

So, I have one file for each ‘block’ with one block usually containing four or five files – CSS, PHP, JSON, javascript. But on some blocks you don’t actually need javascript so again, I have minimised the amount of code needed on some blocks.”

4. Don’t always load CSS

“Again, much like above, be clever with what you do and don’t need to load. With this website, the CSS file is not loaded unless it shows on that exact page and the same for the javascript file. Often when you load one page, even if it doesn’t have CSS on it, it will load CSS anyway when it is present in other areas of the site – but the Precis site doesn’t do this.

Our site doesn’t load the entire site CSS in one file. We divide it into smaller assets and only load them when it’s corresponding block is used on a page. So, the content is loaded first but with a smart caching solution you don’t get the ugly look of Times New Roman in black and white before the page is loaded. Just be mindful that old browsers might not be able to handle this solution.

Overall, I would say just be smart about the resources and when they load on the page.”

5. Managing mobile

“With mobile – which is often when users expect a faster-loading website as they’re visiting on the move regularly – here are two ways to approach it.

One is to make the code for mobile and desktop separately and always load both. However, for our site, we have a script that checks for what a user agent is and then loads the right code when someone is on a particular device. The idea of building a site where code loads at the same time for people who resize pages doesn’t work out in reality – people just don’t resize often enough to justify that amount of code.”

What next?

If you’ve enjoyed this article (and the fast website it’s hosted on), be sure to follow us on LinkedIn for more top tips and how-to’s across all the digital marketing disciplines.