Page experience road - WordCamp Athens 2022
•
0 likes•91 views
Page experience is the set of signals that are 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 does it help to understand how is the experience of users interacting on 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 our users the best experience improving the Core Web Vitals metrics in our website and get tips on how to improve items such as Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) in our WordPress website.
Report
Share
Page experience road - WordCamp Athens 2022
- 2. • Community manager rtCamp/Google • Google Developer Expert • Foodie @fellyph ABOUT ME
- 5. Elio De Angelies Cintra
- 6. ❤ 🏎
- 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
- 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
- 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
- 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
- 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">
- 39. Site Kit
- 40. Testing tools
- 43. Content is king
- 46. We are hiring!