Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=128

Kai Spriestersbach

November 06, 2020
Tweet

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

  13. None
  14. None
  15. Besteht Handlungsbedarf?

  16. https://developers.google.com/speed/pagespeed/insights/?hl=de

  17. None
  18. None
  19. None
  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

  29. None
  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

  36. None
  37. None
  38. None
  39. None
  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