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

Transcript

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

   Core Web Vitals Projekten.
   

   View 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 Slide

3. View Slide

4. Core Web Vitals
   

   View Slide

5. @seokai
   #10LearningsPageSpeed100
   

   View Slide

6. View Slide

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)
   

   View Slide

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

   View Slide

9. View Slide

10. View Slide

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

    View Slide

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
    

    View Slide

13. PageSpeed als Rankingfaktor
    

    View Slide

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

    View Slide

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

    View Slide

16. Core Web Vitals
    

    View Slide

17. View Slide

18. @seokai
    #2: Die Nutzerwahrnehmung
    ist entscheidend
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. View Slide

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

    View Slide

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

    View Slide

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 …
    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 Slide

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
    

    View Slide

27. View Slide

28. View Slide

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

    View Slide

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

    View Slide

31. View Slide

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

    View Slide

33. Verzögerung der ersten Interaktion
    

    View Slide

34. Summe der Verschiebungen im Layout
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

45. @seokai
    #8: User Experience >
    PageSpeed
    

    View Slide

46. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. View Slide

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
    

    View Slide

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

    View Slide

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/
    

    View Slide

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?
    

    View Slide