Ab Mai 2021 wird Google die Core Web Vitals mehr ins Ranking aufnehmen. Was sind Cumulative Layout Shift, Largest Contentful Paint und First Input Delay für Metriken? Wie werden sie erfasst? Wie kann man die eigene Seite prüfen?
2. Hallo! 👋
Phil Marx
Gelernter Fachinformatiker
Arbeitet mit WordPress seit 2009
Betreut Kunden-Webseiten seit 2018
Twitter: @JustPhilMarx
2
3. Ausblick
● Die Geschichte von Google
● Wichtige Grundlagen
● Core Web Vitals
○ Cumulative Layout Shift
○ Largest Contentful Paint
○ First Input Delay
● Core Web Vitals selbst ermitteln
● Generelle Tipps zur Optimierung
3
5. Vom Keyword zum Verstehen
5
02/2011
Hummingbird Update
Versteht Fragen, sucht auch
nach Synonymen; kann
Zusammenhänge von Texten
interpretieren
08/2013
Mobile Update
Mobilfreundlichkeit wird als
Rankingfaktor eingeführt; nicht
optimierte Seiten werden
bestraft, optimierte belohnt
04/2015
RankBrain Update
Suchbegriffe werden noch
besser verstanden,
entsprechende Ergebnisse
angezeigt
10/2015
Panda Update
Erkennt Content-Farmen, Link-
Spamming und hohes
Werbung-zu-Inhalt-Verhältnis
https://blog.hubspot.com/marketing/google-updates
6. Mobile first
6
03 / 2018
BERT Natural Language
Processing Update
Inhalte werden aktiv verstanden
und der (Mehr-)Wert
berücksichtigt
10/2019
Mobile-First Indexing
Update
Mobile Webseite wird primär
zum Indizieren herangezogen
Core Web Vitals Update
Stellt die User Experience bei
Besuch einer mobilen Webseite
in den Vordergrund
05/2021
https://developers.google.com/search/blog/2020/11/timing-for-page-experience
8. Warum das alles?
Mobile Nutzung von
Webseiten steigt seit
Jahren
8
https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/
13. Basis zur Bewertung einer
mobilen Seite
● Google nutzt (vermutlich) die Engine eines Moto G4 mit
langsamer Netzanbindung (3G)
● Motorola Moto G4:
○ Erstes Release: Mai 2016
○ 360 x 640 Pixel Displaygröße
13
15. Cumulative Layout Shift
● „Zusammengerechnete Layout-Verschiebung“
● Beschreibt die Verschiebung von Inhalten nach dem
initialen Design
○ Dynamisches Nachladen von Inhalten
○ Dynamisches Resizing von Widgets
○ Große Bilder ohne Dimensionsangabe
https://web.dev/cls/
15
17. Berechnungsgrundlagen
● Wie viel Prozent nimmt das bewegte Element im Viewport
ein (Impact Fraction)?
● Um wie viel Prozent verschiebt sich das Element (Distance
Fraction)?
● Werte werden multipliziert und für jedes Element addiert
17
18. Beispiel
● Element nimmt
ursprünglich 50% des
Screens ein; nach
Verschieben 75% des
Screens verändert
(Impact Fraction: 0,75)
● Verschiebung um 25%
(Distance Fraction: 0,25)
● 0,75 x 0,25 = 0,1875
18
Bild: Google, CC BY 4.0
22. Largest Contentful Paint
● „Größtes inhaltsgebendes Darstellen“
● Beschreibt die Zeit, bis das größte Element der Seite im
initialen Viewport geladen ist
https://web.dev/lcp/
22
26. Wie LCP verbessern?
● Elemente möglichst fix im Viewport anordnen statt
dynamisch (Flexbox / CSS-Grid helfen)
● Sorge für geringe Dateigrößen (bei Bildern auch srcset
nutzen)
● Nutze Caching / bei großen Seiten: CDN
● Lade kritische Elemente vor ( <link rel=„preload“ …> )
● Lade nicht kritische CSS-/JavaScript-Dateien im Footer
26
https://web.dev/optimize-lcp/
28. First Input Delay
● „Verzögerung bis zur ersten Eingabe“
● Beschreibt die Verzögerung eines Browsers zwischen
Interaktion und Reaktion
○ Browser muss JavaScript / CSS verarbeiten
○ Main Thread kann nur eine Aufgabe erledigen
○ Wird JavaScript / CSS gerendert, kann der Klick auf
den Link nicht verarbeitet werden
https://web.dev/fid/
28
30. Bewertung
● Zeit zwischen Klick und Reaktion
○ <= 100ms: „Good“
○ 100ms – 300ms: „Needs Improvement“
○ > 300ms: „Poor“
30
https://web.dev/fid/
31. Wie FID verbessern?
● Halte deine Seitenstruktur einfach
● Vermeide komplexe JavaScripte / CSS-Dateien
● Teile große Dateien auf kleinere Dateien auf
● Vermeide externe Inhalte wie Like-Buttons o.ä.
● Lade unkritische Inhalte erst im Footer
31
https://web.dev/optimize-fid/
33. Lighthouse
● Steht in Chromium-basierten Browsern zur Verfügung
(Google Chrome, Microsoft Edge, Opera)
● Teil der Entwickler-Tools
(Strg + Shift + I / Cmd + Shift + I)
33