Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Die neuen Bewertungskriterien von Google ab 05 / 2021

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 40 Anzeige

Die neuen Bewertungskriterien von Google ab 05 / 2021

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?

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?

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Die neuen Bewertungskriterien von Google ab 05 / 2021 (20)

Anzeige

Die neuen Bewertungskriterien von Google ab 05 / 2021

  1. 1. Die neuen Bewertungskriterien von Google …also, die von Mai 2021
  2. 2. Hallo! 👋 Phil Marx Gelernter Fachinformatiker Arbeitet mit WordPress seit 2009 Betreut Kunden-Webseiten seit 2018 Twitter: @JustPhilMarx 2
  3. 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. 4. Fokus auf User Experience – ein Rückblick Es war einmal ein Google… 1
  5. 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. 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. 7 https://developers.google.com/search/blog/2020/11/timing-for-page-experience
  8. 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. 9. Warum das alles? 9 https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/device-use-marketer-tips/
  10. 10. Wichtiges Vorwissen Quelltexte, Viewports, Redering-Engines 2
  11. 11. Header Body Footer 11
  12. 12. Definition Viewport Viewport bezeichnet den in einem Mobilgerät sichtbaren Bereich 12 Viewport
  13. 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. 14. Core Web Vitals: Cumulative Layout Shift Hä? Wo ist mein Inhalt nun hin? 14 3
  15. 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. 16. Whoooops! Cumulative Layout Shift in einer schlimmen Ausprägung 16 Video: Google, CC BY 4.0
  17. 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. 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. 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. 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. 21. Core Web Vitals: Largest Contentful Paint Wenn das Headerbild auf sich warten lässt… 21 4
  22. 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. 23. Schlechter LCP 23 Bild: Google, CC BY 4.0
  24. 24. Guter LCP 24 Bild: Google, CC BY 4.0
  25. 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. 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. 27. Core Web Vitals: First Input Delay Manno, mein Browser hakt… 27 5
  28. 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. 29. FID – in grafisch 29 Bild: Google, CC BY 4.0
  30. 30. Bewertung ● Zeit zwischen Klick und Reaktion ○ <= 100ms: „Good“ ○ 100ms – 300ms: „Needs Improvement“ ○ > 300ms: „Poor“ 30 https://web.dev/fid/
  31. 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. 32. Google Core Vitals selbst ermitteln Metriken! Diagramme! Werte! 32 6
  33. 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. 34. Auswertung generieren 34
  35. 35. Browser simulieren 35
  36. 36. Alternative: PageSpeed Insights ● https://developers.google.com/speed/pagespeed/insights/ 36
  37. 37. Generelle Tipps zur Optimierung Es ist nicht alles Hexenwerk… 37 7
  38. 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. 39. Plugin-Tipps ● Caching / Optimierungsplugins (WP Rocket / Autoptimize) ● Selektives JavaScript laden (Asset Cleanup) ● Kein Plugin kann schlechten / umfangreichen Code verbessern! 39
  40. 40. 40 Danke! 👋 Fragen? Fragen! @JustPhilMarx / webfalken.de Thanks to SlidesCarnival for Slides template and Icons (CC BY 4.0)

Hinweis der Redaktion

  • BERT: Bidirectional Encoder Representations from Transformers / Neurales Netz für Natural Language Processing
  • Moto G4 seit Chrome v81 (Mai 2020) Standard in Entwicklungs-Tools/Lighthouse

×