How to build really fast websites for your clients (and increase their SEO rank)
As a web development partner for branding and creative studios, our focus has always been on design quality, above all else. However, in 2020 we saw a shift in the market – even our most artistic and pure creative agency clients started to ask questions about site speed and its impact on SEO.
In this blog post, I want to take a look at some of the more common questions we get from agency clients about site speed. I’ll look at why site speed is so important, what website features affect it the most and how you can monitor it. I’ll then give you some tips on how you can improve site speed for your clients.
Why is site speed important?
Site speed and conversion rate
You’ve designed a beautiful website – it’s pretty image and graphics heavy, full of amazing custom animations.
A month later you take a look at Google Analytics because you’ve noticed that when you’re visiting the website, it loads quite slowly. Even worse: inbound enquiries are more dripping tap than steady stream.
As you can see from the graph to the right, site speed has a significant impact on conversion rate. The team at [Skilled.co] investigated and found that even a 1 second delay causes a 7% reduction in conversions.
Keeping site speed in mind at the very beginning of a project can have a significant impact on the success of new web design projects, saving you time and money.
If you think about your own website use – how often have you left a webpage because it was loading slowly? We live in a time-poor world and most website visitors will react in the same way. This drop off is even more dramatic on mobile, where browsers are notoriously fickle!
Site speed’s impact on bounce rate
Site speed is ultimately a measurement of how long it takes pages to load for a visitor. But visitors don’t land on a whole site at once – you visit a particular page and may go on to others, or bounce. And the rate at which visitors bounce is 100% affected by the time it takes that page to load.
Section.io’s blog post from 2017 is still relevant today: ‘a very slow time to first byte or start render time could mean visitors leave your website before the first page has even loaded.’
Bounce rates can be significantly affected by slow site speed – with sites that have an individual page load speed of 7 seconds experiencing a bounce rate of 32.3%. When you compare this with pages with a relatively fast page load – around 2 seconds – only seeing a bounce rate of 9.61%, it makes the time it takes for a page to load pretty important to that website’s success.
Designing pages that excite a visitor, make them want to read more and provide an enjoyable experience but are light and load quickly – that’s the holy grail.
Speed is a Ranking Factor for Google
Site speed has a direct impact on the overall performance of your client’s websites, particularly their SEO rank.
Google have included page speed in their SEO ranking analysis since 2010, in a considered move towards improving user experience on the web. Put simply: the faster your client’s website loads, the better their website will rank in Google search results, the better their conversion rate.
But what do the Google crawlers look at to assess site speed? The Core Web Vitals are a list of tests the Google bots perform on a website to determine page speed (among other things). These include:
- “LCP is a measurement of how long it takes for the main content of a page to download and be ready to be interacted with. What is measured is the largest image or block of context within the user viewport. Anything that extends beyond the screen does not count. Typical elements that are measured are images, video poster images, background images, and block-level text elements like paragraph tags.”
- In plain English, Largest Contentful Paint considers how long it takes for the main piece of content on the page to load in. This is typically the content in the ‘hero’ area of a website.
- CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
- Have you ever loaded a website and as you try to read it, the content keeps jumping around as more content loads in? Super annoying. And Google tracks how much this is happening on each page.
How to Easily Check Your Site’s Speed
There are a number of tools that can track site speed but they all do so slightly differently. This is why we’d recommend using a variety of tools, not just one. I’ve outlined the 3 we use most frequently below.
I can’t explain it better than Google themselves: “Lighthouse is an open-source, automated tool for improving the quality of web pages.”
Lighthouse will give you detailed reports on where a site is doing well and where it can improve – with all areas scored out of 100. It can be a great tool for monitoring your client’s websites for any issues that might come up.
At Lattimore & Friends, we use Google Lighthouse the most out of these three tools during the development phase of a project.
You can run Lighthouse from Chrome DevTools (right click & ‘Inspect’ then move to the ‘Audits’ tab), or as part of a PageSpeedInsights report. The two are both made by Google but measure different things – PageSpeedInsights measures page speed performance only, whereas Lighthouse is a more comprehensive tool, measuring for example SEO and site accessibility (to those with disabilities). PageSpeedInsights also uses both real data (from Chrome users) and lab data, whereas Lighthouse (and the other tools below) only use lab data.
GTMetrix’s reports use Lighthouse (so lab data) to power part of its criteria, combined with its own experience data. The GTMetrix Grade ‘blends how fast your page performs (in terms of loading, interactivity, and visual stability) with how well it’s built for optimal performance.’
This means that the grade takes into account both the structure of the website being tested and the performance that the user experiences.
It uses this report to then offer guidance on how the score can be improved – split out into structural changes and performance related changes, among others. Like Lighthouse/PageSpeedInsights, GTMetrix gives you a list of priority areas to focus on, with a traffic light colour scheme.
Much like the other tools, Pingdom offer a free page speed tool – but also offer a paid for service which covers all types of web reporting (including transaction monitoring and uptime monitoring) – helpful if you’re looking for more comprehensive monitoring and reporting.
Pingdom’s page speed report has a few different features that make it somewhat easier to digest as a layperson – the table above, for example, displays which type of content is affecting your client’s load time the most. In this case, you can see that the fonts are the largest type of content. If this was your client, you could recommend using a different (ie not a custom) font to improve their site speed.
How do you improve page load time for your clients?
What is image optimisation?
Images are one of the largest contributors to page speed issues. They typically take up 50-90% of the page size and slow down load time considerably.
However, there are ways to ensure that images are optimised for the web – often all you need to do is offer a bit of training!
We would recommend that you only use PNGs on the web, so please feel free to pass this onto your design team/clients.
Helpful tools for image optimisation
Even PNGs can be too large – we would recommend that each image would be below 100kb. Here’s a few tools you can use to compress your images:
What is caching?
When caching is enabled, your client’s website would create a static (just HTML, CSS and JS) version of each page. This means there’s no need for it to ask the database for information when loading a page – all the content is already there and can be shown quickly
Browser caching stores parts of the page (eg CSS files, font files, etc) in the user’s browser cache. This means that when that visitor next goes to the website, your browser has all these files already saved (and so can access them quicker, loading the page more quickly)
Helpful tools for caching
Because we work primarily with WordPress builds, I would recommend WPRocket but please get in touch if you need a different recommendation eg for Shopify.
What is a CDN?
CDN is short for Content Delivery Network. They solve the problem of what happens when, say, an internet user in Los Angeles opens a website that is hosted in London, Delhi or Seoul – that distance will cause significant delays (we’re in a world of 1 second is considered a major delay in page speed!)
A CDN distributes website assets (such as fonts, images, JS, CSS, HTML, etc) across a global network of servers. This ensures that no matter where the website user is located, all these assets will be provided by the closest server. The image above is taken from this Cloudflare blog post.
Helpful CDN Tools
Our recommended hosting partner (WPEngine) includes a CDN (powered by MaxCDN) as part of their hosting.
Every site needs to be hosted somewhere and your clients are no different. It could be worth having a conversation with them and ask them to consider how they are hosting their website.
You absolutely get what you pay for when it comes to hosting and site speed. If you’re on the £4.99 per month package with GoDaddy (https://uk.godaddy.com/hosting/web-hosting), the site speed will always be pretty dire. This is because the server is being shared with hundreds, if not thousands, of other websites, all pulling from the same server bandwidth. So, if another website is having a busy day, that will slow your website down – and vice versa.
If site speed is a major consideration, changing to a Premium or Dedicated package will be the one of easiest ways to achieve speed gains.
We recently upgraded to a Premium server with WPEngine and our client websites have seen gains of 40-50%.
One of our nerdier goals for 2021 is to do more JAMStack projects, both internally and for clients – it offers so many exciting opportunities with site speed, security, accessibility and beyond!
What is JAMStack
JAMStack is a brand new (well, since 2016) web architecture to build fast, secure websites.
Each time a user lands on a page that is built on top of a CMS like WordPress, the page has to request content from the database and site files (potentially dozens to hundreds of times per page). This whole process takes time, slowing the page load down.
However, a JAMStack architecture separates the page the user sees and the CMS that allows the website owner to manage that website. It turns what the website visitor sees when they visit the website into a series of fully self-contained files These files never need to ask the database for information and can be easily stored anywhere (such as through a CDN). When the website owner makes a change, for example, adding a new case study in the CMS (in this case WordPress), this forces the relevant files to update, such as:
- Adding new-case-study.html
- Adding new portfolio images to the library
WordPress can continue to be easily used as a CMS, by simply extending it to use GraphQL – https://www.wpgraphql.com/ which is used by many JAMStack frameworks such as Gatsby or Next.js
So – now you know how to build a really fast website
I hope this has given you some ideas on how you can improve site speed for your client’s websites.
It’s important to remember that site speed isn’t a “once and done” task – it’s an ongoing process that needs maintenance. Often it’s more about training and following processes (such as uploading images in the right way/correct size) than about lots of complicated tech. And there’s lots of help out there – you just need to ask!
Take a look at some of the tools we’ve mentioned (particularly the improvement ‘suggestions’ each of the site speed tools offer) and feel free to comment below with any questions you have – I’m always happy to help!