Das Page Experience Update ist da! Die 10 wichtigsten Learnings aus dutzenden Core Web Vitals Optimierungen - Kai Spriestersbach SEARCH ONE

Kai Spriestersbach, 22. Juni 2021 Das Page Experience Update ist
da! 10 Learnings aus dutzenden  Core Web Vitals Projekten.

• Selbstständiger Berater und Unternehmer • Lehrbeauftragter an der Hochschule
für angewandte Wissenschaften Würzburg- Schweinfurt • > 25 Vorträge auf Online Marketing Konferenzen in den letzten 10 Jahren • 17 Jahre Erfahrung mit Online Projekten • Mediengestalter Digital (IHK) • B.Sc. E-Commerce • Berufsbegleitendes Masterstudium M.Sc. Web Science Kai Spriestersbach

Core Web Vitals

@seokai #10LearningsPageSpeed100

PageSpeed Metriken • PageSpeed Insights 0 - 100 • GTmetrix
A - F • Time To First Byte (TTFB) • Start Render • First Contentful Paint (FCP) • First Meaningful Paint (FMP) • Time To Interactive (TTI) • First CPU Idle • First Input Delay (FID) • Total Blocking Time (TBT) • Cumulative Layout Shift (CLS) • Largest Contentful Paint (LCP) • DomContentLoaded • OnLoad Time • Document Complete • Fully Loaded Time • Page Load Time (Google Analytics) • HTTP Requests (Number) • DNS Requests (Number) • Total Size (in Bytes)

@seokai #1: PageSpeed Tools messen keinen Erfolg

https://googlechrome.github.io/lighthouse/scorecalc/

PageSpeed als Rankingfaktor Seit Juli 2018: Faktor für Mobile &
Ads https://developers.google.com/web/updates/2018/07/search-ads-speed https://googleblog.blogspot.com/2009/06/lets-make-web-faster.html Juni 2009: Erstmals eingeführt

PageSpeed als Rankingfaktor

Roll-Out als globaler Rankingfaktor https://developers.google.com/search/blog/2020/11/timing-for-page-experience

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

Core Web Vitals

@seokai #2: Die Nutzerwahrnehmung ist entscheidend

Gemessen von echten Besuchern, zum Zeitpunkt deren Besuchs mit einem
Chrome-Browser. Gemessen von einer virtuellen (headless) Chrome-Instanz zum Zeitpunkt des Toolaufrufs.

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

https://twitter.com/JohnMu/status/1402237950155444226

@seokai #3: Nur echte Nutzerdaten zählen

Grigorik, I. „Building Faster Websites WebRTC crash course on web
performance“, 2012

From bits to DOM Bits Bytes Characters Tokens Nodes DOM
00010011111110101000110110011011101010100110010001011111001 … 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0a 3c 48 54 4d 4c 3e 0a 3c … <!DOCTYPE html><HTML><head><meta charset="UTF-8" /><link … StartTag: html EndTag: head StartTag: head Tag: meta … StartTag: body … html head meta link body h1 title p … html head meta link body h1 title p a

From DOM to Paint DOM html head meta link body
h1 title p a CSSOM body h1 p a body { font-family: sans-serif; } h1 { font-size: 16px; } a { color: blue; } Render Tree p { display: none; } body h1 p a Layout Paint

https://www.smashingmagazine.com/2021/06/image-optimization-book-release/

@seokai #4: Sparsam mit Entwickler- Ressourcen umgehen

Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich

Verzögerung der ersten Interaktion

Summe der Verschiebungen im Layout

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

layout shift score = impact fraction * distance fraction Anteil
des betroffenen Viewport-Bereichs 75% } 0.75 https://web.dev/cls/

Verschiebung als Anteil des Viewports 25% } 0.75 layout shift
score = impact fraction * distance fraction 0.25 https://web.dev/cls/

Berechnung des Layout Shift https://web.dev/cls/ layout shift score = impact
fraction * distance fraction 0.75 0.25 * = 0.1875

@seokai #5: Tiefes Verständnis notwendig

Halbzeit! Jetzt noch 5 schnelle Tipps aus der Praxis!

@seokai #6: Latenz schlägt Bandbreite

Belshe, M., Google: "More Bandwidth Doesn’t Matter (much)", 2010

@seokai #7: Echtzeit-Monitoring mit Matomo & Google Analytics

• Pro • Erfassung aller Core Web Vitals • Echte
Felddaten echter Nutzer • Monitoring in Echtzeit möglich • Contra • Nicht ohne Analytics / Matomo • Erhöhte Last für Besucher • Kein Debugging Monitoring in Analytics / Matomo via JS https://github.com/GoogleChrome/web-vitals

@seokai #8: User Experience > PageSpeed

https://www.cloudﬂare.com/de-de/learning/performance/more/website-performance-conversion-rates/

https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm

https://web.dev/yahoo-japan-news/

Ups! https://web.dev/yahoo-japan-news/

@seokai #9: Web Fonts Optimierung lohnt sich

https://transfonter.org/ Danke an Daniel Abromeit @der_abro

https://github.com/hakatashi/unicode-map

4 DNS Requests  30 HTTP-Requests  300 KB Daten via Google
Fonts Selfhosted reduced Font 0 DNS Requests  1 HTTP-Requests  20 KB Daten

@seokai #10: PageSpeed Optimierung nach Pareto ist möglich!

Die 10 schnellsten Hacks für besseren PageSpeed 1. HTTP/2 aktivieren.
2. Lokales Caching aktivieren. 3. Bilder nur in verwendeter Größe einbinden. (Responsive Images) 4. Bilder in modernen Formaten bereitstellen (WebP/AVIF/JPEGXL). 5. Lazy-Loading für Bilder und Iframes aktivieren. 6. Kritische Ressourcen „prefetchen“ und mittels Server-Push übermitteln. 7. Kritisches CSS erstellen und inline im HTML-Head einbinden. 8. JavaScript mittels „defer“ verzögert laden. 9. Third-Party-Tags reduzieren. 10. Bei SPAs serverseitiges Rendering aktivieren. (React, Angular, vue, etc.) h!ps://www.search-one.de/newsle!er/

Mein neuer Onlinekurs PageSpeed & Web Vitals sta!et in Kürze!
20% Raba! mit dem Code „SearchSeekers21“ h!ps://kai.im/pagespeed Wollen Sie noch mehr wissen?

Das Page Experience Update ist da! Die 10 wicht...

Das Page Experience Update ist da! Die 10 wichtigsten Learnings aus dutzenden Core Web Vitals Optimierungen - Kai Spriestersbach SEARCH ONE

More Decks by Kai Spriestersbach

Other Decks in Marketing & SEO

Featured

Transcript