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

B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=128

Kai Spriestersbach

June 23, 2021
Tweet

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. None
  4. Core Web Vitals

  5. @seokai #10LearningsPageSpeed100

  6. None
  7. 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)
  8. @seokai #1: PageSpeed Tools messen keinen Erfolg

  9. None
  10. None
  11. https://googlechrome.github.io/lighthouse/scorecalc/

  12. 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
  13. PageSpeed als Rankingfaktor

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

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

  16. Core Web Vitals

  17. None
  18. @seokai #2: Die Nutzerwahrnehmung ist entscheidend

  19. Gemessen von echten Besuchern, zum Zeitpunkt deren Besuchs mit einem

    Chrome-Browser. Gemessen von einer virtuellen (headless) Chrome-Instanz zum Zeitpunkt des Toolaufrufs.
  20. https://bigquery.cloud.google.com/dataset/chrome-ux-report:all

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

  22. None
  23. @seokai #3: Nur echte Nutzerdaten zählen

  24. Grigorik, I. „Building Faster Websites WebRTC crash course on web

    performance“, 2012
  25. 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
  26. 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
  27. None
  28. None
  29. https://www.smashingmagazine.com/2021/06/image-optimization-book-release/

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

  31. None
  32. Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich

  33. Verzögerung der ersten Interaktion

  34. Summe der Verschiebungen im Layout

  35. Verschiebungen im Layout messbar machen layout shift score = impact

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

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

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

    fraction * distance fraction 0.75 0.25 * = 0.1875
  39. @seokai #5: Tiefes Verständnis notwendig

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

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

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

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

  44. • 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
  45. @seokai #8: User Experience > PageSpeed

  46. None
  47. https://www.cloudflare.com/de-de/learning/performance/more/website-performance-conversion-rates/

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

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

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

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

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

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

  54. None
  55. 4 DNS Requests
 30 HTTP-Requests
 300 KB Daten via Google

    Fonts Selfhosted reduced Font 0 DNS Requests
 1 HTTP-Requests
 20 KB Daten
  56. @seokai #10: PageSpeed Optimierung nach Pareto ist möglich!

  57. 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/
  58. 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?