Das Page Experience Update kommt 2021! Wie optimiert man die Core Web Vitals?

Googles Page Experience Update steht vor der Tür. Im kommenden Jahr wird die Ladezeit zum Rankingfaktor und damit zum Optimierungsgegenstand für Suchmaschinenoptimierer. Kai Spriestersbach zeigt in seinem Vortrag, wie man die Core Web Vitals gezielt verbessert.

Transcript

1. Tweaking Web Vitals Kai Spriestersbach
2. Research & Development bei der eology GmbH • B.Sc. E-Commerce • Mediengestalter IHK • Lehrbeauftragter an der FHWS • Aus- und Weiterbildung von Mitarbeitern • Inhaber von SEARCH ONE • Speaker auf SMX, SEOkomm, SEO-Day, OMK, OMKB, etc. Kai Spriestersbach
3. SEO aus Leidenschaft • Online seit 1996 • Web-Design seit 2001 • Web-Entwicklung 2004 • SEO seit 2008 • Selbstständig seit 2012 Kai Spriestersbach Matt Cutts Head Of Web Spam, Google Sie könnten mich kennen von
4. Mein Online-Seminar startet demnächst! Lerne einfach alles über PageSpeed & Web Vitals Melde Dich jetzt unverbindlich für mein Online Seminar an! https://kai.im/pagespeed
5. Neuer Rankingfaktor Page Experience
6. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
7. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
8. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
9. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
10. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
11. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
12. Core Web Vitals
15. Besteht Handlungsbedarf?
16. https://developers.google.com/speed/pagespeed/insights/?hl=de
20. https://bigquery.cloud.google.com/dataset/chrome-ux-report:all
21. https://de.sistrix.com/search-one.de/core-web-vitals
22. https://search.google.com/search-console/core-web-vitals
23. Web Vitals optimieren
24. Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich https://web.dev/lcp/
25. Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich https://web.dev/lcp/
26. Rendering „sichtbar“ machen https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=de Progressives Rendering Unoptimiertes Rendering
27. Der kritische Rendering-Pfad https://bitsofco.de/understanding-the-critical-rendering-path/
28. Performance in den Chrome Developer Tools
30. Verzögerung der ersten Interaktion https://web.dev/fid/
31. https://web.dev/fid/
32. Es gibt keine Labdaten für den FID! https://developers.google.com/speed/pagespeed/insights/
33. Verzögerung der ersten Interaktion https://web.dev/fid/
34. Interaction Readiness verbessern
35. Non-blocking JavaScript
40. Webworker verwenden https://github.com/developit/workerize • Supports synchronous and asynchronous worker functions • Works beautifully with async/await • Just 800 bytes of gzipped ES3
41. Verschiebungen im Layout https://web.dev/cls/
42. Verschiebungen im Layout https://web.dev/cls/
43. Verschiebungen im Layout layout shift score = impact fraction * distance fraction https://web.dev/cls/
44. Verschiebungen im Layout layout shift score = impact fraction * distance fraction https://web.dev/cls/
45. layout shift score = impact fraction * distance fraction Verschiebungen im Layout 75% } 0.75 https://web.dev/cls/
46. Verschiebungen im Layout https://web.dev/cls/ 0.75 layout shift score = impact fraction * distance fraction
47. Verschiebungen im Layout 25% } 0.75 layout shift score = impact fraction * distance fraction 0.25 https://web.dev/cls/
48. Verschiebungen im Layout https://web.dev/cls/ layout shift score = impact fraction * distance fraction 0.75 0.25 * = 0.1875
49. Layout Shift verhindern
50. Verbindliche Positionierung im Template https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
51. Häufiger Fehler: Bilder ohne Größenangabe ???
52. Definierte Dimensionen <img>
53. Critical CSS
54. Critical CSS Tool https://criticalcss.com/
55. Vielen Dank! Werde Experte im Thema PageSpeed & Web Vitals Ich freu’ mich auf Dich! https://kai.im/pagespeed Du kennst mich vielleicht von