So, what is it and why is it so important?
While the visible load time of a website does play a part, website speed also encompasses factors such as server response time, optimisation of images, and the file localisation of assets. All these contribute to a user’s overall experience and are considered as a ranking factor by Google.
In the current digital era, speed is of the essence, and the time it takes for a site to load is a vital component in achieving success.
Everyone is busy nowadays and time is precious. We get it. But it means that you could be giving a negative brand perception if your audience doesn’t get the information they need quickly.
Therefore, it is critical to optimise site speed to engage with the modern digital audience.
The bottom line – and probably the most important thing to any business – is that it can impact sales too, which is something Trainline realised:
Page speed isn’t just measured by one single metric. While it’s tempting to focus solely on load time, there are other crucial factors to consider.
Google’s Core Web Vitals, for instance, offer a user-centric approach to measuring website performance. These metrics include loading times, interactivity times, and visual stability, providing a more holistic view of how users experience a website.
The five different metrics which Google benchmarks you against give you an indication on how quick your website is, as well as the impact on things such as SEO (search engine optimisation) rankings.
By monitoring these, website owners can identify areas for improvement and ensure a smoother, more engaging UX.
Of course, your results are highly dependent on the type of website you have (an Ecommerce website has to do more heavy lifting for example), so you need to be realistic on what’s achievable too.
Slow page speed can be attributed to several common factors, although there may be other causes as well that could also play a role.
Unoptimised and oversized images, externally hosted fonts, icon libraries, code packages and the absence of lazy loading strategies – where a web page loads only required content at first – are often among the primary culprits.
Are there any quick fixes for these?
Start by ensuring that your images are appropriately sized for web use to reduce page size and optimise your JavaScript and CSS files to keep them as small as possible.
You can also prioritise the loading of critical elements, such as the Largest Contentful Paint (LCP) content, by implementing lazy loading strategies. This involves loading essential content first and deferring the loading of non-essential elements until after the page has rendered.
Additionally, consider setting the fetch priority of critical assets to high, instructing the browser to load them above everything else, further optimising loading times and enhancing user experience.
A typical mistake that website owners make when attempting to improve page speed is not serving different assets for different devices (mobile vs. desktop).
And with research by Google revealing that 61% of users are unlikely to return to a mobile site they’ve had difficulties accessing and 40% going to a competitor instead, here’s why it’s crucial:
1. Optimising for small screen sizes
When it comes to mobile optimisation, prioritising the loading of the smallest possible file sizes is paramount.
While image quality remains important, it takes a backseat to the need for faster loading times on smaller screens.
2. Consideration for slower connections
Mobile users often access the internet through slower 3G or 4G connections, especially in areas with limited network coverage.
As a result, reducing the size of JavaScript and CSS files becomes essential to minimise loading times on mobile devices.
3. Throttled connection testing
To accurately assess the performance of a website on mobile devices, it’s beneficial to test it under real-world conditions.
This includes using tools that simulate throttled 3G connections to replicate the slower speeds experienced by mobile users in certain environments.
Last year, Purpose Media worked with the UK’s most trusted online bathroom supplier whose organic traffic to their website had dropped off.
By implementing a range of optimisations, such as turning their failing URLs to passing ones and improving the lazy loading strategy, we were able to increase retention levels and organic traffic.
At Purpose Media, our approach to website development ensures comprehensive optimisation from the outset.
We prioritise website speed as a core component of every project, integrating strategies into the development process.
Get in touch if you’d like support with the speed of your website, or if you’re looking to create a new engaging site which delivers great experiences for your customers.
Core Web Vitals are a set of specific factors that Google considers important in determining a website’s user experience. These factors include LCP, First Input Delay (FID), and Cumulative Layout Shift (CLS).
LCP is a user-centric performance metric used to measure perceived loading speed. It marks the point in the page load timeline when the largest content element becomes visible to the user.
SEO refers to the process of optimising a website to improve its visibility and ranking in search engine results pages (SERPs). The goal of SEO is to increase organic (non-paid) traffic to the website.
UX encompasses all aspects of a user’s interaction with a product, service, or system. In the context of websites, UX design focuses on creating intuitive, efficient, and enjoyable experiences for users.
Lazy loading is a technique used to defer the loading of non-essential resources (such as images or scripts) until they are needed. This strategy helps improve page load times by reducing the initial payload size.
CSS is a style sheet language used for describing the presentation of a document written in HTML or XML. It controls the visual appearance of web pages, including layout, colours, fonts, and other design elements.
JavaScript is a programming language commonly used to create interactive effects within web browsers. It allows developers to dynamically update content, respond to user actions, and modify the behaviour of web pages in real-time.
SPAs are web applications or websites that load a single HTML page and dynamically update that page as the user interacts with it. SPAs provide a more seamless and responsive user experience by eliminating the need for full page reloads.