What should you measure to improve performance
Web performance is a crucial indicator of the conversion rate. While you are optimizing your website's performance, you can work in different areas. For example, these areas could be the load time, the time to first paint, or the smoothness interaction.
The right area for you to optimize is different for the conversion funnel steps. A conversion funnel has different steps. The user takes each of them before he converts.
Each of these steps needs different optimizations. Thus you also need to measure different metrics. A conversion funnel, for example, has the following steps:
- Discover
- Engage
- Convert
- Re-Engage
Discover
Optimizing these four steps means optimizing for different goals. The discovery step needs to be fast at bringing the first pixel to the screen. Thus the first load and first paint are essential.
All metrics that relate to the critical rendering path are essential. These metrics could be the head parse time, total blocking time, or time to the first byte.
Furthermore, the essential metrics you can measure in the field are the Core Web Vitals. The Core Vitals subset covers three web performance fields.
Largest Contentful Paint (LCP)
The LCP measures loading performance. YourLCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID)
FID measures interactivity. Pages should have an FID of less than 100 milliseconds.
Cumulative Layout Shift (CLS)
CLS measures visual stability. Pages should maintain a CLS of less than 0.1.
Engagement and Conversion
After the website's load, the user needs a fast interaction and navigation for a successful conversion. As this is very custom for every website, the measurement is custom as well. You could measure the time it takes for a successful conversion.
Furthermore, you could measure the smoothness of interaction between the user and your website. 16ms is the time for your animation to complete. Because the browser has some work to do, you should am 10ms.
Web.dev provides an easy Puppeteer script to measure the navigation between your pages. You script the steps the user would take for a successful conversion and measure the time with the performance.now().
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const start = performance.now();
await page.goto('https://www.store.google.com/landingpage');
await page.goto('https://www.store.google.com/productpage');
// click the buy button, which triggers overlay basket
await page.click('#buy_btn');
// wait until basket overlay is shown
await page.waitFor('#close_btn');
await page.goto('https://www.store.google.com/basket');
await page.goto('https://www.store.google.com/checkout');
console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
await browser.close();
})();
Re-Engagement
After a successful first conversion, users will likely come back to your site. In this phase, you should optimize the load of the page. You could cache the assets with a service worker or use the browsers HTTP Cache.
To measure the repeat views in the lab, you can use WebPageTest.org with the option for "First View and Repeat View". For example, in the field, in Google Analytics, you could use a custom report with the User Type as dimension.
How can performance improve conversion?
Discovery
Users discover your website through organic search, social websites, website links, or campaigns. They visit your website because they think you can solve their problem. A user loses focus after 1 second (High-Performance Browser Networking - Ilya Grigorik). The user experience is a crucial indicator of his willingness to buy a product or read an article.
| Time | User Impact |
|---|---|
| 0 - 16ms | Users perceive an action or animation as smooth as 60 frames are rendered every second. That is 16 ms per frame. |
| 0 – 100 ms | In this range, the user feels that the responses to his actions are instant. |
| 100 – 300 ms | Users experience a small perceptible delay. |
| 300 - 1000 ms | Actions feel slow, and the user recognizes that something has to be done (page load, etc.) |
| 1000 ms - + | Users will likely have a mental context switch. |
| 10 s - + | Users will leave. |
Website speed is a search signal. Google will rank a page higher that is faster, and you'll have more organic traffic.
Engagement
Navigation speed and fast user interaction are the focus to keep the user engage with your content or products. You want a high session time and many pages per session. Your animation needs to be smooth, and the server should respond fast, not to lose his attention. Your users will convert if this phase is fast.
Conversion
A high conversion is often due to excellent user experience and increased engagement of the users. Hero images should load fast, and you should avoid layout shifts or jumps.
Re-Engagement
A returning user is a great thing for any website. You have already convinced the user once. In this stage, you should aim to have even faster load times to caching and a smooth interaction the user is already used.
Conclusion
In this post, I showed you what you should measure to improve performance and how web performance can improve conversion rates.
If you like this article, smile for a moment, share it, follow me, check out my RSS feed, and subscribe to my newsletter.
Cheers Marc
Further Reading
- How can performance improve conversion?
- What should you measure to improve performance?
- User-centric performance metrics
Photo by web.dev
Top comments (0)