Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Front end performance

on Shopify.com
BRYSON GILB E RT • @br yg
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...
3
4
5
About Shopify.com
Why is performance important to us?

Our audience is global

Fundamental aspect of a good user experie...
6
Marketing Assets
Ruby gem
Re-usable modules
Documentation & Styleguide
Fast and easy improvements across properties
7
Perf Basics
Server-side caching
Concatenate, minify, GZIP
CDN
8
IMAGES
9
10
375px viewport 1000px viewport
11
12
13
14
File Size Improvements
Total (All Images)
Before After
200 MB
240 MB
Most Improved PNG
Before After
107 KB
400 KB
15
Images – Required Reading
• Dave Newton, “Efficient Image Resizing with ImageMagick”

http://www.smashingmagazine.com/2...
16
FONTS
UGH...
17
18
Fonts
• Basic approach to loading fonts – @font-face in CSS, no inlining, self-hosted
• Five weights – most pages only ...
19
JAVAS CRI PT
20
Javascript
Concatenated, minified, GZIP
Third party stuff

Social, analytics, etc.
A/B testing
21
Javascript – what next?
Profile and optimize our first-party scripts
A/B test server-side whenever possible
Third-party...
22
MEASU REME NT
23
24
25
26
Measurement
Automatic and manual testing
Snapshots and RUM (Real User Monitoring)
Keeps you honest
Performance budgets
27
Perf Budgets – Required Reading
• Tim Kadlec

http://timkadlec.com/2013/01/setting-a-performance-budget/

http://timkad...
28
WHAT’S NE XT?
29
Things we’re excited about
HTTP/2

Biggest potential change for web perf since… ever?

We’re halfway there with HTTPS +...
30
How we’re going to keep improving
Built-in performance wherever possible

Automatic image optimization

Re-usable modul...
Thanks.
BRYSON GILB E RT • @br yg
Próxima SlideShare
Cargando en…5
×

Front end performance on Shopify.com

1.416 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Sé el primero en comentar

Front end performance on Shopify.com

  1. 1. Front end performance
 on Shopify.com BRYSON GILB E RT • @br yg
  2. 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. 3
  4. 4. 4
  5. 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. 6 Marketing Assets Ruby gem Re-usable modules Documentation & Styleguide Fast and easy improvements across properties
  7. 7. 7 Perf Basics Server-side caching Concatenate, minify, GZIP CDN
  8. 8. 8 IMAGES
  9. 9. 9
  10. 10. 10 375px viewport 1000px viewport
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 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. 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. 16 FONTS UGH...
  17. 17. 17
  18. 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. 19 JAVAS CRI PT
  20. 20. 20 Javascript Concatenated, minified, GZIP Third party stuff
 Social, analytics, etc. A/B testing
  21. 21. 21 Javascript – what next? Profile and optimize our first-party scripts A/B test server-side whenever possible Third-party scripts: 🔥🔥🔥
  22. 22. 22 MEASU REME NT
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26 Measurement Automatic and manual testing Snapshots and RUM (Real User Monitoring) Keeps you honest Performance budgets
  27. 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. 28 WHAT’S NE XT?
  29. 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. 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. 31. Thanks. BRYSON GILB E RT • @br yg

×