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 -- > I'm an
unimportant image! < !-- 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!