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

Das Page Experience Update ist da! Die 10 wicht...

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.
  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
  3. 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)
  4. 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
  5. Gemessen von echten Besuchern, zum Zeitpunkt deren Besuchs mit einem

    Chrome-Browser. Gemessen von einer virtuellen (headless) Chrome-Instanz zum Zeitpunkt des Toolaufrufs.
  6. 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 … <!DOCTYPE html><HTML><head><meta charset="UTF-8" /><link … 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
  7. 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
  8. Verschiebungen im Layout messbar machen layout shift score = impact

    fraction * distance fraction https://web.dev/cls/
  9. layout shift score = impact fraction * distance fraction Anteil

    des betroffenen Viewport-Bereichs 75% } 0.75 https://web.dev/cls/
  10. Verschiebung als Anteil des Viewports 25% } 0.75 layout shift

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

    fraction * distance fraction 0.75 0.25 * = 0.1875
  12. • 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
  13. 4 DNS Requests
 30 HTTP-Requests
 300 KB Daten via Google

    Fonts Selfhosted reduced Font 0 DNS Requests
 1 HTTP-Requests
 20 KB Daten
  14. 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/
  15. 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?