Is your website speed killing conversions? How performance impacts sales and user experience.

Slides for my talk at CX-Circle Amsterdam by Contentsquare.

Transcript

1. Let’s <br/> the boundaries of page speed 24 October 2024 Is your website speed killing conversions? How performance impacts sales and user experience. CX-Circle AMS Contentsquare
2. Hello my name is! Get to know each other! Sander van Surksum WPO Consultant • Father of 4 daughters! • Web since 2003 • Web Performance enthusiast • Part Time muralist
3. linkedin.com/in/sandervansurksum
4. Part of the Makerstreet network We help businesses worldwide increase customer engagement and sales by making their websites faster. Speed up your website, improve your digital experience
5. Great brands and organisations A selection of our clients where web performance is top of mind
6. Is your website’s speed costing you conversions?
7. User eXperience = Core Web Vitals https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
8. Web performance: three UX aspects Web Performance Optimisation Loading Speed Responsiveness Visual Stability How fast the content of a web page loads and is visible to users. How quickly a page responds to user interactions and visually confirms this to the user Are layout and content displayed on a page without shifting during loading and navigations Fast-loading, responsive and visually stable websites help users achieve their goals
9. Google Core Web Vitals Web Performance Optimisation Loading speed Responsiveness Visual Stability Time To First Byte First Contentful Paint Largest Contentful Paint First Input Delay Interaction to Next Paint Total Blocking Time Cumulative Layout Shift Google Core Web Vitals is a set of user-centric metrics for evaluating user experience. To be successful in search and ensure a great user experience, Google recommends that website owners focus on achieving good Core Web Vitals.
10. Largest Contentful Paint (LCP) Performance metrics LCP marks the point in the page load timeline (see images) when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful "When is the largest content element in the viewport visible to visitors?”
11. Interaction to Next Paint (INP) Performance metrics Interaction to Next Paint (INP) measures how long it takes for the browser to visually update after a user interaction. "How responsive is a page to interactions of users?” Visual feedback underscores the importance of communicating a result of an interaction
12. Cumulative Layout Shift (CLS) Performance metrics CLS helps to quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful "How much of the content shifts while users interact with the page?”
13. Two supporting metrics Web Vitals
14. Time to First Byte (TTFB) Performance metrics TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive (server response time) "When does a browser receive the first byte of a response?”
15. First Contentful Paint (FCP) Performance metrics • A fast FCP helps reassure the user that something is happening • Measures elements such as images and text • In the load timeline (see image), FCP happens in the second frame, as that's when the first text and image elements are rendered to the screen • Must be faster than 1.8 sec "When can a visitor see anything on the screen or in the viewport?”
16. Loading progress Largest Contentful Paint Interaction to Next Paint (RUM)
17. Frasers Group Core Web Vitals
18. May 2022 Experimental Chrome announced experimental support for INP May 2023 Pending Today, Chrome is announcing that INP will become a Core Web Vital metric March 2024 Stable INP becomes a stable Core Web Vital metric, replacing FID
20. Interaction to Next Paint (INP) measures how long it takes for the browser to visually update after a user interaction.
21. Why a good INP matters Performance metrics ”Over 90% of user time spent on a page is after the load.” 90%
22. Contentsquare Challenge • High INP values across various page templates, impacting user experience. • Lack of insights into business impact.
23. https://www.speedcurve.com/blog/core-web-vitals-inp-mobile/
24. INP for mobile has a *stronger* correlation with business metrics than INP for desktop https://www.speedcurve.com/blog/core-web-vitals-inp-mobile/
25. ”Do our users who experience a good INP convert better?”
26. Compare segments with Impact Quantification Contentsquare 'Users who experience a Interaction to Next Paint (INP) of less than 200ms on their Landing Page' VS 'Users who experienced a INP of more than 200ms on their Landing Page' What happens if we are able to move 5% of users from one segment to the other? Comparison Ask yourself the question
27. Users who experience a Interaction to Next Paint (INP) of less than 200ms on their Landing Page Users who experienced a INP of more than 200ms on their Landing Page
28. Outcome Impact Quantification Contentsquare • Users with Good INP engage more with search • Users with Good INP see more search results • Needs Improvement / Poor INP > 200 ms converted 8.94% less than Good INP < 200 ms
29. Proven business case—time to optimize Core Web Vitals
30. Contentsquare Tag Manager Cleanup • Audited and removed redundant third-party tags. • Established a new workflow for adding tags, involving a rigorous performance validation process to ensure no degradation in site performance. • Reduced INP by 150ms per site.
31. Contentsquare First-Party INP Optimisation • Optimised CSS animations and event handlers. • Reduced the amount of products on product listing pages. • Prioritising UI updates
32. After INP Optimisations Contentsquare • Engaged more with search bar • More clicks from PLP > PDP • Less tap recurrence (less frustration)
33. Contentsquare Results • INP improved by 36%, 38% & 42% • Lack of insights into business impact.
34. Frasers Group Case Study INP improvements resulted in a significant boost in customer engagement and conversions, reinforcing the importance of a seamless digital experience User Experience INP Improvement Site 1 36% faster Site 2 38% faster Site 3 42% faster Business Outcomes Conversion rate Improvemen t Site 1 +8.14% Site 2 +16.6% Site 3 +6.7%
35. “Make a journey enjoyable enough and nobody is that bothered about how long it lasts” Rory Sutherland
36. Let’s <br/> the boundaries of page speed Thanks Smooth site, Strong performance!
37. Breaking Down the UX Score UX Score Base Calculation We start by giving each web vital metric a score. This is based on its current performance and how it fares between its minimum and maximum limits. However, regardless of how good or bad it performs, the score stays between 0 to 100 points. Factoring in Weights • Main Metrics (Core Web Vitals): LCP, CLS, and INP play central roles, each contributing 25 points. • Supporting Metrics: TTFB contributes 10 points, while FCP pitches in 15 points. Aiming for 100 A total score of 100 indicates excellence across loading speed, visual stability, and responsiveness. This high score assures users that the site's server reacts swiftly (TTFB) and displays initial content promptly (FCP) when loading. Priority of Core Metrics Since Core Web Vitals are crucial for a seamless user experience and gauge elements users directly notice, even if all metrics score well but one of the Core Web Vitals is just average, the total can't surpass 90 points.
38. LCP Largest Contentful Paint
39. INP Interaction to Next Paint
40. CLS Cumulative Layout Shift
41. Part of the Makerstreet network “40% of large brands regress on web performance within 6 months.” — Katie Hempenius, Addy Osmani
42. Part of the Makerstreet network “The largest hurdle to creating and maintaining stellar site performance is the culture of the organisation.” — Lara Hogan
43. Based on a 0.1s natural mobile site speed improvement, Deloitte observed the following key improvements to conversions and customer engagement: • Mobile site speed improvements had a direct correlation to improved funnel progression. • A positive change in the number of page views, conversion rates and average order value across all verticals. • Retail conversions increased by 8.4% and average order value increased by 9.2%. • Luxury brand page views per session increased by 8.6%. DELOITTE STUDY: MILLISECONDS MAKE MILLIONS