Page Experience road - Fellyph Cintra [ΕΝ]

Page experience is the set of signals that part of the ranking factors on the Google search, 2021 those metrics got the attention of millions of WordPress websites. But why those metrics are so important and how it helps to understand how is the experience of users interacting in a web page. Core Web Vitals, mobile-friendly, no intrusive experience why those terms matter and how you can archive those items.

In this talk, we’re going to ride on the road of page experience and give to our users the best experience improving the Core Web Vitals metrics in our website, and get tips how to improve items such as Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) in our WordPress website.

Transcript

1. WORDCAMP ATHENS 2022 Page experience road Fellyph Cintra
2. • Community manager rtCamp/Google • Google Developer Expert • Foodie @fellyph ABOUT ME
3. Fellyph Cintra
4. Fellyph D’Angellys Cintra
5. Elio De Angelies Cintra
6. ❤ 🏎
7. Performance 🏎 WORDCAMP ATHENS 2022
8. User Experience 🏎 + 👩🔧 + = 🏆 WORDCAMP ATHENS 2022
9. Agenda - Page experience - Core web vitals - WordPress Performance - New features on the web - New tools to measure website performance WORDCAMP ATHENS 2022
10. Challenge User experience Performance WORDCAMP ATHENS 2022
11. Page experience signals WORDCAMP ATHENS 2022 Performance User experience
12. Page Experience Signals • HTTPS(security) • Mobile friendly • No intrusive Interstitials • Largest Content Paint • First Input Delay • Cumulative Layout Shift CHECKLIST ITEMS CORE WEB VITALS
13. Security
14. Signed Exchanges (SXGs)
15. 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
16. One-click Solutions
17. Core web vitals
18. Ranking factors (Feb 2022) WORDCAMP ATHENS 2022 https://developers.google.com/search/blog/2021/11/bringing-page-experience-to-desktop
19. Core web vitals WORDCAMP ATHENS 2022 @FELLYPH
20. Core web vitals WORDCAMP ATHENS 2022 @FELLYPH
21. LCP Elements WORDCAMP ATHENS 2022 • <img> elements • <image> elements inside an <svg> element • <video> elements (the poster image is used) • An element with a background image loaded via the url() function • Block - level elements containing text nodes
22. Photo by Goh Rhy Yan on Unsplash
23. • Slow server response times • Resource load times • Render - blocking JavaScript and CSS • Client - side rendering Improving LCP WORDCAMP ATHENS 2022
24. Slow server response
25. 🦥 🛺
26. 🐮 🏎 🐴
27. 🖼 ⛽ Resource load times WORDCAMP ATHENS 2022
28. Image format WORDCAMP ATHENS 2022 JPG PNG WEBP 1400 x 800
29. Image format WORDCAMP ATHENS 2022 JPG PNG WEBP 1.6MB 829KB 264KB
30. Cover block WORDCAMP ATHENS 2022
31. Cover block WORDCAMP ATHENS 2022 https://github.com/WordPress/gutenberg/issues/39222
32. Preload assets WORDCAMP ATHENS 2022
33. Preload assets WORDCAMP ATHENS 2022 <link rel="preload" as="image" href="poster.jpg" imagesrcset="poster_400px.jpg 400w, poster_800px.jpg 800w, poster_1600px.jpg 1600w" imagesizes="50vw">
34. image-set
35. Priority hints
36. 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
37. Priority Hints WORDCAMP ATHENS 2022 < !-- We don't want a high priority for this above - the - fold image -- > <img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!"> < !-- We want to initiate an early fetch for a resource, but also deprioritize it - -> <link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
38. Monitoring WORDCAMP ATHENS 2022
39. Site Kit
40. Testing tools
41. New Performance insights
42. New Performance insights
43. Content is king
44. https: / / w w w .youtube.com/watch?v=elyFuXoRZv8
45. 🏆 Obrigado (Thank you!) @fellyph
46. We are hiring!