Recommended
More Related Content
What's hot
What's hot (20)
Similar to Frontend performance on the web | Presentation @ecommercecamp 2019
Similar to Frontend performance on the web | Presentation @ecommercecamp 2019 (20)
Recently uploaded
Recently uploaded (20)
Frontend performance on the web | Presentation @ecommercecamp 2019
- 2. Bjรถrn Jacob CTO TRITUM Board dreistrom.land geocouch.de
- 3. Wir machen Unsichtbares sichtbar. Wir kreieren mehrsprachige Inhalte. Wir betreiben digitaleProjekte. Zusammen sindwir dreistrom.land
- 4. Kunden
- 6. So, you are a โdesignerโ?
- 7. 7 โZalando saw a 0.7% increase in revenue when they shaved 100ms off their load time.โ Zalando, 2018
- 8. 8 โCarousell reduced page load time by 65% and saw a 63% increase in organic traffic [...]โ Carousell, 2018
- 9. 9 17.6 million kilowatt hours/ d 2 billion People 5 pages/ d 1.500.000 GB data Tim Kadlec, 2019
- 10. 10
- 12. Pillars of performance โข Server Side Rendering โข Asset delivery โข Client bandwidth โข Client CPU cycles 12
- 13. Server side rendering โข Write fast code โข Cache what canโt be made fast โข Consider stuff older than 5 sec static โข Performance is design โข OP-TI-MIZE 13
- 14. Asset delivery โข Deliver fast โข Deliver regionally โข Deliver optimized โข Really mean that! โข OP-TI-MIZEโฆ please 14
- 15. 15 โ53% of visits to mobile sites are abandoned after 3 seconds.โ Google DoubleClick, 2018
- 16. Client bandwiths โข 3G is broadband โข Company culture: One day of 2G per month โข Ship less HTML โข Ship less CSS โข Ship WAY less JS โข OP-TI-MIZE... pretty please 16
- 17. 17
- 18. โข Test on slow devices โข Kill on-scroll โข Transition via CSS โข Offload defered JS onto threads โข Aim for 60 fps Some Flowersโข: 15fps ๏ 60fps +25% conversion Client CPU cycles 18
- 20. Terminology.
- 21. Terminology FCP: First Contentful Paint FMP: First Meaningful Paint TTI: Time to Interactive PB: Performance Budget Bloat: CSS/ JS not used in current document 21
- 22. Quick wins.
- 23. 1 | Set goals โข First Meaningful Paint < 1 sec โข Time to Interactive < 5 sec (on slow 3G) โข Time to interactive < 2 sec (repeated visits) 23
- 24. โข Max Budget: 14kb โข Include in <head> โข Consider click through โข Bloat Budget: 15% โข Stay < 170kb textfile-size (compressed) 2 | Critical CSS 24
- 25. โข Trim โข Defer โข Lazy-load โข Use lightweight alternatives โข Minimize 3rd party scripts 3 | Load lightly 25
- 26. โข Load core scripts normally โข Use <script type=โmoduleโ> for modern browsers 4 | Legacy loading 26
- 27. โข Load blocking JS before blocking CSS โข Split up critical CSS per media query โข Measure โข Experiment โข Repeat 5 | JS & CSS grouping 27
- 28. โข dns-lookup โข Preconnect โข Prefetch โข preload (carefully) โข See https://w3c.github.io/resource-hints/ 6 | Resource hints 28
- 29. โข Seriously consider system fonts โข Remove bloat subsets โข Remove bloat charsets โข Make use of font-display (swap/ optional) 7 | Webfonts 29
- 30. 30 โChanging the way fonts were loaded [โฆ] resulted in the speed index dropping by 50% for 4G mobiles.โ gov.uk, 2018
- 31. โข Lazy loading โข Use webP โข Optimize image size per viewport โข dreistrom.landโs Image Rendering Service for lossless compression and convertion to modern images formats 8 | Optimize images 31
- 32. โข Set HTTP Cache headers properly โข Set HTTP security headers properly 9 | Headers 32
- 33. โข Use Brotli โข Use Zopfli โข Use at least gzip 10 | Compression 33
- 34. โข Serve via HTTP/2 โข Monitor mixed-content warnings โข Verify HPACK compression is available โข Enable OCSP stapling โข ^^ speeds up TLS handshakes 11 | HTTPS/2 34
- 35. โข Use service worker cache for โข โฆ webfonts โข โฆ CSS โข โฆ JS โข โฆ re-used images 12 | Service workers 35
- 36. Tools.
- 37. Tools for your CI/ CD infrastructure โข https://www.sitespeed.io/ โข https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/r eadme.md#using-programmatically โข https://developers.google.com/web/tools/lighthouse/#cli 37
- 39. Ressources โข https://wpostats.com/ โข https://timkadlec.com/ โข https://www.smashingmagazine.com/2019/01/front-end-performance- checklist-2019-pdf-pages/ โข https://technology.blog.gov.uk/2018/10/04/making-gov-uk-pages-load- faster-and-use-less-data/ โข https://docs.google.com/spreadsheets/d/1lBQ0T1VBlBrpkv5Q1vQJkU8h nya_5tRczf9c5TfIgnQ/edit#gid=0 โข http://youmightnotneedjquery.com/
- 40. 40 ? !