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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Neuer Rankingfaktor
   Page Experience
   

   View Slide

6. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
   

   View Slide

7. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
   

   View Slide

8. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
   

   View Slide

9. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
   

   View Slide

10. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
    

    View Slide

11. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
    

    View Slide

12. Core Web Vitals
    

    View Slide

13. View Slide

14. View Slide

15. Besteht Handlungsbedarf?
    

    View Slide

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

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. https://bigquery.cloud.google.com/dataset/chrome-ux-report:all
    

    View Slide

21. https://de.sistrix.com/search-one.de/core-web-vitals
    

    View Slide

22. https://search.google.com/search-console/core-web-vitals
    

    View Slide

23. Web Vitals optimieren
    

    View Slide

24. Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich
    https://web.dev/lcp/
    

    View Slide

25. Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich
    https://web.dev/lcp/
    

    View Slide

26. Rendering „sichtbar“ machen
    https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=de
    Progressives
    Rendering
    Unoptimiertes
    Rendering
    

    View Slide

27. Der kritische Rendering-Pfad
    https://bitsofco.de/understanding-the-critical-rendering-path/
    

    View Slide

28. Performance in den Chrome Developer Tools
    

    View Slide

29. View Slide

30. Verzögerung der ersten Interaktion
    https://web.dev/fid/
    

    View Slide

31. https://web.dev/fid/
    

    View Slide

32. Es gibt keine Labdaten für den FID!
    https://developers.google.com/speed/pagespeed/insights/
    

    View Slide

33. Verzögerung der ersten Interaktion
    https://web.dev/fid/
    

    View Slide

34. Interaction
    Readiness
    verbessern
    

    View Slide

35. Non-blocking JavaScript
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

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
    

    View Slide

41. Verschiebungen im Layout
    https://web.dev/cls/
    

    View Slide

42. Verschiebungen im Layout
    https://web.dev/cls/
    

    View Slide

43. Verschiebungen im Layout
    layout shift score = impact fraction * distance fraction
    https://web.dev/cls/
    

    View Slide

44. Verschiebungen im Layout
    layout shift score = impact fraction * distance fraction
    https://web.dev/cls/
    

    View Slide

45. layout shift score = impact fraction * distance fraction
    Verschiebungen im Layout
    75%
    }
    0.75
    https://web.dev/cls/
    

    View Slide

46. Verschiebungen im Layout
    https://web.dev/cls/
    0.75
    layout shift score = impact fraction * distance fraction
    

    View Slide

47. Verschiebungen im Layout
    25%
    }
    0.75
    layout shift score = impact fraction * distance fraction
    0.25
    https://web.dev/cls/
    

    View Slide

48. Verschiebungen im Layout
    https://web.dev/cls/
    layout shift score = impact fraction * distance fraction
    0.75 0.25
    * = 0.1875
    

    View Slide

49. Layout Shift verhindern
    

    View Slide

50. Verbindliche Positionierung im Template
    https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
    

    View Slide

51. Häufiger Fehler: Bilder ohne Größenangabe
    ???
    

    View Slide

52. Definierte Dimensionen
    
    

    View Slide

53. Critical CSS
    

    View Slide

54. Critical CSS Tool
    https://criticalcss.com/
    

    View Slide

55. Vielen Dank!
    Werde Experte im Thema
    PageSpeed & Web Vitals
    Ich freu’ mich auf Dich!
    https://kai.im/pagespeed
    Du kennst mich vielleicht von
    

    View Slide