We know that web page performance can have a big impact on user experience; which can, ultimately, affect a website’s conversion rate and brand perception. If you are investing in your website, or directing paid media (such as PPC or Display Ads) to your web pages, then it makes sense to optimise them for performance; Web Page Performance (Page Speed) can impact your bottom line.
Web Page Performance (Page Speed) can impact your bottom line.– Firney
Audit and report on web page speed
- Auditing tools that collate “Real User Metrics”
These are tools such as New Relic Browser, which will actively track performance metrics of real life users visiting your web pages. This is useful, as it allows you to collect data on what your actual users are experiencing.
- “Simulated environment” web page auditing tools
These are tools such as Lighthouse, WebPageTest and GTMetrix. These use simulated “connection throttling” to test the page performance which may not be an accurate representation of what users experience. However, these tools also advise on what you need to do to optimise in your web pages.
From our perspective, we advocate the use of both types of tools.
What is a good target for optimising web page performance?
Having spent over a decade building web pages and optimising them for performance, through conversations with employees at Google, and attending a vast number of conferences on web page speed optimisation, we’ve narrowed this down to one key rule: Your web page should have a Time to Interactive of less than 3 seconds on a mobile device running on a 4G network, or 4 seconds on a 3G network. It is estimated that, if a web page takes longer than 3 seconds to load, 40-50% of visitors will abandon the request. Whilst it isn’t the only metric we should focus on, it is a great starting point for optimising pages.
What is “Time to Interactive”?
Time to Interactive (TTI) is the time it takes from the user requesting the page, to the time when the web page is interactive. i.e. When the page can be scrolled and when clicking in input text fields works. The Mozilla Developer site defines TTI quite nicely as:
Time to Interactive (TTI) is a non-standardized web performance ‘progress’ metric defined as the point in time when the last Long Task finished and was followed by 5 seconds of network and main thread inactivity.Source: MDN Web Docs
When there is a gap in main thread (processing) and network activity for the page, we can assume, with a relatively high confidence for most pages, that the page has been rendered and is now in a usable state.
Consider why you are optimising the page.
There are two reasons you may wish to optimise a page:
1. Optimising Web Page Speed for SEO
The first reason you want to optimise page speed is for SEO purposes; Google’s recent “Page Experience Update”, along with several other updates over the last few years, mean that the speed of a page affects your rankings in Google’s search results. Currently, google suggests focusing on 3 metrics known as “Core Web Vitals” (see below).
2. Optimising for User Experience
The second reason to optimise page speed is to improve the User Experience (UX) on your website. A poor user experience will affect your conversion rate (how many people complete the goal of your web page) and their perception of your Brand.
If you are investing into building a website or landing page, or paying for your marketing to send users to those pages, then the last thing you want is to waste a significant amount of that spend due to slow loading web pages that result in a poor UX. Therefore, our TTI metric is a great one to focus on reducing but Core Web Vitals should also be prioritised.
Core Web Vitals
There metrics known as Core Web Vitals are:
- Largest Contentful Paint
This is the time at which the largest text block, video or image was rendered (shown to the user) on the page, relative to when the page first started loading. So this metric is measuring how quickly the page content is loaded.
- First Input Delay
- Cumulative Layout Shift
This is a measure of how much content jumps around the page as elements are being loaded. It can easily be avoided by setting heights for elements on a page at the start.
There is one other key metric that is worth focusing on and that is the Time To First Byte (TTFB).
Time To First Byte (TTFB)
Time to first byte is a measure of how long it takes from a user requesting a page (via URL / link / redirection) to the time when the first byte (more easily thought of as the first character of the HTML Document) being returned to the browser.
A slow TTFB indicates that delays are being caused by the back-end– Firney
Quite often the HTML of a web page is dynamically generated (via a Content Management System, script or Framework) or not optimised; so a slow TTFB indicates that delays are being caused by the back-end. i.e. The interpreted language on the server that is generating the HTML to serve to the user.
A slow TTFB could be down to a number of reasons such as slow database queries or a lack of caching, but we’ll be covering that in future articles.
Which pages should I optimise?
Ideally, every page and asset in your site should be optimised for performance; but if you are looking for somewhere to start, focus on pages with the highest traffic; such as Landing Pages, Home Page, Blog/Article pages and Product/Service Pages.
Hopefully, that provides some insight into the importance of page speed and the key metrics you should focus on. Remember that the auditing tools provide great insights into how web pages load and can advise on what to optimise. An optimised page is likely to see an uplift in conversions and/or will greatly improve the experience for your users.