Karlijn Löwik | RUMvision | The State of Web Performance in 2024
Summary
TLDRIn 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
🎤 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.
💻 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.
🖼️ 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.
📐 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.
📊 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.
Mindmap
Keywords
💡Core Web Vitals
💡Largest Contentful Paint (LCP)
💡First Input Delay (FID)
💡Cumulative Layout Shift (CLS)
💡User Experience (UX)
💡Real User Monitoring (RUM)
💡Synthetic Data
💡Field Data
💡Lighthouse Score
💡Caching
💡Time to First Byte (TTFB)
💡Perceived Performance
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]
浏览更多相关视频
Matt Medlyn | Graham and Green | CLSINPWTFBBQ - Misadventures in Core Web Vitals
A deep dive into optimizing LCP
SEO and Core Web Vitals in HTML | Sigma Web Development Course - Tutorial #6
Technical SEO for Developers | 2023 Checklist
👉 Does Web Hosting Affect SEO Rankings? ✅
The Perfect Ecommerce Website Layout Explained
5.0 / 5 (0 votes)