Front end performance on Shopify.com
3 likes1,871 views
The document discusses the importance of front-end performance on Shopify.com, outlining efforts in optimizing user experience through various strategies. Key topics include server-side caching, image and font management, JavaScript optimization, and measurement techniques. Future plans involve implementing HTTP/2 and improving built-in performance using automatic optimizations and a culture of performance awareness.
Front end performance on Shopify.com
- 1. Front end performance on Shopify.com BRYSON GILB E RT • @br yg
- 2. 2 Stuff we’ll talk about What you need to know about shopify.com Where we are focusing our perf efforts How we measure our progress What’s new and exciting
- 3. 3
- 4. 4
- 5. 5 About Shopify.com Why is performance important to us? Our audience is global Fundamental aspect of a good user experience How’s it made? Ruby on Rails No database
- 6. 6 Marketing Assets Ruby gem Re-usable modules Documentation & Styleguide Fast and easy improvements across properties
- 7. 7 Perf Basics Server-side caching Concatenate, minify, GZIP CDN
- 8. 8 IMAGES
- 9. 9
- 10. 10 375px viewport 1000px viewport
- 11. 11
- 12. 12
- 13. 13
- 14. 14 File Size Improvements Total (All Images) Before After 200 MB 240 MB Most Improved PNG Before After 107 KB 400 KB
- 15. 15 Images – Required Reading • Dave Newton, “Efficient Image Resizing with ImageMagick” http://www.smashingmagazine.com/2015/06/efficient-image-resizing- with-imagemagick/ • Sara Soueidan, “Styling SVG <use> Content with CSS” http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
- 16. 16 FONTS UGH...
- 17. 17
- 18. 18 Fonts • Basic approach to loading fonts – @font-face in CSS, no inlining, self-hosted • Five weights – most pages only use three or four • WOFF and WOFF2 only – no TTF, EOT, SVG • Everything is terrible – No, really • Bram Stein, “Web Fonts Performance” https://speakerdeck.com/bramstein/web-fonts-performance
- 19. 19 JAVAS CRI PT
- 20. 20 Javascript Concatenated, minified, GZIP Third party stuff Social, analytics, etc. A/B testing
- 21. 21 Javascript – what next? Profile and optimize our first-party scripts A/B test server-side whenever possible Third-party scripts: 🔥🔥🔥
- 22. 22 MEASU REME NT
- 23. 23
- 24. 24
- 25. 25
- 26. 26 Measurement Automatic and manual testing Snapshots and RUM (Real User Monitoring) Keeps you honest Performance budgets
- 27. 27 Perf Budgets – Required Reading • Tim Kadlec http://timkadlec.com/2013/01/setting-a-performance-budget/ http://timkadlec.com/2014/11/performance-budget-metrics/ • Katie Kovalcin, “Designing with a performance budget” http://cognition.happycog.com/article/designing-with-a-performance-budget • Lara Hogan, Designing for Performance http://designingforperformance.com/ • SpeedCurve https://speedcurve.com/ • New Relic http://newrelic.com/
- 28. 28 WHAT’S NE XT?
- 29. 29 Things we’re excited about HTTP/2 Biggest potential change for web perf since… ever? We’re halfway there with HTTPS + modules Resource Hints dns-prefetch and preconnect implemented and testing Better ways to load fonts The status quo is The Worst™
- 30. 30 How we’re going to keep improving Built-in performance wherever possible Automatic image optimization Re-usable modules Server-side speed CDN Culture of performance Sharing knowledge and experiences Documentation FED Talks Design process Testing & budgets Challenge past assumptions
- 31. Thanks. BRYSON GILB E RT • @br yg