![8
“Carousell reduced page load
time by 65% and saw a 63%
increase in organic traffic [...]”
Carousell, 2018](https://image.slidesharecdn.com/frontendperformance-3sl-190322144650/85/Frontend-performance-on-the-web-Presentation-ecommercecamp-2019-8-320.jpg)
![30
“Changing the way fonts were
loaded […] resulted in the speed
index dropping by 50% for 4G
mobiles.“
gov.uk, 2018](https://image.slidesharecdn.com/frontendperformance-3sl-190322144650/85/Frontend-performance-on-the-web-Presentation-ecommercecamp-2019-30-320.jpg)
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 ? !