Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2018: Performance zählt

251 views

Published on

Slides vom Talk auf der DeafIT 2018.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

2018: Performance zählt

  1. 1. 2018: PERFORMANCE ZÄHLT Jo Spelbrink @joville Deaf-IT 2018
  2. 2. JO SPELBRINK
 @joville ‣ developer @ ‣ chairman @
  3. 3. GOOGLE: STARTING IN JULY 2018, PAGE SPEED WILL BE A RANKING FACTOR FOR MOBILE SEARCHES.
 QUELLE: HTTPS://WEBMASTERS.GOOGLEBLOG.COM/2018/01/USING-PAGE-SPEED-IN-MOBILE-SEARCH.HTML
  4. 4. WEBNUTZUNG 2016 DESKTOP-MOBILE-TABLET
  5. 5. WELTWEIT 2016 Quelle: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/#monthly-201601-201612
  6. 6. WEBNUTZUNG 2018 DESKTOP-MOBILE-TABLET
  7. 7. WELTWEIT 2018 Quelle: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/
  8. 8. DEUTSCHLAND 2018 Quelle: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/germany
  9. 9. ÖSTERREICH 2018 Quelle: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/austria
  10. 10. SCHWEIZ 2018 Quelle: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/switzerland
  11. 11. MOBILES INTERNET 1. Kenia 83% 2. Nigeria 81% 3. Indien 79% 4. Singapur 78% 5. Ghana 75% 13. Polen 59% 15. Weltweit 52% 22. USA 41% 30. Deutschland 37% Quelle: https://www.statista.com/statistics/430830/share-of-mobile-internet-traffic-countries/
  12. 12. MOBILES INTERNET VERÄNDERT DIE
 USER EXPERIENCE (UX)
  13. 13. UX = PERFORMANCE ‣ Niedrigere Absprungrate (bouncing rate) ‣ Leichtere Auffindbarkeit (besseres Ranking) ‣ Bessere Accessibility
 (sauberer Code = bessere Ausführung) ‣ Mehr Umsätze bei E-Commerce 

  14. 14. PERFORMANCEFAKTOREN ‣ HTML-Markup-Struktur ‣ Bildgrößen und Bildformate ‣ Aufgeblähtes und/oder ungenütztes CSS,
 sowie dessen Einbindung, Critical
 Rendering path (inline JS) ‣ CSS-Properties bei Animationen ‣ Einbindung und Nutzung von
 Javascript-Libraries ‣ Servereinstellungen/HTTP header fields ‣ Lazyloading-Techniken (Schriften, Bilder)
  15. 15. BEISPIELE ‣ Überflüssige HTML-Elemente
 (Reduzieren, wo immer es geht) ‣ Zu große Bilder/falsche Bildformate
 (Offscreen sizes, .png für Fotos) ‣ CSS-Animation: top, left, bottom, right
 erzwingen Repaints statt 60 FPS
 Besser transform: translate(); ‣ Pure JS statt jquery (spart ~80kb und
 nutzt direkt die Möglichkeiten im Browser) ‣ http, php 5.6, fehlendes gzip
  16. 16. LAZYLOADING ‣ Images ‣ JS-Libraries mit 
 Intersection Observer API
 (zB Lozad, Yall.js …) funktionieren
 nicht im IE 11 ‣ Lazysizes, Blazy ‣ Mein Tipp: Lazysizes (validiert besser) ‣ Schriften ‣ Fontfaceobserver
  17. 17. PERFORMANCE TESTING ‣ Lighthouse (Chrome Dev Tools + CLI) ‣ Pagespeed Insights
 https://developers.google.com/speed/pagespeed/insights/ ‣ Webhint (Webscanner + CLI)
 https://webhint.io/
  18. 18. PRAXISBEISPIEL MIT LIGHTHOUSE
  19. 19. SONDERFALL ‣ Hurricane Web (USA) ‣ Text-only Versionen von
 CNN und NPR
 https://text.npr.org/
 https://text.npr.org/ ‣ Batterieschonend ‣ Infos trotz extrem geringer Bandbreite ‣ Nur 1 Request (nur HTML Dokument)

  20. 20. TRENDS ‣ Reactive JS Frameworks
 (ReactJS, vueJS, elm, etc.) ‣ Static Page Generation for
 Production (schneller & sicherer) ‣ Flatfile CMS (ohne Datenbank) ‣ API-First Content Management
 (siehe Talk von 2017) ‣ Possibly coming hot shit:
 WebAssembly (zB via Rust),
 Webcomponents
  21. 21. A Wiedner Hauptstraße 64 
 1040 Wien T 01 89 00 179 M office@zensations.at W www.zensations.at DANKE! FRAGEN?

×