How-to

How can performance improve conversion?

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:

  1. Discover
  2. Engage
  3. Convert
  4. 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.

Newsletter

Hello and welcome! Don't miss out on crucial web performance insights, plus the latest on accessibility and sustainability, delivered directly to your inbox. Elevate your craft in creating fast, user-friendly, and eco-conscious websites. Sign up now to access seasoned expertise and the freshest news!

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();
})();

source

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”.

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.

TimeUser Impact
0 - 16msUsers perceive an action or animation as smooth as 60 frames are rendered every second. That is 16 ms per frame.
0 – 100 msIn this range, the user feels that the responses to his actions are instant.
100 – 300 msUsers experience a small perceptible delay.
300 - 1000 msActions 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

This post 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




Likes 19
Like from Wen
Like from Britta Raab
Like from Kempten-Museum im Zumsteinhaus
Like from Invader Digital Studio
Like from Oguzhan Kerim Güdek
Like from Alice
Like from Marius Dörner
Like from Simon Schnetzer
Like from Sebastian Steinack
Like from Sabine Köhler
Like from WEIN Handel • Weinschmeckeria
Like from 🌿ÖKO-SOZIALES MARKETING🌿
Like from Daily Allgäu
Like from ◈ 𝐀𝐥𝐥𝐠ä𝐮 ║ 𝗠𝗼𝘂𝗻𝘁𝗮𝗶𝗻 ◈
Like from Nbg🏘 Travel🏖 27🤴Fun👻
Like from F E R - 28 - Muc
Like from MixWerbung
Like from Almost Infinite
Like from Bi M.
Reposts 2
Like from webperfbot
Like from Bruno Murati
Comments 1
Like from Lucasoft co.uk
Lucasoft co.uk

RT @marc_radziwill A blog post is out there for you! "How can performance improve conversion?" >> marcradziwill.com/blog/how-can-p… #webperf #webperformance #webdev

view comment >>