About us Contact Practical tips for achieving lightning-fast web performance Isabella Dodkins Marketing Manager LEARN WITH PRECIS SEPTEMBER 30 2021 TECHNOLOGY 7 min read 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. Content 01 Why site speed is so important for performance 02 Our top tips for improving website performance 03 What next? 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. Share this Stay in the loop Sign up to subscribe I agree to receive newsletters by email from Precis, from which you can always opt-out. We will process your personal data for this purpose according to our privacy policy Relevant posts Organic and paid search synergies LEARN WITH PRECIS NOVEMBER 25 2021 Interviewing at Precis PRECIS PEOPLE OCTOBER 21 2021 Announcing the 2021 Thesis Award winners COMPANY UPDATES SEPTEMBER 14 2021 Go to blog Google Partner | Premier Google Cloud Platform Partner Services Sales Google Analytics Certified Partner Services Sales Bing Ads | Accredited Profession Facebook Marketing Partner Stockholm Åsögatan 121 116 24 Stockholm Gothenburg Norra Allégatan 5 SE-413 01 Göteborg Copenhagen Esromgade 15, 1, 4.tv 2200 København N Aarhus Viborgvej 161A 8210 Aarhus V Linköping Wahlbecksgatan 25 582 13 Linköping Oslo Møllergata 12-14 0179 Oslo London 4 Hardwick Street Garnault Mews EC1R 4RB Helsinki Vilhonkatu 4B 15 00100 Helsinki Privacy Policy Cookie Policy Manage Your Preferences Yes, we do use cookies We use cookies to personalise content and ads, and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics platforms who may combine it with other information that you’ve provided to them. Learn more by clicking "Cookie Settings" or read our Cookie Policy. Settings Accept all