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

vandapokecz-brightonseo-presentation-April 2023

vandapokecz-brightonseo-presentation-April 2023

In this presentation which was held at the 2023 April brightonSEO, Vanda talked about how to improve page performance with focus on Core Web Vitals.

Vanda Pokecz

September 15, 2023
Tweet

More Decks by Vanda Pokecz

Other Decks in Marketing & SEO

Transcript

  1. How to get from 2% to
    99% Good URLs -
    a Core Web Vitals
    success story
    Vanda Pókecz
    Ladenzeile GmbH
    @vanda_lilla

    View full-size slide

  2. https
    Security and privacy
    #brightonSEO @vanda_lilla

    View full-size slide

  3. Mobile Usability
    Easy interaction across devices
    #brightonSEO @vanda_lilla

    View full-size slide

  4. Intrusive Interstitials
    No elements obstructing the view
    #brightonSEO @vanda_lilla

    View full-size slide

  5. Core Web Vitals
    LCP, FID, CLS
    #brightonSEO @vanda_lilla

    View full-size slide

  6. LCP
    Measure of loading performance
    Good < 2.5 sec
    #brightonSEO @vanda_lilla

    View full-size slide

  7. FID
    Measure of interactivity
    Good < 100 ms
    #brightonSEO @vanda_lilla

    View full-size slide

  8. CLS
    Measure of visual stability
    Good < 0.1
    #brightonSEO @vanda_lilla

    View full-size slide

  9. Other Metrics
    FCP, TTI, TTFB, TBT, INP
    #brightonSEO @vanda_lilla

    View full-size slide

  10. Good URLs development
    at Ladenzeile

    View full-size slide

  11. Mobile good URLs % (CWV)
    #brightonSEO @vanda_lilla

    View full-size slide

  12. #brightonSEO

    View full-size slide

  13. Platform Reskin
    Stability Issues
    #brightonSEO

    View full-size slide

  14. Focus on CWVs Optimization
    #brightonSEO

    View full-size slide

  15. Blocking call Non-blocking call

    View full-size slide

  16. Step 1 - Research by Tech SEO and Devs
    #brightonSEO @vanda_lilla

    View full-size slide

  17. Main sources of CWV issues
    Server, CMP, Reskin leftovers

    View full-size slide

  18. DevTools (Performance Insights)

    View full-size slide

  19. Improvement opportunities
    #brightonSEO @vanda_lilla

    View full-size slide

  20. Third-party resources
    #brightonSEO @vanda_lilla

    View full-size slide

  21. Asset loading
    #brightonSEO
    JS ,fonts, images, icons…
    #brightonSEO @vanda_lilla

    View full-size slide

  22. Layout shifts
    #brightonSEO @vanda_lilla

    View full-size slide

  23. LCP on desktop
    #brightonSEO

    View full-size slide

  24. CMP banner loading
    extra font files
    #brightonSEO @vanda_lilla

    View full-size slide

  25. Step 2 - Prioritization
    #brightonSEO @vanda_lilla

    View full-size slide

  26. Possible actions
    grouped
    CMP fine tuning
    Javascript
    Styling Fonts & Icons Images

    View full-size slide

  27. Benefit
    Effort Low Medium High
    Low Remove Inline style
    Cleanup the head
    Add search placeholder in jsp
    Remove unnecessary header properties
    Remove unused JS
    Bundle FSP JS
    Bundle GDPR Scripts
    Optimize header background image
    Move preconnects and preloads to top of
    head
    Move open graph to end of head
    Optimize banner images
    Remove banner background
    image
    Prioritize above the fold image
    download
    Add browser lazy load for
    below fold imgs
    Medium Remove inline JS and load it async
    Cleanup CSS
    SVG icons above the fold
    High Remove Jquery
    Convert to JS modules to leverage free
    shaking
    Improve script loading and init system

    View full-size slide

  28. Step 3 - Optimization
    #brightonSEO @vanda_lilla

    View full-size slide

  29. CMP fine tuning
    #brightonSEO @vanda_lilla

    View full-size slide

  30. CMP recommendations tested &
    implemented in May
    Largest impact on LCP
    30% uplift in good URLs (CrUX)
    #brightonSEO

    View full-size slide

  31. Recommendations
    implemented and
    tested in May
    1
    , JS & Styling, Images, Icons
    & Fonts optimization
    #brightonSEO

    View full-size slide

  32. , JS & Styling, Images, Icons
    & Fonts optimization
    #brightonSEO
    Desktop

    View full-size slide


  33. #brightonSEO @vanda_lilla

    View full-size slide

  34. Unnecessary properties removed
    Only 180x180 & 144x144 apple icons kept
    #brightonSEO
    href="https://www.ladenzeile.de/reskin-mobile-icon-144x144.png"/>rel="apple-touch-icon" sizes="180x180"
    href="https://www.ladenzeile.de/reskin-mobile-icon-180x180.png">

    View full-size slide

  35. Preconnects and dns-
    prefetch moved to top
    #brightonSEO
    Kleider mit WOW - Effekt zum besten Preis online kaufen |
    Ladenzeile.dename="robots" content="index,follow"/>href="https://www.ladenzeile.at/mode/kleider/"/>href="https://www.ladenzeile.de/mode/kleider/"/>content="B49A06912A14F93B14B17DF4E3CDD567"/>name="format-detection" content="telephone=no"/>href="//pagead2.googlesyndication.com"/>

    View full-size slide

  36. OG and meta icons moved
    to bottom
    #brightonSEO @vanda_lilla

    View full-size slide

  37. Javascript
    #brightonSEO @vanda_lilla

    View full-size slide

  38. Scripts bundled together
    #brightonSEO @vanda_lilla

    View full-size slide

  39. Old JS loader script optimized
    #brightonSEO @vanda_lilla

    View full-size slide

  40. Unused JS removed
    #brightonSEO @vanda_lilla

    View full-size slide

  41. Styling
    #brightonSEO @vanda_lilla

    View full-size slide

  42. Inline style removed and
    added back to sass files
    #brightonSEO @vanda_lilla

    View full-size slide

  43. Lazy loading of secondary
    css improved
    #brightonSEO @vanda_lilla

    View full-size slide

  44. Site-wide banner
    animation moved
    to page css
    #brightonSEO

    View full-size slide

  45. Fonts & Icons
    #brightonSEO @vanda_lilla

    View full-size slide

  46. Canela Deck and Centra
    n1 Medium fonts preloaded
    #brightonSEO @vanda_lilla

    View full-size slide

  47. Icomoon loading deferred
    #brightonSEO @vanda_lilla

    View full-size slide

  48. Above the fold icons
    replaced with svg
    #brightonSEO

    View full-size slide

  49. Images
    #brightonSEO @vanda_lilla

    View full-size slide

  50. Full width banner
    background img
    removed & loading
    prioritized

    View full-size slide

  51. 1st - 2nd grid
    items prioritized

    View full-size slide

  52. 3rd - 18th grid
    items native
    lazy loaded

    View full-size slide

  53. Header
    Logo download
    prioritized
    &
    Background image
    optimized

    View full-size slide

  54. Summary of actions
    #brightonSEO @vanda_lilla

    View full-size slide

  55. CMP banner optimized
    Unnecessary properties and assets
    including unused JS removed
    CSS moved from inline to external files
    #brightonSEO @vanda_lilla

    View full-size slide

  56. JS files bundled, including gdpr scripts
    Loading prioritized
    Lazy loading improved
    #brightonSEO @vanda_lilla

    View full-size slide

  57. The work never stops

    View full-size slide

  58. Mainy LCP and CLS issues
    #brightonSEO

    View full-size slide

  59. #brightonSEO

    View full-size slide

  60. HTTP caching of
    static frontend
    resources improved

    View full-size slide

  61. Fixed width and height
    placeholder for CMP banner
    #brightonSEO @vanda_lilla

    View full-size slide

  62. Core Web Vitals as KPI -
    issues treated as bug
    #brightonSEO @vanda_lilla

    View full-size slide

  63. #brightonSEO @vanda_lilla

    View full-size slide

  64. Final question

    View full-size slide

  65. Shouldn’t building a strong
    relationship with customers
    be one of our main focus?
    #brightonSEO @vanda_lilla

    View full-size slide

  66. Thank you!
    Vanda Pókecz
    Ladenzeile GmbH
    www.linkedin.com/in/vanda-pokecz
    @vanda_lilla

    View full-size slide