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?

1. Die neuen
Bewertungskriterien
von Google
…also, die von Mai 2021

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

4. Fokus auf User
Experience –
ein Rückblick
Es war einmal ein Google…
1

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

7. 7
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/

9. Warum das alles?
9
https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/device-use-marketer-tips/

10. Wichtiges Vorwissen
Quelltexte, Viewports, Redering-Engines
2

11. Header
Body
Footer
11

12. Definition Viewport
Viewport bezeichnet den in einem
Mobilgerät sichtbaren Bereich
12
Viewport

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

14. Core Web Vitals:
Cumulative Layout Shift
Hä? Wo ist mein Inhalt nun hin?
14
3

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

16. Whoooops!
Cumulative Layout Shift
in einer schlimmen
Ausprägung
16
Video: Google, CC BY 4.0

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

19. Weiteres
● Layout Shifts aufgrund User-Interaktion zählen nicht (max.
500ms)
● Bewertung:
○ <= 0,1: „Good Experience“
○ 0,1 – 0,25: „Needs improvement“
○ > 0,25: „Poor Experience“
19
https://web.dev/cls/

20. Wie CLS vermeiden?
● Relevante JS-/CSS-Dateien möglichst früh laden (oder inline)
● Definierte Größenangaben für jedes Bild/jede Content-Box
● Vermeide dynamische Layout-Anpassungen mit JavaScript
(Mansonry!)
● Setze auf dynamische Designstrukturen mit CSS
(Flexbox / Grid)
● Nutze für Animationen CSS statt JavaScript (transform(),
scale())
20
https://web.dev/optimize-cls/

21. Core Web Vitals:
Largest Contentful Paint
Wenn das Headerbild auf sich warten lässt…
21
4

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

23. Schlechter LCP
23
Bild: Google, CC BY 4.0

24. Guter LCP
24
Bild: Google, CC BY 4.0

25. Bewertung
● Größtes Element geladen:
○ <= 2,5 Sekunden: „Good“
○ 2,5 – 4,0 Sekunden: „Needs Improvement“
○ > 4,0 Sekunden: „Poor“
25
https://web.dev/lcp/

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/

27. Core Web Vitals:
First Input Delay
Manno, mein Browser hakt…
27
5

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

29. FID – in grafisch
29
Bild: Google, CC BY 4.0

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/

32. Google Core Vitals
selbst ermitteln
Metriken! Diagramme! Werte!
32
6

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

34. Auswertung generieren
34

35. Browser simulieren
35

36. Alternative: PageSpeed Insights
● https://developers.google.com/speed/pagespeed/insights/
36

37. Generelle Tipps zur
Optimierung
Es ist nicht alles Hexenwerk…
37
7

38. Habe einen guten Unterbau
● Schneller Webserver / schnelle Datenbank
● Setze nur notwendige CSS-/JavaScript-Dateien ein
● Nutze CSS-Animationen oder Vanilla JavaScript statt
komplexer Bibliotheken (jQuery)
● Vermeide externe Bibliotheken
● Vermeide unnötige Plugins / Multi Purpose Themes
● Optimiere deine Bilder für Web
● Halte den Code deiner Webseite schlank
38

39. Plugin-Tipps
● Caching / Optimierungsplugins (WP Rocket /
Autoptimize)
● Selektives JavaScript laden (Asset Cleanup)
● Kein Plugin kann schlechten / umfangreichen Code
verbessern!
39

40. 40
Danke! 👋
Fragen? Fragen!
@JustPhilMarx / webfalken.de
Thanks to SlidesCarnival for Slides template and Icons (CC BY 4.0)