Slide 1
Slide 1 text
WORDCAMP ATHENS 2022
Page
experience
road
Fellyph Cintra
Slide 2
Slide 2 text
• 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
Slide 16
Slide 16 text
One-click
Solutions
Slide 17
Slide 17 text
Core web vitals
Slide 18
Slide 18 text
Ranking factors (Feb 2022)
WORDCAMP ATHENS 2022
https://developers.google.com/search/blog/2021/11/bringing-page-experience-to-desktop
Slide 19
Slide 19 text
Core web vitals
WORDCAMP ATHENS 2022
@FELLYPH
Slide 20
Slide 20 text
Core web vitals
WORDCAMP ATHENS 2022
@FELLYPH
Slide 21
Slide 21 text
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
Slide 29
Slide 29 text
Image format
WORDCAMP ATHENS 2022
JPG
PNG WEBP
1.6MB 829KB 264KB
Slide 30
Slide 30 text
Cover block
WORDCAMP ATHENS 2022
Slide 31
Slide 31 text
Cover block
WORDCAMP ATHENS 2022
https://github.com/WordPress/gutenberg/issues/39222
Slide 32
Slide 32 text
Preload assets
WORDCAMP ATHENS 2022
Slide 33
Slide 33 text
Preload assets
WORDCAMP ATHENS 2022
Slide 34
Slide 34 text
image-set
Slide 35
Slide 35 text
Priority hints
Slide 36
Slide 36 text
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
- ->
< !--
We want to initiate an early fetch for a resource, but also deprioritize it
- ->
Slide 38
Slide 38 text
Monitoring
WORDCAMP ATHENS 2022
Slide 39
Slide 39 text
Site Kit
Slide 40
Slide 40 text
Testing tools
Slide 41
Slide 41 text
New Performance
insights
Slide 42
Slide 42 text
New Performance insights
Slide 43
Slide 43 text
Content is
king
Slide 44
Slide 44 text
https:
/
/
w
w
w
.youtube.com/watch?v=elyFuXoRZv8
Slide 45
Slide 45 text
🏆
Obrigado
(Thank you!)
@fellyph
Slide 46
Slide 46 text
We are hiring!