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

Das Page Experience Update ist da! Die 10 wichtigsten Learnings aus dutzenden Core Web Vitals Optimierungen - Kai Spriestersbach SEARCH ONE

Das Page Experience Update ist da! Die 10 wichtigsten Learnings aus dutzenden Core Web Vitals Optimierungen - Kai Spriestersbach SEARCH ONE

Mitte Juni startet nun endlich der Rollout des Google Page Experience Updates. Damit wird die Nutzerfreundlichkeit von Seiten, allen voran der PageSpeed als fester Teil der Ranking-Systeme eingeführt. Offenbar waren viele Webseiten noch nicht ausreichend auf die kommenden Veränderungen vorbereitet, denn Google verschob das Update, das eigentlich bereits im Mai starten sollte, kurzfristig um 6 Wochen nach hinten. Diese zusätzliche Zeit sollten Webseitenbetreiber nutzen, um die Seitenerfahrung zu verbessern. Doch was bedeutet eine „gute Seitenerfahrung“ eigentlich? Was genau erwartet Google oder der Nutzer von einer Webseite in Zukunft? Kai Spriestersbach stellt in seinem Vortrag die 10 wichtigsten Learnings aus dutzenden erfolgreich durchgeführten Optimierungsprojekten vor. Dabei verrät er seine besten Optimierungstricks für eine bessere PageSpeed-Performance, die jeder Webseite auf die Sprünge helfen und sie erfahren, welche Metriken wirklich wichtig sind und worauf es bei der Erreichung der notwendigen Ziele ankommt.
Von Kai Spriestersbach von SEARCH ONE

Kai Spriestersbach

June 23, 2021
Tweet

More Decks by Kai Spriestersbach

Other Decks in Marketing & SEO

Transcript

  1. Kai Spriestersbach, 22. Juni 2021
    Das Page Experience
    Update ist da!
    10 Learnings aus dutzenden

    Core Web Vitals Projekten.

    View full-size slide

  2. • Selbstständiger Berater und Unternehmer

    • Lehrbeauftragter an der Hochschule für
    angewandte Wissenschaften Würzburg-
    Schweinfurt

    • > 25 Vorträge auf Online Marketing
    Konferenzen in den letzten 10 Jahren

    • 17 Jahre Erfahrung mit Online Projekten

    • Mediengestalter Digital (IHK)

    • B.Sc. E-Commerce

    • Berufsbegleitendes Masterstudium
    M.Sc. Web Science
    Kai Spriestersbach

    View full-size slide

  3. Core Web Vitals

    View full-size slide

  4. @seokai
    #10LearningsPageSpeed100

    View full-size slide

  5. PageSpeed Metriken
    • PageSpeed Insights 0 - 100

    • GTmetrix A - F

    • Time To First Byte (TTFB)

    • Start Render

    • First Contentful Paint (FCP)

    • First Meaningful Paint (FMP)

    • Time To Interactive (TTI)

    • First CPU Idle

    • First Input Delay (FID)

    • Total Blocking Time (TBT)

    • Cumulative Layout Shift (CLS)

    • Largest Contentful Paint (LCP)

    • DomContentLoaded

    • OnLoad Time

    • Document Complete

    • Fully Loaded Time

    • Page Load Time (Google Analytics)

    • HTTP Requests (Number)

    • DNS Requests (Number)

    • Total Size (in Bytes)

    View full-size slide

  6. @seokai
    #1: PageSpeed Tools messen
    keinen Erfolg

    View full-size slide

  7. https://googlechrome.github.io/lighthouse/scorecalc/

    View full-size slide

  8. PageSpeed als Rankingfaktor
    Seit Juli 2018: Faktor für Mobile & Ads
    https://developers.google.com/web/updates/2018/07/search-ads-speed
    https://googleblog.blogspot.com/2009/06/lets-make-web-faster.html
    Juni 2009: Erstmals eingeführt

    View full-size slide

  9. PageSpeed als Rankingfaktor

    View full-size slide

  10. Roll-Out als globaler Rankingfaktor
    https://developers.google.com/search/blog/2020/11/timing-for-page-experience

    View full-size slide

  11. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

    View full-size slide

  12. Core Web Vitals

    View full-size slide

  13. @seokai
    #2: Die Nutzerwahrnehmung
    ist entscheidend

    View full-size slide

  14. Gemessen von echten
    Besuchern, zum Zeitpunkt
    deren Besuchs mit einem
    Chrome-Browser.
    Gemessen von einer
    virtuellen (headless)
    Chrome-Instanz zum
    Zeitpunkt des Toolaufrufs.

    View full-size slide

  15. https://bigquery.cloud.google.com/dataset/chrome-ux-report:all

    View full-size slide

  16. https://twitter.com/JohnMu/status/1402237950155444226

    View full-size slide

  17. @seokai
    #3: Nur echte Nutzerdaten
    zählen

    View full-size slide

  18. Grigorik, I. „Building Faster Websites WebRTC crash course on web performance“, 2012

    View full-size slide

  19. From bits to DOM
    Bits
    Bytes
    Characters
    Tokens
    Nodes
    DOM
    00010011111110101000110110011011101010100110010001011111001 …
    3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0a 3c 48 54 4d 4c 3e 0a 3c …
    StartTag: html EndTag: head
    StartTag: head Tag: meta … StartTag: body …
    html head meta link body h1
    title p …
    html
    head
    meta link
    body
    h1
    title p a

    View full-size slide

  20. From DOM to Paint
    DOM
    html
    head
    meta link
    body
    h1
    title p a
    CSSOM body
    h1 p a
    body { font-family: sans-serif; }
    h1 { font-size: 16px; } a { color: blue; }
    Render Tree
    p { display: none; }
    body h1 p a
    Layout
    Paint

    View full-size slide

  21. https://www.smashingmagazine.com/2021/06/image-optimization-book-release/

    View full-size slide

  22. @seokai
    #4: Sparsam mit Entwickler-
    Ressourcen umgehen

    View full-size slide

  23. Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich

    View full-size slide

  24. Verzögerung der ersten Interaktion

    View full-size slide

  25. Summe der Verschiebungen im Layout

    View full-size slide

  26. Verschiebungen im Layout messbar machen
    layout shift score = impact fraction * distance fraction
    https://web.dev/cls/

    View full-size slide

  27. layout shift score = impact fraction * distance fraction
    Anteil des betroffenen Viewport-Bereichs
    75%
    }
    0.75
    https://web.dev/cls/

    View full-size slide

  28. Verschiebung als Anteil des Viewports
    25%
    }
    0.75
    layout shift score = impact fraction * distance fraction
    0.25
    https://web.dev/cls/

    View full-size slide

  29. Berechnung des Layout Shift
    https://web.dev/cls/
    layout shift score = impact fraction * distance fraction
    0.75 0.25
    * = 0.1875

    View full-size slide

  30. @seokai
    #5: Tiefes Verständnis
    notwendig

    View full-size slide

  31. Halbzeit!
    Jetzt noch 5 schnelle Tipps aus der Praxis!

    View full-size slide

  32. @seokai
    #6: Latenz schlägt Bandbreite

    View full-size slide

  33. Belshe, M., Google: "More Bandwidth Doesn’t Matter (much)", 2010

    View full-size slide

  34. @seokai
    #7: Echtzeit-Monitoring mit
    Matomo & Google Analytics

    View full-size slide

  35. • Pro
    • Erfassung aller Core Web Vitals

    • Echte Felddaten echter Nutzer

    • Monitoring in Echtzeit möglich

    • Contra
    • Nicht ohne Analytics / Matomo

    • Erhöhte Last für Besucher

    • Kein Debugging
    Monitoring in Analytics / Matomo via JS
    https://github.com/GoogleChrome/web-vitals

    View full-size slide

  36. @seokai
    #8: User Experience >
    PageSpeed

    View full-size slide

  37. https://www.cloudflare.com/de-de/learning/performance/more/website-performance-conversion-rates/

    View full-size slide

  38. https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm

    View full-size slide

  39. https://web.dev/yahoo-japan-news/

    View full-size slide

  40. Ups!
    https://web.dev/yahoo-japan-news/

    View full-size slide

  41. @seokai
    #9: Web Fonts Optimierung
    lohnt sich

    View full-size slide

  42. https://transfonter.org/ Danke an Daniel Abromeit @der_abro

    View full-size slide

  43. https://github.com/hakatashi/unicode-map

    View full-size slide

  44. 4 DNS Requests

    30 HTTP-Requests

    300 KB Daten
    via Google Fonts Selfhosted reduced Font
    0 DNS Requests

    1 HTTP-Requests

    20 KB Daten

    View full-size slide

  45. @seokai
    #10: PageSpeed Optimierung
    nach Pareto ist möglich!

    View full-size slide

  46. Die 10 schnellsten Hacks für besseren PageSpeed
    1. HTTP/2 aktivieren.

    2. Lokales Caching aktivieren.

    3. Bilder nur in verwendeter Größe einbinden. (Responsive Images)

    4. Bilder in modernen Formaten bereitstellen (WebP/AVIF/JPEGXL).

    5. Lazy-Loading für Bilder und Iframes aktivieren.

    6. Kritische Ressourcen „prefetchen“ und mittels Server-Push übermitteln.

    7. Kritisches CSS erstellen und inline im HTML-Head einbinden.

    8. JavaScript mittels „defer“ verzögert laden.

    9. Third-Party-Tags reduzieren.

    10. Bei SPAs serverseitiges Rendering aktivieren. (React, Angular, vue, etc.)
    h!ps://www.search-one.de/newsle!er/

    View full-size slide

  47. Mein neuer Onlinekurs
    PageSpeed & Web Vitals
    sta!et in Kürze!
    20% Raba! mit dem Code
    „SearchSeekers21“
    h!ps://kai.im/pagespeed
    Wollen Sie noch mehr wissen?

    View full-size slide