A story about Web Performance ⚡️
Andres Alvarez
Web Performance Consultant
A little bit about
👨🏼💻
🤓
📕
⚡️
Computer Science
Computer Graphics
Principal Web Engineer
Fotocasa and Habitaclia
Indie hacker
Web Performance Consultant
Instead of boring you with a bunch of random concepts about Web Performance, I want to tell you a story
A story about a mission I got at work
Before getting on with the mission, let me explain you how everything started
1
09/2020
I joined Adevinta Spain Re-Commerce Product team
2
09/2022
Bored with working on the same thing. Up for a challenge
3
10/2022
I joined the Web Platform team to support Real Estate Vertical
Fotocasa
The main objective of Fotocasa is to increase our SEO traffic and I heard that performance matters
– My Manager
“
I knew that I had a mission and I was kind of scared 😱
But why ? 🤔
The problems
I didn't know the codebase
3️⃣
I had no product context
I was the new guy
2️⃣
1️⃣
The problems
The more good URLs you have, the better SEO ranking factor you get
This is impossible 🤯
Let's calm down, take a step back and think about it 😌
How Google measures it ?
A set of metrics called the Core Web Vitals
What do they represent ?
A facet of the user experience, that is measurable in the field, and reflects the real-world experience of the users
Better performance, better user experience ✨
Core Web Vitals
Loading - LCP
Visual Stability - CLS
The main thread
By default, the browser uses a single thread to run all the JavaScript in your page, perform layout, reflows, and garbage collection
Interactivity - FID
But I realised that...
Interaction to Next Paint
I needed to understand it first
I felt ready but I needed to establish a plan to accomplish the mission
If you can not measure it, you can not improve it
– Peter Drucker
“
Well... we have a dashboard with Lighthouse metrics
Laboratory data
Field data
Lighthouse
WebPageTest
Waterfall
PageSpeed Insights
Google Search Console
We needed real time data
The plan
Track Core Web Vitals
3️⃣
Use attributions targets to detect and prioritize issues
Knowledge sharing with the developers
Presentations, workshops and content sharing via Slack
Work alongside a team
Find performance issues and fix them
2️⃣
1️⃣
1
09/2020
I joined Adevinta Spain Re-Commerce Product team
2
09/2022
Bored with working on the same thing. Up for a challenge
4
01/2023
We started shipping web performance improvements
3
10/2022
I joined the Web Platform team to support Real Estate Vertical
We started by focusing on the TTFB
Time To First Byte (TTFB)
Measures elapsed time between startTime and responseStart
Improving the TTFB
Parallelization
⚡️
Parallellized everything during Server-Side data fetching
Internal end-points
Used internal end-points to fetch data in Server-Side (same VPC)
End-points response time
Challenged the back-end team to improve MS response time
⚡️
⚡️
We started by focusing on LCP and CLS
But we needed a way to find and reproduce issues locally
Web Vitals Chrome Extension
Web Vitals Chrome Extension
WebPerf Snippets
Chrome devtools
Improving the CLS
Avoid JavaScript breakpoints
⚡️
Replaced useMediaQuery hook usage by media queries
Images size
Reserved proper image sizes
Lazy content
Reserve space for ads and lazy elements
⚡️
⚡️
Improving the LCP
Preload LCP images
⚡️
Use link preload tag and avoid lazy loading
Identify LCP elements
Use CWV extension, Chrome devtools or snippets
Optimise LCP element
Compress images and use best image format
⚡️
⚡️
Now we needed to face our biggest challenges: FID and INP
Less JavaScript and optimize long task
Improving the FID and INP
State colocation
⚡️
Place the state as close as possible where it's used
Re-renders
Re-renders are not inherently bad but unnecessary ones are
Unnecessary states
Computed variables or refs
⚡️
⚡️
⚡️
Expensive renders
Time complexity and operations
Improving the FID and INP
Prioritise painting 🔥
⚡️
Break up long tasks using setTimeout or scheduler API
UI/UX Changes
Prevent premature interactions by telling the users is not ready yet
Optimize third-parties
Use the right strategy. For example: afterInteractive or lazyOnLoad
⚡️
⚡️
Many more
We will see more in the workshop 😜
1
09/2020
I joined Adevinta Spain Re-Commerce Product team
2
09/2022
Bored with working on the same thing. Up for a challenge
4
01/2023
We started shipping web performance improvements
3
10/2022
I joined the Web Platform team to support Real Estate Vertical
5
05/2024
We realised that something was not working
We were almost back where we started for most of the metrics 😭
But why ? 🤔
More features, more code, worse performance
We needed to have all the product teams on board 🚀
But... how can we do it ? 🤯
The plan v2
Track Core Web Vitals as Health Metrics
3️⃣
Use attributions targets to detect and prioritize issues
Knowledge sharing with everyone
Presentations, workshops and content sharing via Slack
Work alongside all teams
Find performance issues and fix them
2️⃣
1️⃣
What do you think that happened after ? 🤔
We made it ✨
But... what about INP ? 🤔
But... what about Google Search Console ?
From 16% URLs with good Good Core Web Vitals to a 100% 🥳
But... what about SEO ? 🤔
Almost 20% more clicks
1
09/2020
I joined Adevinta Spain Re-Commerce Product team
2
09/2022
Bored with working on the same thing. Up for a challenge
4
01/2023
We started shipping web performance improvements
3
10/2022
I joined the Web Platform team to support Real Estate Vertical
5
05/2023
We realised that something was not working
6
12/2023
We got 100% of good URLs in Google Search Console
How can we prevent web performance degradations ? 🤔
Alerts 🚨
PR checks 🚓
Key takeaways
All product teams should be involved
3️⃣
More features, more code, worse performance
Mindset
2️⃣
1️⃣
Thank you! ✨
@andresz_s
@andresz_s
@andresz1
Questions ?
Testing and improving Web Performance
By andresz
