An overview of the areas where we are focusing our efforts on front end performance on Shopify.com. Presented at the Toronto Web Performance Group's meetup on September 23, 2015.

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