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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

• 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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Core Web Vitals

Slide 5

Slide 5 text

@seokai #10LearningsPageSpeed100

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

@seokai #1: PageSpeed Tools messen keinen Erfolg

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

PageSpeed als Rankingfaktor

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Core Web Vitals

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

@seokai #2: Die Nutzerwahrnehmung ist entscheidend

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

@seokai #3: Nur echte Nutzerdaten zählen

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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 …

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@seokai #4: Sparsam mit Entwickler- Ressourcen umgehen

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Verzögerung der ersten Interaktion

Slide 34

Slide 34 text

Summe der Verschiebungen im Layout

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

@seokai #5: Tiefes Verständnis notwendig

Slide 40

Slide 40 text

Halbzeit! Jetzt noch 5 schnelle Tipps aus der Praxis!

Slide 41

Slide 41 text

@seokai #6: Latenz schlägt Bandbreite

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

• 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

Slide 45

Slide 45 text

@seokai #8: User Experience > PageSpeed

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

@seokai #9: Web Fonts Optimierung lohnt sich

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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/

Slide 58

Slide 58 text

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?