Karlijn Löwik | RUMvision | The State of Web Performance in 2024

Summary

In this engaging presentation, Carol Leck, CEO of a web performance monitoring company, discusses the state of web performance in 2024. She emphasizes the importance of real user monitoring (RUM) over synthetic data, highlighting the significance of Core Web Vitals for improving user experience and conversions. Leck provides practical tips for enhancing performance, such as prioritizing content for Largest Contentful Paint (LCP), addressing Cumulative Layout Shift (CLS), and optimizing Interaction to Next Paint (INP). She also underscores the impact of third-party scripts and the benefits of using RUM to ensure a website provides the best experience across various devices.

Takeaways

• 🌐 The speaker, Carl, is the CEO of a company that offers real user monitoring to visualize and compare web performance metrics.
• 🎉 Carl starts with a quiz about web performance, highlighting the importance of core vitals over Lighthouse scores in evaluating user experience.
• 📈 Web performance is about perceived performance, focusing on how users experience a site's load time and interactivity.
• 💹 Good web performance can significantly improve conversions, with research showing that faster load times can boost mobile revenue and reduce bounce rates.
• 🔍 Google's core vitals are a set of metrics that measure real user experiences, including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
• 🚀 LCP is crucial as it indicates when the main content of a page is visible, and optimizing it can be achieved by prioritizing critical content and avoiding lazy loading.
• 🔄 Cumulative Layout Shift measures unexpected layout changes that can annoy users, and can be mitigated by reserving space for elements that load later.
• 🤖 JavaScript can be a significant bottleneck in web performance, often causing delays in rendering and painting, impacting FID and CLS.
• 🌐 Field data is more representative of real user experiences compared to synthetic data, and should be prioritized for accurate performance measurement.
• 📊 Third-party scripts can have a substantial impact on web performance, and monitoring their effects can help in optimizing the user experience.
• 🏆 Carl's company was featured on Google IO twice, emphasizing the importance of using real user monitoring (RUM) and field data for performance optimization.

Q & A

Who is the speaker in the transcript and what is her role?

The speaker is Carol Leck, the CEO and co-founder of Rion, a company that offers Real User Monitoring to visualize and compare Core Web Vitals and other user experience metrics.

What is the main topic of Carol Leck's presentation?

The main topic of Carol Leck's presentation is the state of web performance in 2024.

What is Carol Leck's mission according to the introduction?

Carol Leck's mission is to make web performance more accessible and to advocate for more women in tech.

What does 'sucks' stand for in the context of the presentation?

'Sucks' stands for Speed User Experience.

Why is good web performance important according to the presentation?

Good web performance is important because it improves conversions, enhances user experience, and impacts SEO rankings.

What are Core Web Vitals and why are they significant?

Core Web Vitals are a set of metrics introduced by Google to measure user experience on the web, including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). They are significant because they help quantify user experience and are used as ranking factors by Google.

What challenges are associated with relying on Google’s field data for web performance?

The challenges include the data being 28 days behind, inability to differentiate between first-time and returning users, and not being able to zoom in on specific page templates or user experiences.

Why does Carol Leck criticize the reliance on Lighthouse scores for measuring web performance?

Carol Leck criticizes the reliance on Lighthouse scores because they can be easily manipulated and do not represent real user experiences as accurately as field data from Core Web Vitals.

What are some tips provided for improving Largest Contentful Paint (LCP)?

Tips for improving LCP include ensuring the browser finds necessary resources quickly, using priority hints for important elements, avoiding lazy loading for LCP elements, using server-side rendering, and optimizing images and videos.

What is Cumulative Layout Shift (CLS) and why is it important to manage?

Cumulative Layout Shift (CLS) measures unexpected shifts in page layout during loading. Managing CLS is important because these shifts can be annoying and disruptive to users, affecting their overall experience.

How does Interaction to Next Paint (INP) differ from First Input Delay (FID), and why is it important?

Interaction to Next Paint (INP) measures the time it takes for a page to visually respond to user interactions, whereas First Input Delay (FID) measures the time from when a user first interacts with a page to when the browser can begin processing that interaction. INP is important because it provides a more comprehensive view of interactivity by considering the visual response.

What role do third-party scripts play in web performance, according to the presentation?

Third-party scripts can significantly impact web performance by increasing load times and adding complexity to the page, potentially slowing down user interactions and increasing INP.

How can developers address issues with third-party scripts to improve web performance?

Developers can address issues with third-party scripts by monitoring their impact, optimizing their use, and working with third-party providers to reduce their performance footprint. Tools like Real User Monitoring (RUM) can help visualize and measure the impact of these scripts.

What is the significance of Google's I/O event mentioned in the presentation?

The significance of Google's I/O event is that Rion was featured twice for its work in improving web performance, highlighting the importance of using Real User Monitoring (RUM) and field data over synthetic data for performance optimization.

Outlines

00:00

🎤 Introduction of the Speaker

Carol Leckar, CEO of Rion, is introduced. Rion offers real user monitoring to visualize and compare core vitals and other user experience metrics. Carol advocates for accessibility and more women in tech. She begins her talk on the state of web performance in 2024 with a small quiz, asking the audience about their focus on web performance metrics, including Lighthouse scores and core vitals.

05:24

💻 Challenges with Data and Performance Monitoring

Carol discusses the limitations of using data that is 28 days old to evaluate the effectiveness of recent releases. She emphasizes the importance of understanding first-time user experiences, which can be critical for users coming from ads. Different devices and user conditions impact core vitals, and it's important to focus on real user experience rather than synthetic data like Lighthouse scores.

10:27

🖼️ Key Metrics and Their Impact on User Experience

Carol delves into specific web performance metrics: Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP). She explains their significance in enhancing user experience, such as improving conversion rates and reducing bounce rates. She provides tips to optimize these metrics, including good hosting, caching, and avoiding redirects.

15:30

📐 Cumulative Layout Shift (CLS) and Its Importance

Carol addresses the annoyance caused by Cumulative Layout Shift (CLS) and provides solutions to mitigate it, such as reserving space for elements that load later. She emphasizes using CSS over JavaScript to improve performance. The challenge lies in identifying and fixing issues across various pages and devices, which is where real user monitoring can make a difference.

20:32

📊 Interaction to Next Paint (INP) and Performance Tips

Carol explains Interaction to Next Paint (INP), a metric that measures the responsiveness of a webpage to user actions. She highlights the impact of JavaScript on performance and provides tips to optimize INP, such as minimizing JavaScript and being mindful of third-party scripts. She also mentions the benefits of using real user monitoring to visualize and improve performance.

🏆 Importance of Real User Monitoring and Final Thoughts

Carol concludes by emphasizing the importance of using real user monitoring (RUM) over synthetic data. She shares her excitement about being featured on Google I/O and encourages the audience to focus on real user experiences. A one-second improvement in performance can significantly boost conversion rates. Carol ends with a final note of thanks and a reminder of the value of prioritizing user experience.

Keywords

💡Core Web Vitals

Core Web Vitals are a set of specific factors that Google considers important in a webpage's overall user experience. They include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics are crucial for evaluating a site's performance and ensuring a smooth user experience, as discussed extensively in the video.

💡Largest Contentful Paint (LCP)

LCP measures the time it takes for the largest content element on a webpage to become visible within the user's viewport. It's a critical aspect of the Core Web Vitals and indicates how quickly the main content of a page is loaded. In the video, LCP is highlighted as a key metric for assessing web performance.

💡First Input Delay (FID)

FID quantifies the time from when a user first interacts with a page (e.g., clicking a link or tapping a button) to the time when the browser responds to that interaction. It's part of the Core Web Vitals and is essential for measuring the responsiveness of a website. The video mentions the importance of minimizing FID to improve user interaction.

💡Cumulative Layout Shift (CLS)

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. It ensures that elements on the page are stable and don't shift unexpectedly, which can negatively impact user experience. The video explains how reducing CLS can prevent annoying shifts that disrupt the user's reading or interaction.

💡User Experience (UX)

User Experience refers to the overall experience of a person using a product, such as a website or application, especially in terms of how easy or pleasing it is to use. The video emphasizes the importance of UX in web performance, including how various metrics like Core Web Vitals impact the perceived performance and satisfaction of the user.

💡Real User Monitoring (RUM)

RUM involves collecting data about a user's interactions with a website or application in real time. It provides insights into the actual user experience by monitoring performance metrics as experienced by real users. In the video, Carol Leck discusses how RUM can help identify and address performance issues more accurately than synthetic testing.

💡Synthetic Data

Synthetic data refers to information that's artificially generated rather than obtained by direct measurement. In the context of web performance, synthetic data is used in controlled testing environments to measure metrics like load times and interactions. The video contrasts synthetic data with field data, highlighting the limitations of the former in representing real user experiences.

💡Field Data

Field data is collected from real users interacting with a website, providing a realistic picture of performance and user experience. The video stresses the importance of using field data over synthetic data for making informed decisions about web performance improvements.

💡Lighthouse Score

The Lighthouse Score is a measure provided by Google's Lighthouse tool, which evaluates the performance, accessibility, best practices, and SEO of a webpage. The video discusses the limitations of relying solely on Lighthouse Scores, advocating for a broader focus on real user metrics like Core Web Vitals.

💡Caching

Caching involves storing copies of files in a cache, or temporary storage location, so that they can be accessed more quickly. The video explains how effective caching can significantly improve web performance by reducing load times, particularly for returning visitors or frequently accessed resources.

💡Time to First Byte (TTFB)

TTFB measures the time it takes for a user's browser to receive the first byte of page content from the server. It's an important performance metric that reflects the responsiveness of a web server. The video mentions TTFB in the context of backend performance and its impact on overall user experience.

💡Perceived Performance

Perceived performance refers to how fast a website feels to the user, regardless of its actual load times. The video highlights the concept of perceived performance, emphasizing that users' satisfaction with a website often depends on how quickly they perceive it to be loading and responding.

Highlights

Carol Leck Car is the CEO and founder of Rion, which offers Real User Monitoring to visualize and compare Core Vitals and other user experience metrics.

Carol advocates for accessibility and more women in tech as a member of the Aard Netherlands.

Web performance in 2024 focuses on perceived performance, emphasizing how users experience website load times and interactions.

Improving web performance can significantly boost conversions and mobile revenue, with 62% of people not returning to a website after a bad experience.

Google's Core Vitals include three main metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Rion offers a solution to differentiate between first-time and returning users, providing detailed insights into user experiences.

Lighthouse scores are popular but can be misleading. Google recommends focusing on Field Core Vitals over Lighthouse scores.

Time to First Byte (TTFB) is crucial for backend performance, and it can be improved with good hosting and caching solutions.

First Contentful Paint (FCP) is the moment something first appears on the screen, reducing user anxiety during loading times.

Largest Contentful Paint (LCP) marks when the main content has loaded, and it can be improved by prioritizing critical resources and avoiding lazy loading for key elements.

Cumulative Layout Shift (CLS) measures unexpected layout shifts, which can be minimized by reserving space for elements that load later.

Interaction to Next Paint (INP) measures how quickly the page responds to user interactions, with JavaScript being a common performance bottleneck.

Third-party scripts can significantly impact INP, and Rion helps visualize and manage their effects on web performance.

Using real user monitoring (RUM) data over synthetic data allows for more accurate and actionable insights into web performance.

A one-second improvement in load time can increase conversion rates by 8.4%, emphasizing the importance of optimizing for real user experiences.

Transcripts

[Muziek]

time for me to introduce Our speaker of

the Carol

Leck Car is the CEO ander of rion Which

offers Real user monitoring to visualize

and compare Cor vitals and other user

Experience matri her mission is to

make

of English

technical add is Aard member ofos

Netherland and advocates for

accessibility and more Women in Tech

please h of

[Applaus]

Applause Hi everyone and Thank you all

for coming and so many of You and so

many familiar Faces so yeah I'm here to

talk to you about the State of web

Performance in 2024 And I'll actually

not be Standing in front of the s

Because I actually Wanted to start off

with a small quiz when you guys think of

web Performance or More important when

you guys think of improving web

Performance What number do you look Do

You Look at this Do You Look At The

Lighthouse score preferably in green or

Do You Look at this the core vitals can

I get hands for this

One No really one

two f I'm

The faed or or actually do Ja ja Who

Looks At

that Who has no Idea what I'm talking

about or even More important Who thought

that this Might be a musical

Performance Stay

karaoke Let's Get Started on the State

of web Performance in 2024 and Let Me

Get My

Clicker So What is web Performance well

it's not a musical eh It's actually

perceived Performance It's What does a

user Experience when they visit your

site eh How Does It Load for Them How

Does It shift Around It has many names

It can be website optimization can be s

Speed Core vitals PP score ux

optimization but I like to call it sucks

sucks stands for s Speed user Experience

so Hi everyone I'm Carl and wel be

Talking for the next 20 minutes about

sucks so Why Should I care well it's

actually very Easy Good sucks cells It

improves your conversions by a lot

There's Been a lot of Research and if

you need anymore Just let me

know These numbers Kind of speak to them

There Can % sales making

it1 faster you can boost your Mobile

revenue

42 by improving Cor vitals actually A

Very interesting One 62 of People will

not return to your website if they Had A

Bad Experience and I think we can All

agree That We have that One website That

We

hate do not become that

website less boun

optim are hard numbers There is a lot of

ja extra effect to it as your SEO

improves It's It's Ranking

Factor your organic VI will improve

because Hey if the site is nice actually

Might we visit it again we probably

would and There are many More factors

you would want to Care About user

Experience Inside Speed

ehm So how do we measure that uh de

and awesome thing that Google did f

years ago is They released a new new

Method of Getting uh user experiences of

your own s eh Which is awesome It's uh

three matric These large Paint

interaction to Next Paint and cumulative

layout shift and it is actually

ising top does not Mean That are not

important that later actually passing

failing It is the

Option this in Gre

[Muziek]

computer very big One It's Always 28

Days Behind It's a Bulk of data that is

collected over the last f weeks And that

Sounds Fun Until You Do a release uh and

you Kind of want to know it well Within

a Hour or two or a day but if you have

to wait for 28 Days to know that your

release was Good To Your Real users

that's a lot of Money Lost

ehm but also you guys from a developer

perspective you can't differentiate

between first time users

benefit

casing Their experien Will Be hely

Different you want to know about them

and actually More interesting Those

first time users actually are going to

be the Ones coming in from ads for

instance So You paid for Them You Want

Them To Have a good Experience in corit

you can't see what they are and you

can't Zoom in per Type of page you can't

template your homepage is is it doing

well or is it bad your landing page Does

It isu want that developer optim it but

also very interesting audience greatly

impacts your Cor

vitals Because I Might Have A Very Fast

phone I Might BE ON Good internet but is

everyone

Else my mother is not she has a very

Poor phone And that actually impacts

yourit because they will have a Worse

Experience These are Kind of Things

help to cut back to Our First question

of the What about that Lighthouse SC

everyone loves that Lighthouse SC

especially This one It's nice It's Green

It's

Simple It's also Kind of easy to fake

ehm and It Doesn't really Tell us the

whole Story and That's Why actually

Google also says Always concentrate On

Field Core vitals over Lighthouse

I did not get to that part What is Field

data Field data are Us All of Us in this

room eh synthetic data is Only This

computer

ehm What is also very Often going wrong

is that People will tell you hey you

know uh My Light of score is terrible So

I'm passing I'm not passing SEO right

now this has no influence on SEO

whatsoever Just Tell marketing to Shut

Up ehm no I mean Be Nice About It

but all right so it's not based on Real

user Experience and it is does not have

a representative device for testing

either it's on your very Own very good

very Fast laptop or it's on the slowest

mobile device ever

Made and also It cannot measure imp and

it measures CLS and lcp differently

because It cannot

interact does not making it not

invaluable

If f data Focus on

I'm Kind of known Liking Memes I Wanted

to go the corit with you with Memes and

Talk About what they Mean so First two

up are actually not corit They are webit

but they are equally

important So What happens time to first

bite a user clicks The

website we going to get started alr This

Is The Moment The backend CS to work and

this is the only moment that the backend

gets to work but it Has To Work Hard So

This Is Where The server The caching or

the cdn for instance get started and you

guys with Magento ttb for you guys is

hard ehm so There is a reason why on

this marketplace you see is Lot of

Hosting you can really use Their help

because time to first bite can be

greatly improved by having Good Hosting

like akva or like hypernode eh you can

also always and Forever benefit From

cashing The More cashing your s has the

better the Experience will be cdn are

great because They can give you that

Cash that you want eh but There are also

downs uh redirects for instance actually

impacts your time to first bite this

includes ads so like I said that

expensive Thing That already paid for

Don't let Them Bounce ehm DNS also

impact it and actually my first tip of

the day be mindful of query strings and

utm and add Them To Your cashing Rules

uh this happens very Often then the

whole page needs to be reloaded and

There is really No Need for that so Next

up First content Paint uh Quick Let's

Show Them Something zo Hey Look guys

It's no longer a wi screen Nice

actually is important moment user

because it confirms something is

happening we to at a screen For A Very

long time it's actually been shown in

Research that this gets The blood

pressure Rising in your own clients by

20 you know that's a bit of Heal Risk

really tip of the day if you have a fast

time to first fcp is slow There probably

One or

tpt is

ming ide is 1 milliseconds And that

includes time to first

B so Now We Get To Our very First

laun We Made it it's the largest pain We

are talking about a lot of frontend

matri this is

actually why islash

k frontend of L

isad SP also suffer a lot Here on larg

Paint What happens in larg actually Talk

to this because Let's Move It Up Little

This Is Our First Paint as we mentioned

not

useful Tex in More Tex in Little loading

bar that is the Moment that actually

confirms that officially this page is

done loading That's your

lcp so eh How do you improve your lcp

You Make sure that the browser finds

what it Needs put Everything It Needs At

The

Top use a PR priority High for instance

For Your lcp do not Lazy Load your lcp

please guys Let's not ehm do Lazy Load

the rest though ehm sur Side rendering

is because It can be cached and as we

already learned cashing Is Awesome

ehm images and videos should not be very

large but I Guess everyone knew that One

but it's actually not that impactful as

you Might Expect to move to webp or

avif if you are on very good internet

ehm if you guys are on very Poor

internet of your audiences and That's

one of the reason why R is valuable

Audi is exper that Might help the most

Thing is lcp because lcp can CH based on

Whatever device Real users are using to

visit instance

flipout of

Yesterday Who Keeps on I

don't R Can

be mindful lcp People or alarms will

go I'm G guys Don't Mind what if your

lcp Could Be instance party time that

Would Be awesome What would that

Take Let's Have a look meet speculation

Rules speculation Rules are one of the

aes 24 ehm and what it does is it

actually preload or pre Renders the

whole page that it anticip you f Next

and it will do it Only in the browser so

and you only need to add A Very small

eh Jason it's very easy to implement and

actually the awesome thing is that hua

already supports out of the box Which is

why I'm gna Say Hey I'm not gna Deep

into that Let's Leave that one to John

ehm we actually did an awesome uh

webinar about it with many people who

are present Here uh with Google and if

you want to Check It Out It's incredibly

valuable and this is an Incredible tip

because It improves your lcp to

instant so however we're gna move on to

cumulative Layer shift and actually What

is a cumulative layout shift well it's

this I cannot Explain It Any better than

this everyone experienced cumulative

layout Shift

order items I

Guess we have Started reading Something

and we suddenly had to shift Away or we

have Wanted to click Something and

suddenly there was an Ad There and we

click The Ad and That's All very

annoying and Cor can show you that can

you show you Where that is so what it

Does It measures Unexpected

shifts I Personally find This one

actually the most annoying of all of

them So how does cumulative Lay shift

happen actually It Just happens as page

Renders and Some Like are there sooner

than the rest and the solution to CLS

issue is actually Us

Easy reserve Space Elements that

later height if you want to use

HTML aspect ra CSS

ehm so That's because this happens add

and Dynamic content on Javascript will

Always Be slower and the rest of your

page Just reserve some room for them and

you will not have a layout shift eh also

tip and this is actually for Whole

Performance If You Can Use CSS please

use it over Javascript uh but the

biggest item the biggest Challenge is

actually Finding Them Because if you

have 300 pages and 25 templates

thousands of devices that you need to

take account for you will never find

them and That's Where R Can Make a

difference First inp delay It's that

yeah bye we Now have interaction to Next

Paint uh the new and improved Fit So

What happens with interaction well It

measures interactiv Kind of like it says

actually we never really got to it but

Why do They Keep Calling It the paint h

well Ja Apparently browsers consider

Them quite The Artist and They are

painting pixels on your screen so Yes

interaction to Next Paint eh It's The

Slow response to a user Action so things

That We pressed How long Did that Take

for Something to visualize Again So This

is an interaction to Next Paint in

Action so I for instance want to do an

Add to c and guys to C is important to

was in ecommerce ehm How long does it

take to Go from here to There well that

depends and That's What imp Tries to

show us uh because What Might happen is

that the the page is still rendering but

we Add to Cards and suddenly the page

needs to update however It Was busy with

Javascript en Javascript Runs to

completion it will not stop Until It's

done

killing Performance Often Javascript is

the Natural Enemy of It's done But Now

your CPU also needs to make a new Paint

and update that And Only When It's done

we get

the next Paint and it's come to

completion Which is

great as you Might have Guessed Third

parties Can have huge impact on imp

because Hey Lot of are uh yeah based on

Javascript So how big is that impact but

This Is The Thing That's awesome with R

we can visualize that and this is even

More awesome with ram we can show your

product owner When Their marketing Team

has added the 60 Third Third Party And

You're Kind of saying this does not

influence my uh My my my page beed and

you can see Yes it does so That's Fun

but it also gives us a lot of Lee way to

talk about uh The Performance Third

parties are actually very happy with

this data because They want to improve

They Aren The Enemy they just Don't

Always know how much of an impact that

they are having and we seeing A Great uh

ja Change In Third party Way of Thinking

so That's Great so tips to improve imp

ehm on grome you want to use yielding

you want to get Everything out of the

way that is not important

Every interactiv on a page That's Why

It's better than Fit Only did the first

one Keep an Ey on Third parties be

mindful of your own Javascript

Javascript is Absolutely The Natural np

of imp actually Javascript and Cor Vital

Just Do Not Go well Together At All

avoid layout dressing use content

visibility or you know buy everyone The

newest most expensive

phone Might be a bit expensive It could

actually work because like I mentioned

having a good phone helps imp or you

know use ram To Know What is happening

and Ja Because you

improve of what you don't measure And A

Very awesome thing Happened To Me as a

CEO and cofounder last month we got

featured on Google Io Twice ehm and

That's Here is One And that is because

On imp And On everything they say use

I'm actually a as well uh use Rum use

Field data please guys let's stop

Looking At synthetic data uh Because you

can validate that the changes that you

made are good you can optimize uh men

save so much Time eh and you can be sure

that the website Runs well and has the

gives the best user

Experience So ja eh guys sucs eh en

Just Final stat Just A One Point second

boost can boost your

in did increase conversion by 8.4

B si

9.2 Little Money a lot People Focus on

Real People and if anys I did not wear

this Orange dress Just to support the

Netherlands In The eurocup Nor because

I'm well a big fan of Magento also you

find me guys thank you

[Applaus]