Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Page Experience road - Fellyph Cintra [ΕΝ]

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.

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

April 09, 2022
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

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!