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

Weitere ähnliche Inhalte

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

Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft AG
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
Robert Siegel
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
André Scharf
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Web Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the FutureWeb Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the Future
Alexander Loechel
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
TA Trust Agents Internet GmbH
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
PARX
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
Artur Kosch
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
Jens Binfet
 
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
WBL-Konzept
 
Office 365 Akademie News - September 2020
Office 365 Akademie News - September 2020Office 365 Akademie News - September 2020
Office 365 Akademie News - September 2020
Thomas Maier
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
Bastian Grimm
 
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-FaktorenMobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Advance Metrics
 
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-FaktorenMobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Christina Meyer
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
chrisign gmbh
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
Steven Grzbielok
 

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

Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Web Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the FutureWeb Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the Future
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
 
Office 365 Akademie News - September 2020
Office 365 Akademie News - September 2020Office 365 Akademie News - September 2020
Office 365 Akademie News - September 2020
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-FaktorenMobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
 
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-FaktorenMobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
Mobile-SEO nach Mobilegeddon: Relevanz und Ranking-Faktoren
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 

Mehr von Phil Marx

New Ranking Metrics by Google
New Ranking Metrics by GoogleNew Ranking Metrics by Google
New Ranking Metrics by Google
Phil Marx
 
Podcasting unter WordPress
Podcasting unter WordPressPodcasting unter WordPress
Podcasting unter WordPress
Phil Marx
 
DSGVO und WordPress
 DSGVO und WordPress DSGVO und WordPress
DSGVO und WordPress
Phil Marx
 
Aus Englisch mach Deutsch
Aus Englisch mach DeutschAus Englisch mach Deutsch
Aus Englisch mach Deutsch
Phil Marx
 
Lightweight use of transients
Lightweight use of transientsLightweight use of transients
Lightweight use of transients
Phil Marx
 
Evernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte Tool
Evernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte ToolEvernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte Tool
Evernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte Tool
Phil Marx
 

Mehr von Phil Marx (6)

New Ranking Metrics by Google
New Ranking Metrics by GoogleNew Ranking Metrics by Google
New Ranking Metrics by Google
 
Podcasting unter WordPress
Podcasting unter WordPressPodcasting unter WordPress
Podcasting unter WordPress
 
DSGVO und WordPress
 DSGVO und WordPress DSGVO und WordPress
DSGVO und WordPress
 
Aus Englisch mach Deutsch
Aus Englisch mach DeutschAus Englisch mach Deutsch
Aus Englisch mach Deutsch
 
Lightweight use of transients
Lightweight use of transientsLightweight use of transients
Lightweight use of transients
 
Evernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte Tool
Evernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte ToolEvernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte Tool
Evernote - Dein virtuelles Gedächtnis - a.k.a. das unterschätzte Tool
 

Die neuen Bewertungskriterien von Google ab 05 / 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
  • 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/
  • 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
  • 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
  • 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)

Hinweis der Redaktion

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