• Community manager rtCamp/Google
• Google Developer Expert
• Foodie
@fellyph
ABOUT ME
Slide 3
Slide 3 text
Fellyph Cintra
Slide 4
Slide 4 text
Fellyph D’Angellys Cintra
Slide 5
Slide 5 text
Elio De Angelies Cintra
Slide 6
Slide 6 text
❤ 🏎
Slide 7
Slide 7 text
Performance
🏎
WORDCAMP ATHENS 2022
Slide 8
Slide 8 text
User Experience
🏎 + 👩🔧 + = 🏆
WORDCAMP ATHENS 2022
Slide 9
Slide 9 text
Agenda
- Page experience
- Core web vitals
- WordPress Performance
- New features on the web
- New tools to measure website performance
WORDCAMP ATHENS 2022
Slide 10
Slide 10 text
Challenge
User
experience
Performance
WORDCAMP ATHENS 2022
Slide 11
Slide 11 text
Page experience signals
WORDCAMP ATHENS 2022
Performance
User
experience
Slide 12
Slide 12 text
Page Experience Signals
• HTTPS(security)
• Mobile friendly
• No intrusive Interstitials
• Largest Content Paint
• First Input Delay
• Cumulative Layout Shift
CHECKLIST ITEMS CORE WEB VITALS
Slide 13
Slide 13 text
Security
Slide 14
Slide 14 text
Signed Exchanges
(SXGs)
Slide 15
Slide 15 text
Signed Exchanges (SXGs)
•Google Search will now crawl, cache, and
prefetch SXGs when applicable.
•Google and other search engines
sometimes prefetch content that the user is
likely to visit.
https://web.dev/signed-exchanges/
WORDCAMP ATHENS 2022
LCP Elements
WORDCAMP ATHENS 2022
• elements
• elements inside an element
• elements (the poster image is used)
• An element with a background image loaded via
the url() function
• Block
-
level elements containing text nodes
Slide 22
Slide 22 text
Photo by Goh Rhy Yan on Unsplash
Slide 23
Slide 23 text
• Slow server response times
• Resource load times
• Render
-
blocking JavaScript and
CSS
• Client
-
side rendering
Improving LCP
WORDCAMP ATHENS 2022
Slide 24
Slide 24 text
Slow server response
Slide 25
Slide 25 text
🦥 🛺
Slide 26
Slide 26 text
🐮 🏎 🐴
Slide 27
Slide 27 text
🖼 ⛽
Resource load times
WORDCAMP ATHENS 2022
Slide 28
Slide 28 text
Image format
WORDCAMP ATHENS 2022
JPG
PNG WEBP
1400 x 800
Priority hints
@FELLYPH
• link, img, script, and iframe tags
can use it
• Now will be possible to define the
loading priority from assets:
• high
• low
• auto
Slide 37
Slide 37 text
Priority Hints
WORDCAMP ATHENS 2022
< !--
We don't want a high priority for this above
-
the
-
fold image
-- >
< !--
We want to initiate an early fetch for a resource, but also deprioritize it
- ->