Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie User Centered Pagespeed Optimization - SEOkomm 2018
Ähnlich wie User Centered Pagespeed Optimization - SEOkomm 2018 (20)
User Centered Pagespeed Optimization - SEOkomm 2018
- 1. #1 Freitag, 23. November 2018 USER CENTERED PAGESPEED OPTIMIZATION
- 2. #2 Mehr Conversions (Sales, Downloads …) Was ist das eigentlich? Ladezeitoptimierung Ladezeit = Performance » Performance beschreibt in der IT das Leistungsverhalten von Soft- und Hardware » Performance beschreibt im Management die Erreichung eines vorgegebenen Ziels » Performance beschreibt in der IT das Leistungsverhalten von Soft- und Hardware » Performance beschreibt im Management die Erreichung eines vorgegebenen Ziels Mehr Conversions (Sales, Downloads …)
- 3. #3 Gesteigertes Stresslevel EINFLUSS HOHER LADEZEITEN AUF DEN NUTZER
- 4. #4 Aufmerksamkeitsspanne – Jakob Nielsen (1993) EINFLUSS HOHER LADEZEITEN AUF DEN NUTZER Bis 1 Sekunde: » Ladevorgang ist gefühlt flüssig Ab 1 Sekunde: » Ladeverzögerung ist merklich » Seite wirkt träge » Gedanken schweifen ab Ab 10 Sekunden: » Nutzer benötigt visuell klares Feedback » Verlust der Aufmerksamkeit
- 5. #5 Aufmerksamkeitsspanne – Microsoft Studie 2015 EINFLUSS HOHER LADEZEITEN AUF DEN NUTZER Erkenntnisse: » Sinkende kontinuierliche Aufmerksamkeit » Verbesserte selektive Aufmerksamkeit » Menschen sind ungeduldiger » Und erwarten ein sofortiges Ergebnis Quelle: https://de.scribd.com/document/265348695/Microsoft-Attention-Spans-Research-Report
- 6. #6 Aufmerksamkeitsspanne – Jakob Nielsen (1993) EINFLUSS HOHER LADEZEITEN AUF DEN NUTZER Bis 1 Sekunde: » Ladevorgang ist gefühlt flüssig Ab 1 Sekunde: » Ladeverzögerung ist merklich » Seite wirkt träge » Gedanken schweifen ab Ab 10 Sekunden: Ab ~4 Sekunden: » Nutzer benötigt visuell klares Feedback » Verlust der Aufmerksamkeit
- 8. #8 WIE KANN ICH DAS MESSEN? WAS IST WICHTIG?
- 9. #9 Warum mobile langsamer ist HERAUSFORDERUNGEN
- 10. #10 Was kann optimiert werden? HERAUSFORDERUNGEN Quelle: https://developers.google.com/speed/docs/insights/mobile
- 11. #11 Verlässliche mobile Daten ohne Simulation HERAUSFORDERUNGEN Setup nach USB-Verbindung: » Android Studio installieren » Entwicklereinstellungen am Smartphone -> Enable USB Debugging » „chrome://inspect/#devices“ » Öffnen der Chrome Console -> Show Remote Devices » Auswählen des Tabs
- 12. #12 First Paint KEY PERFORMANCE INDIKATOREN
- 13. #13 First Contentful Paint KEY PERFORMANCE INDIKATOREN
- 14. #14 First Meaningful Paint KEY PERFORMANCE INDIKATOREN
- 15. #15 First Meaningful Paint – HERO Elemente KEY PERFORMANCE INDIKATOREN
- 16. #16 Time To Interactive KEY PERFORMANCE INDIKATOREN
- 17. #17 Time To Interactive – Browser Main Thread KEY PERFORMANCE INDIKATOREN
- 18. #18 Time To Interactive – Browser Main Thread KEY PERFORMANCE INDIKATOREN Main Thread IdleMain Thread not Idle
- 19. #19 Time To Interactive – Browser Main Thread KEY PERFORMANCE INDIKATOREN
- 20. #20 First Input Delay KEY PERFORMANCE INDIKATOREN Quelle: https://developers.google.com/web/updates/2018/05/first-input-delay
- 22. #22 Mobile First Design nach dem RAIL-Modell GENERELLE LÖSUNG Quelle: https://developers.google.com/web/fundamentals/performance/rail
- 24. #24 Grundlagen – DOM, CSSOM, Render Tree, Nodes OPTIMIERUNGSMÖGLICHKEITEN Quelle: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction DOM Nodes
- 25. #25 Was ist ein Reflow PERCEIVED PAGESPEED
- 26. #26 Ablauf im Browser bis zur Darstellung auf dem Monitor PERCEIVED PAGESPEED DOM Render Tree JS CSSOM Layout Paint
- 27. #27 Eliminieren von Reflows – betrifft Layout und Paint PERCEIVED PAGESPEED DOM Render Tree JS » Ändern geometrischer Angaben der DOM Nodes CSSOM » Position von DOM Nodes muss neu berechnet weden Layout PaintPaintLayout
- 28. #28 Paint Eliminieren von Repaints – betrifft nur Paint PERCEIVED PAGESPEED DOM Render Tree PaintLayout JS » Änderung Hintergrundfarbe » Schatten/Font CSSOM » Aussehen muss neu berechnet werden
- 29. #29 Verschlanken des Critical Rendering Path PERCEIVED PAGESPEED HEADER-NAVIGATION STAGE HEADLINES INCENTIVES Page Content Above The Fold „Viewport“ Below The Fold „Non-Viewport“ ToDos: » Reduktion der DOM Nodes » Flache Hierarchie im DOM » Splitten großer CSS & JS Skripte in Critical & Non- Critical » Vermeiden von für den Render-Tree unnötigem HTML
- 30. #30 Server Side Rendering JAVASCRIPT CDN Server » SSR vordefinierter Module » HTML bzw. DOM auf CDN cachen » Ausführen weiterer JavaScripte » AJAX & history.Pushstate()
- 31. #31 Optimieren der Ausführungslogik JAVASCRIPT Single Thread: window.requestAnimationFrame() Multi Thread: Web Worker » Aufsplitten oft sehr schwer » Höhere Ausführungszeit » Worker kein Zutriff auf DOM API » Setup des Workers Contra: