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

SEO-Meetup-Hamburg - PageSpeed von Max Böhme -...

SEO-Meetup-Hamburg - PageSpeed von Max Böhme - 2025-04-28

Links zum Talk:
- Aufzeichnung & Blog Post
- SEO Meetup Hamburg
- Factorial

Du möchtest die Ladegeschwindigkeit deines Shops prüfen oder tunen?
Sprich mich gerne an oder stell uns direkt ein Kennlerngespräch ein! Hier geht's zu meiner Website

Avatar for Max Böhme

Max Böhme

May 07, 2025
Tweet

Other Decks in Marketing & SEO

Transcript

  1. Was ist PageSpeed? Oder auch: Wenn schon der erste Eindruck

    frustriert Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 1
  2. 1. Zeit, bis die Seite nutzbar ist Max Böhme -

    SEO Meetup Hamburg 2025/04 @ Factorial 2 Was ist PageSpeed? Leitlinie: Nutzende sollen sich möglichst schnell orientieren können.
  3. 2. Cumulative Layout Shifts Leitlinie: Was schon angezeigt wird darf

    sich nicht mehr verschieben. Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 3 Was ist PageSpeed?
  4. Conversion Rate - Eine Verzögerung von 100ms bewirkt 7% weniger

    Conversions (Quelle: Akamai, 2017) - Ladezeiten von 1s bringen 3x Conversions als Ladezeiten von 5s (Quelle: Portent, 2022) Und das war vor TikTok! Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 5 Warum ist PageSpeed so wichtig?
  5. Crawling Budget - Ladezeiten wirken sich auch auf Crawler wie

    den Google Bot aus - Ressourcen von Crawler kosten Geld und sind limitiert „So kannst du deine Seiten und Ressourcen für das Crawling optimieren: [..] Sorge dafür, dass sich deine Seiten schnell laden lassen.“ (Quelle: Google Search Central) Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 6 Warum ist PageSpeed so wichtig?
  6. Ranking - Bestätigter Ranking Faktor seit 2018 (Quelle: Google Search

    Central Blog) - Seit 2021 mehr als nur ein „Tie Breaker“(Quelle: Search Engine Roundtable) - Indirekt via Nutzersignale: Frustrierte Nutzende springen ab und klicken auf das nächste Suchergebnis Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 7 Warum ist PageSpeed so wichtig?
  7. Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 8

    Nachhaltigkeit: CO2-Equivalente Warum ist PageSpeed so wichtig? Websitecarbon.com
  8. Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 9

    Nachhaltigkeit: CO2-Equivalente Der Online-Shop einer Marke, die mit Nachhaltigkeit wirbt: Websitecarbon.com Warum ist PageSpeed so wichtig?
  9. Quick Check: Wo stehst du gerade? Max Böhme - SEO

    Meetup Hamburg 2025/04 @ Factorial 10
  10. Core Web Vitals via CrUX Vis Max Böhme - SEO

    Meetup Hamburg 2025/04 @ Factorial 11 Quick Check: Wo stehst du gerade?
  11. Warum ist der PageSpeed so oft schlecht? Max Böhme -

    SEO Meetup Hamburg 2025/04 @ Factorial 12
  12. Art des Testings • Arbeiten & testen mit High-End Geräten

    & Glasfaser – Nutzende haben aber Altgeräte und mit Glück 4G • Neue Third-Party-Tools (via TagManager), ohne Nebeneffekte zu testen Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 13 Warum ist der PageSpeed so oft schlecht?
  13. Unauffällige Veränderungen • Code-Änderungen • Veränderte Infrastruktur • Updates von

    Bibliotheken / Servern / Konfigurationen • Sowohl First- als auch Third-Party! Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 14 Warum ist der PageSpeed so oft schlecht?
  14. Mal ehrlich… Wer hat im letzten Monat die eigene Seite

    auf einem repräsentativen Smartphone getestet? Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 15 Warum ist der PageSpeed so oft schlecht?
  15. Man kann nur optimieren, was man messen kann Max Böhme

    - SEO Meetup Hamburg 2025/04 @ Factorial 16
  16. Die Metriken • Time To First Byte (TTFB): Die Auslieferungszeit

    für das HTML • First / Largest Contentful Paint (FCP, LCP) Die Zeit einschließlich TTFB, bis das erste / größte Element sichtbar ist • Cumulative Layout Shifts (CLS) Wie weit sich bereits dargestellte Elemente verschieben Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 17 Man kann nur optimieren, was man messen kann
  17. Synthetische Tests Vorteile: • Gute Vergleichbarkeit Nachteile: • Ergebnisse haben

    nicht immer was mit der echten Welt zu tun Messung des echten Nutzererlebnisses Vorteile: • Echte Daten echter Kunden Nachteile: • Weniger vergleichbar Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 18 Messverfahren Man kann nur optimieren, was man messen kann
  18. Synthetische Tests • Lighthouse / PageSpeed Insights (nutzt auch Core

    Web Vitals) • Commerce-Score (nutzt auch PageSpeed Insights) • Webpagetest.org (nutzt auch PageSpeed Insights) Das Problem: Das ist wie ein Abgastest bei VW. Es passiert, dass man auf Metriken anstatt auf UX optimiert. Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 19 Man kann nur optimieren, was man messen kann
  19. Synthetische Tests: PageSpeed Insights Max Böhme - SEO Meetup Hamburg

    2025/04 @ Factorial 20 Man kann nur optimieren, was man messen kann
  20. Core Web Vitals • Ladezeiten echter Nutzenden – die Chrome

    nutzen • Daten öffentlich einsehbar • 28 Tage verzögert • => Nicht geeignet, um Veränderungen zu bemerken Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 21 Man kann nur optimieren, was man messen kann
  21. Real User Monitoring • Ladezeiten echter Nutzenden • Daten sind

    privat • Analyse und Drill-Down möglich • Verzögerung von Sekunden • => Veränderungen unmittelbar bemerken Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 22 Man kann nur optimieren, was man messen kann
  22. Real User Monitoring Max Böhme - SEO Meetup Hamburg 2025/04

    @ Factorial 23 Man kann nur optimieren, was man messen kann •Langsamer TCP- Verbindungsaufbau - aber nur auf der Startseite
  23. Real User Monitoring Max Böhme - SEO Meetup Hamburg 2025/04

    @ Factorial 24 Man kann nur optimieren, was man messen kann Segmentiert nach Ländern: •Zielmarkt DE ist top •=> Langsame Crawler verfälschen das Ergebnis
  24. Browser Developer Tools: Netzwerk • Listung aller HTTP- Ressourcen •

    Antwortgrößen • Übertragungszeiten • Protokolle • Dateitypen Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 25 Man kann nur optimieren, was man messen kann
  25. Browser Developer Tools: Netzwerk Profiling • Detailliertes Profiling • Zeitliche

    Abfolge von Ressourcen Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 26 Man kann nur optimieren, was man messen kann
  26. Browser Developer Tools: Profiling • Ausführung von CSS / JS

    • Long Frames (>16.6ms) Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 27 Man kann nur optimieren, was man messen kann
  27. Browser Developer Tools • Beachten: • Ohne Browserplugins testen •

    CPU & Netzwerk Kapazität simulieren Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 28 Man kann nur optimieren, was man messen kann
  28. Empfehlung Für den ersten Überblick: Core Web Vitals via CrUX

    Vis Für kontinuierliches Messen & Monitoring: Real User Monitoring Für Detailanalyse & Tuning: Profiling (ergänzt mit PageSpeed Insights Empfehlungen) Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 29 Man kann nur optimieren, was man messen kann
  29. Top Gründe, warum Seiten langsam sind HTTP-Ressourcen & Netzwerk Max

    Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 30
  30. Strategie • Je weniger Daten übertragen werden müssen, desto schneller

    sind wir fertig. • Ressourcen für den kritischen Rendering-Pfad werden zuerst geladen (HTML, relevante Schriften, CSS für das Layout, Hauptbild) Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 31 Top Gründe, warum Seiten langsam sind
  31. Langsame Antwortzeiten des HTML Max Böhme - SEO Meetup Hamburg

    2025/04 @ Factorial 32 Top Gründe, warum Seiten langsam sind •Fullpage Cache / CDN •Profiling der Serverseite •Langsamer Verbindungsaufbau? (TCP, SSL, …)
  32. Wird nicht benötigt • Bilder, die nicht sichtbar sind •

    CSS / JavaScript, dass nicht ausgeführt wird / keine Auswirkung hat • Schriftarten, die nicht verwendet werden • Third Parties, die keiner mehr braucht => Ausbau oder Lazy Loading Ist (zu) groß • Kommen auf den nächsten Slides Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 33 Übertragene Daten Top Gründe, warum Seiten langsam sind
  33. Bilder • Sollten Dateiformat webp oder avif verwenden • Nur

    so groß geladen werden, wie sie auf dem Endgerät auch dargestellt werden können => HTML-Mechaniken img-srcset / picture nutzen • High-Res Bilder für Retina Displays gezielt einsetzen und aussteuern Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 34 Top Gründe, warum Seiten langsam sind
  34. Schriften • Sollten woff2 verwenden • Sollten nur Glyphen enthalten,

    die auch genutzt werden (z.B. kein kyrillisch für rein deutschsprachige Seiten) • Es sollten möglichst wenig unterschiedliche Schriften und Schnitte (bold, italic) verwendet werden. Manche Schriften können die Schnitte dynamisch berechnen => Spart! • Zielgröße: 20kB für Roboto für deutsch + englisch Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 35 Top Gründe, warum Seiten langsam sind
  35. CSS / JS Dateien • Sollten nur geladen werden, wenn

    sie auch benötigt werden. Auf der Startseite braucht man idR nicht die Komponenten für den Checkout • Source Code sollte minified / uglified werden • CSS: Base64-encoded inline-Bilder blähen die Dateigröße auf • Icons: Nur verwendete übertragen, nicht komplett FontAwesome Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 36 Top Gründe, warum Seiten langsam sind
  36. Caching • HTTP-Ressourcen („Dateien“) sollten nur einmal übertragen werden müssen

    • Gilt auch für HTML • Caching sollte aktiv sein und maximale Lebensdauer konfiguriert sein (nur mit Cache-Breaker-Mechaniken!) • Cache-Breaker in Dateinamen & URL-Parametern sollten sich wirklich nur ändern, wenn sich die Datei verändert hat • E-Tags, um erneute Übertragungen zu vermeiden Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 37 Top Gründe, warum Seiten langsam sind
  37. Kompression • Textbasierte Ressourcen sollte komprimiert übertragen werden • Nur

    textbasierte, keine Bilder! • brotli sollte gzip vorgezogen werden, weil über ein lokales Dictionary zusätzlich optimiert wird: 30% zusätzliche Einsparung! (Quelle: Website Boosting #57) Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 38 Top Gründe, warum Seiten langsam sind
  38. HTTP 2 / HTTP 3 • HTTP 1.1 sollte nicht

    mehr zur Kommunikation mit Endgeräten verwendet werden • HTTP 2 / 3 können: • Multiplexing: Mehrere Anfragen über dieselbe Netzwerkverbindung • Kompression von Headern (u.a. Cookies) • Konsequenz: Domainsharding ist out Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 39 Top Gründe, warum Seiten langsam sind
  39. Optimierung des Verbindungsaufbaus • SSL Stapling: Die Zertifikatskette zur Validierung

    wird direkt mit übertragen • Zero-Roundtrip-Verfahren mit HTTP 2 / HTTP 3 Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 40 Top Gründe, warum Seiten langsam sind
  40. Third-Parties • Es sollten nur Third-Parties geladen werden, die noch

    business- relevant sind. • Nur 1 A/B-Testing Tool, nicht die drei, die in den letzten Jahren ausprobiert wurden • Server-Side-Tracking vor Client-Side-Tracking bevorzugen Hübscher Nebeneffekt: Der datenschutzaffine Nutzer freut sich noch mehr Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 41 Top Gründe, warum Seiten langsam sind
  41. Erfahrungsbericht • Oft können 30-70% des Datenvolumens gespart werden Max

    Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 42 Top Gründe, warum Seiten langsam sind
  42. JavaScript • Sehr viel JavaScript ist nicht gut. • Komplexe

    Frontend-Frameworks sollten Server-Side-Rendering einsetzen • Responsive-Features sollten via media-queries anstatt per JavaScript umgesetzt sein • Animationen sollten per CSS und nicht per JS umgesetzt sein Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 44 Top Gründe, warum Seiten langsam sind
  43. CSS • Unnötig komplexe Selektoren Max Böhme - SEO Meetup

    Hamburg 2025/04 @ Factorial 45 Top Gründe, warum Seiten langsam sind
  44. Kritischer Rendering Pfad Max Böhme - SEO Meetup Hamburg 2025/04

    @ Factorial 46 Top Gründe, warum Seiten langsam sind
  45. • Du willst deine Conversion Rate tunen? • Du brauchst

    eine Einschätzung? • Die IT sagt „geht nicht“? • Der Entscheider hat „kein Budget“ für Geschwindigkeit? Sprich mich gerne an! Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 48 Max Böhme PageSpeed Expert www.maxboehme.net
  46. Weitere Quellen und Links • Ryte über Conversions & PageSpeed

    Zur Veranstaltung • Aufzeichnung des Talks • SEO MeetUp Hamburg • Factorial Max Böhme - SEO Meetup Hamburg 2025/04 @ Factorial 49