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.

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

    View full-size slide

  2. • Community manager rtCamp/Google


    • Google Developer Expert


    • Foodie
    @fellyph
    ABOUT ME

    View full-size slide

  3. Fellyph Cintra

    View full-size slide

  4. Fellyph D’Angellys Cintra

    View full-size slide

  5. Elio De Angelies Cintra

    View full-size slide

  6. Performance
    🏎
    WORDCAMP ATHENS 2022

    View full-size slide

  7. User Experience
    🏎 + 👩🔧 + = 🏆
    WORDCAMP ATHENS 2022

    View full-size slide

  8. Agenda
    - Page experience


    - Core web vitals


    - WordPress Performance


    - New features on the web


    - New tools to measure website performance
    WORDCAMP ATHENS 2022

    View full-size slide

  9. Challenge
    User


    experience
    Performance
    WORDCAMP ATHENS 2022

    View full-size slide

  10. Page experience signals
    WORDCAMP ATHENS 2022
    Performance
    User


    experience

    View full-size slide

  11. Page Experience Signals
    • HTTPS(security)


    • Mobile friendly


    • No intrusive Interstitials
    • Largest Content Paint


    • First Input Delay


    • Cumulative Layout Shift
    CHECKLIST ITEMS CORE WEB VITALS

    View full-size slide

  12. Signed Exchanges
    (SXGs)

    View full-size slide

  13. 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

    View full-size slide

  14. One-click


    Solutions

    View full-size slide

  15. Core web vitals

    View full-size slide

  16. Ranking factors (Feb 2022)
    WORDCAMP ATHENS 2022
    https://developers.google.com/search/blog/2021/11/bringing-page-experience-to-desktop

    View full-size slide

  17. Core web vitals
    WORDCAMP ATHENS 2022
    @FELLYPH

    View full-size slide

  18. Core web vitals
    WORDCAMP ATHENS 2022
    @FELLYPH

    View full-size slide

  19. 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

    View full-size slide

  20. Photo by Goh Rhy Yan on Unsplash

    View full-size slide

  21. • Slow server response times


    • Resource load times


    • Render
    -
    blocking JavaScript and
    CSS


    • Client
    -
    side rendering
    Improving LCP
    WORDCAMP ATHENS 2022

    View full-size slide

  22. Slow server response

    View full-size slide

  23. 🐮 🏎 🐴

    View full-size slide

  24. 🖼 ⛽
    Resource load times
    WORDCAMP ATHENS 2022

    View full-size slide

  25. Image format
    WORDCAMP ATHENS 2022
    JPG
    PNG WEBP
    1400 x 800

    View full-size slide

  26. Image format
    WORDCAMP ATHENS 2022
    JPG
    PNG WEBP
    1.6MB 829KB 264KB

    View full-size slide

  27. Cover block
    WORDCAMP ATHENS 2022

    View full-size slide

  28. Cover block
    WORDCAMP ATHENS 2022
    https://github.com/WordPress/gutenberg/issues/39222

    View full-size slide

  29. Preload assets
    WORDCAMP ATHENS 2022

    View full-size slide

  30. Preload assets
    WORDCAMP ATHENS 2022


    href="poster.jpg"


    imagesrcset="poster_400px.jpg 400w,


    poster_800px.jpg 800w,


    poster_1600px.jpg 1600w"


    imagesizes="50vw">

    View full-size slide

  31. Priority hints

    View full-size slide

  32. 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

    View full-size slide

  33. 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
    - ->


    View full-size slide

  34. Monitoring
    WORDCAMP ATHENS 2022

    View full-size slide

  35. Testing tools

    View full-size slide

  36. New Performance
    insights

    View full-size slide

  37. New Performance insights

    View full-size slide

  38. Content is


    king

    View full-size slide

  39. https:
    /
    /
    w
    w
    w
    .youtube.com/watch?v=elyFuXoRZv8

    View full-size slide

  40. 🏆
    Obrigado


    (Thank you!)
    @fellyph

    View full-size slide

  41. We are hiring!

    View full-size slide