How can we know that our website is fast enough? Measuring user experience. Tips to make your Magento 2 faster.

1. > MAGENTO
www.trustservers.gr
(+30) 211 800 33 70
IS YOUR
Giannis Economou
Founder / Sr. Software Engineer
gecon@trustservers.gr
FAST ENOUGH?
15 May 2022

2. M
U
L
T
I
-
L
E
V
E
L
I
M
A
G
E
O
P
T
I
M
S
T
A
G
I
N
G
A
U
T
O
M
A
T
I
O
N
S
D
E
T
A
I
L
E
D
D
A
T
A
B
A
S
E
O
P
T
2
4
X
7
M
O
N
I
T
O
R
I
N
G
A
D
V
A
N
C
E
D
O
B
S
E
R
V
A
B
I
L
I
T
Y
P
H
P
O
P
T
I
M
L
I
N
U
X
K
E
R
N
E
L
O
P
T
I
M
S
T
R
E
S
S
T
E
S
T
S
H
T
T
P
/
2
D
E
T
A
I
L
E
D
O
P
T
I
M
A
D
V
A
N
C
E
D
J
S
B
U
N
D
L
I
N
G
E
L
A
S
T
I
C
S
E
A
R
C
H
O
P
T
I
M
V
A
R
N
I
S
H
O
P
T
I
M
S
T
R
O
N
G
H
/
W
S
T
A
T
I
C
F
I
L
E
S
P
R
I
V
A
T
E
C
D
N
J
S
/
C
S
S
O
P
T
I
M
T
E
C
H
I
N
C
A
L
C
O
N
S
U
L
T
I
N
G
C
U
S
T
O
M
C
A
C
H
E
W
A
R
M
E
R
S
D
E
F
E
R
J
A
V
A
S
C
R
I
P
T
W
A
F
P
H
P
/
M
Y
S
Q
L
B
O
T
T
L
E
N
E
C
K
S
S
C
A
L
A
B
I
L
I
T
Y
&
A
V
I
F
I
N
D
E
X
E
R
S
O
P
T
I
M
R
E
D
I
S
O
P
T
I
M
V
A
R
N
I
S
H
C
U
S
T
O
M
V
C
L
S
A
T
O
N
O
F
N
G
I
N
X
O
P
T
I
M
S
T
R
O
N
G
S
E
C
U
R
I
T
Y
A
D
V
A
N
C
E
D
C
R
I
T
I
C
A
L
C
S
S
T
R
A
F
F
I
C
S
H
A
P
P
I
N
G
D
A
S
H
B
O
A
R
F
A
S
T
&
P
R
E
M
I
U
M
S
U
P
P
O
R
T
P
R
O
F
I
L
Premium Managed Magento Hosting
▪ Highly optimised & proven stack
▪ Community & Enterprise
▪ Extensive Know-How
▪ Your Magento, SERIOUSLY faster, without code changes

3. 53% DROPS OF MOBILE SITE
VISITS, IF A PAGE TOOK LONGER
THAN 3 SEC TO LOAD
Google Research
YEARS AGO …

4. IF YOU CAN’T
MEASURE IT, YOU
CAN’T IMPROVE IT!
[

5. LOAD IS NOT A SIMPLE MOMENT
IN TIME - IT’S AN EXPERIENCE
Paint Timing Specs (W3C)
INDEED!

6. WE NEED TO
MEASURE
USER’S EXPERIENCE
[

7. CORE WEB VITALS
GOOGLE: MEASURE USER’S EXPERIENCE
▪ LCP: Content Loading Speed
▪ FID: Interactivity
▪ CLS: Visual Stability
▪ (other web vitals: FCP, TTFB, TBT)
Fast: 75% of pageloads Green (Good)
SEO Google Ranking Factor: Summer 2021

8. z
E
METRICS / TOOLS
TWO FAMILIES
Truth! But too late (GA, Google CrUX,
Sentry.io, Akamai mPulse)
Real User Metrics (RUM)
Repeatable and fast (WebPageTest,
GTmetrix, Google pagespeed insights)
Synthetic Tests (LAB)

9. RUM: GOOGLE CHROME EXPERIENCE REPORT
PUBLIC AVAILABLE DATA
▪ CrUX reports
▪ Real-world User Experience Metrics
▪ ~ 6.000.000 popular websites
▪ Origin score (All Pages)
▪ Found in:
▪ Search Console
▪ PageSpeed Insights
▪ CrUX Dashboard on Data Studio
▪ CrUX API

10. RUM: GOOGLE CHROME EXPERIENCE (DATA STUDIO)
PUBLIC AVAILABLE DATA

11. RUM+LAB: GOOGLE PAGESPEED INSIGHTS
PUBLIC AVAILABLE DATA
▪ t
https://pagespeed.web.dev/

12. LET’S GET
TECHNICAL …
[

13. YOUR MAGENTO, FASTER …
NOTES
▪ Magento 2.4.x
▪ Use a really optimised server stack!
▪ Theme / # MB transfered / # DOM elements
▪ Remove Magento extensions not in use
▪ Remove CSS/JS
▪ Serve optimised images
▪ Bloated Google Tag Manager?
3rd party scripts? (37%+)

14. YOUR MAGENTO, FASTER …
NOTES - FOR MAGENTO CODERS
Frontend:
▪ Self-hosted fonts/css/js
▪ Preload specific frontend content
carefully
▪ Try modern JS bundling
▪ Use critical CSS (2.4.x)
▪ (Go headless?)
Backend:
▪ Do not load entire products in a loop
(use collections)
▪ Use ESI (TTL)
▪ ERP: Use async bulk endpoints
(/async/bulk/V1/products)
▪ Watch your SQL queries (+ stress tests)

15. BONUS: PRIORITY HINTS
(THIS IS NEW)
▪ Start using Priority hints!
▪ Chrome 101+
<img src="lcp-image.jpg" fetchpriority="high">
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
https://web.dev/priority-hints/

16. Thank you!
www.trustservers.gr
(+30) 211 800 33 70
Giannis Economou
Founder / Sr. Software Engineer
gecon@trustservers.gr