Slide 1
Slide 1 text
Tweaking
Web Vitals
Kai Spriestersbach
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Neuer Rankingfaktor
Page Experience
Slide 6
Slide 6 text
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Slide 7
Slide 7 text
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Slide 8
Slide 8 text
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Slide 9
Slide 9 text
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Slide 10
Slide 10 text
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Slide 11
Slide 11 text
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Slide 12
Slide 12 text
Core Web Vitals
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Besteht Handlungsbedarf?
Slide 16
Slide 16 text
https://developers.google.com/speed/pagespeed/insights/?hl=de
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
https://bigquery.cloud.google.com/dataset/chrome-ux-report:all
Slide 21
Slide 21 text
https://de.sistrix.com/search-one.de/core-web-vitals
Slide 22
Slide 22 text
https://search.google.com/search-console/core-web-vitals
Slide 23
Slide 23 text
Web Vitals optimieren
Slide 24
Slide 24 text
Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich
https://web.dev/lcp/
Slide 25
Slide 25 text
Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich
https://web.dev/lcp/
Slide 26
Slide 26 text
Rendering „sichtbar“ machen
https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=de
Progressives
Rendering
Unoptimiertes
Rendering
Slide 27
Slide 27 text
Der kritische Rendering-Pfad
https://bitsofco.de/understanding-the-critical-rendering-path/
Slide 28
Slide 28 text
Performance in den Chrome Developer Tools
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Verzögerung der ersten Interaktion
https://web.dev/fid/
Slide 31
Slide 31 text
https://web.dev/fid/
Slide 32
Slide 32 text
Es gibt keine Labdaten für den FID!
https://developers.google.com/speed/pagespeed/insights/
Slide 33
Slide 33 text
Verzögerung der ersten Interaktion
https://web.dev/fid/
Slide 34
Slide 34 text
Interaction
Readiness
verbessern
Slide 35
Slide 35 text
Non-blocking JavaScript
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Webworker verwenden
https://github.com/developit/workerize
• Supports synchronous and asynchronous worker functions
• Works beautifully with async/await
• Just 800 bytes of gzipped ES3
Slide 41
Slide 41 text
Verschiebungen im Layout
https://web.dev/cls/
Slide 42
Slide 42 text
Verschiebungen im Layout
https://web.dev/cls/
Slide 43
Slide 43 text
Verschiebungen im Layout
layout shift score = impact fraction * distance fraction
https://web.dev/cls/
Slide 44
Slide 44 text
Verschiebungen im Layout
layout shift score = impact fraction * distance fraction
https://web.dev/cls/
Slide 45
Slide 45 text
layout shift score = impact fraction * distance fraction
Verschiebungen im Layout
75%
}
0.75
https://web.dev/cls/
Slide 46
Slide 46 text
Verschiebungen im Layout
https://web.dev/cls/
0.75
layout shift score = impact fraction * distance fraction
Slide 47
Slide 47 text
Verschiebungen im Layout
25%
}
0.75
layout shift score = impact fraction * distance fraction
0.25
https://web.dev/cls/
Slide 48
Slide 48 text
Verschiebungen im Layout
https://web.dev/cls/
layout shift score = impact fraction * distance fraction
0.75 0.25
* = 0.1875
Slide 49
Slide 49 text
Layout Shift verhindern
Slide 50
Slide 50 text
Verbindliche Positionierung im Template
https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
Slide 51
Slide 51 text
Häufiger Fehler: Bilder ohne Größenangabe
???
Slide 52
Slide 52 text
Definierte Dimensionen
![]()
Slide 53
Slide 53 text
Critical CSS
Slide 54
Slide 54 text
Critical CSS Tool
https://criticalcss.com/
Slide 55
Slide 55 text
Vielen Dank!
Werde Experte im Thema
PageSpeed & Web Vitals
Ich freu’ mich auf Dich!
https://kai.im/pagespeed
Du kennst mich vielleicht von