More info here: http://www.meetup.com/Toronto-Web-Performance-Group/events/145744652/

1. KICK-OFF
WEB PERF GROUP
(Front-End) Web Performance 101
November 28, 2013
#towebperf

2. AGENDA
!
HOUSE KEEPING NOTES
(FRONT-END) 101 WEB PERFORMANCE
Q&A AND NETWORKING
#towebperf

3. THANKS TO….
#towebperf

4. ORGANIZERS
@bbinto
@blakecrosby
#towebperf

5. TWEET!
@towebperf
#towebperf

6. ONE OF MANY
#towebperf

7. OTHER WEB PERF EVENTS AND
SOCIAL MEDIA
•
Other Web Perf meetups
•
Velocity conferences
•
#webperf and #perfmatters
•
W3C http://lists.w3.org/Archives/Public/publicweb-perf/
#towebperf

8. WHY IS THERE A NEED
FOR SPEED?
#towebperf

9. #towebperf

10. Houston’s airport: customer complaints
It takes so long....grrrrr
All good, bla bla...
6x
6x
#towebperf

11. Overestimating wait times for rides
Hidden lineups
#towebperf

12. S L OW
FAST
Unpleasant
Task is successful
Unknown
Responsive system
Boring
Informed about progress
Perception of Speed
#towebperf

13. “Ultimately performance is about respect”
–Brad Frost
BRAD FROST
#towebperf

14. SOME FACTS
•
39% say speed is more important than
functionality for most websites
•
8 out of 10 people will not return to a
site after a disappointing experience
•
Web site performance is second only to
security in user expectations
#towebperf

15. QUIZ!
http://channel9.msdn.com/Events/BuiId/2012/3-132
#towebperf

16. WHICH IS THE FASTEST WEBSITE?
Total
Number
Size (k) Elements
CSS
Rules
Image
Files
Script
Script
Lines (F) Libraries
Site #1
3,697
1,504
1,392
41
77,768
Site #2
2,278
1,100
5,325
29
39,183
Site #3
1,061
2,673
1,105
66
12,643
Site #4
1,812
4,252
1,672
12
10,284
Site #5
1,372
900
3,902
6
38,269
jQuery
YUI
Prototype
ExtJS
Scriptaculous
Other
#towebperf

17. WHICH IS THE FASTEST WEBSITE?
Total
Number
Size (k) Elements
CSS
Rules
Image
Files
Script
Script
Lines (F) Libraries
Site #1
3,697
1,504
1,392
41
77,768
Site #2
2,278
1,100
5,325
29
39,183
Site #3
1,061
2,673
1,105
66
12,643
Site #4
1,812
4,252
1,672
12
10,284
Site #5
1,372
900
3,902
6
38,269
jQuery
YUI
Prototype
ExtJS
Scriptaculous
Other
#towebperf

18. WHICH IS THE SLOWEST WEBSITE?
Total
Number
Size (k) Elements
CSS
Rules
Image
Files
Script
Script
Lines (F) Libraries
Site #1
3,697
1,504
1,392
41
77,768
Site #2
2,278
1,100
5,325
29
39,183
Site #3
1,061
2,673
1,105
66
12,643
Site #4
1,812
4,252
1,672
12
10,284
Site #5
1,372
900
3,902
6
38,269
jQuery
YUI
Prototype
ExtJS
Scriptaculous
Other
#towebperf

19. WHICH IS THE SLOWEST WEBSITE?
Total
Number
Size (k) Elements
CSS
Rules
Image
Files
Script
Script
Lines (F) Libraries
Site #1
3,697
1,504
1,392
41
77,768
Site #2
2,278
1,100
5,325
29
39,183
Site #3
1,061
2,673
1,105
66
12,643
Site #4
1,812
4,252
1,672
12
10,284
Site #5
1,372
900
3,902
6
38,269
jQuery
YUI
Prototype
ExtJS
Scriptaculous
Other
#towebperf

20. BREAKDOWN
#towebperf

21. HOW DO YOU MEASURE
PERFORMANCE?
#towebperf

22. MANUALLY
•
View waterfall in
your browser
http://www.webperformancetoday.com/2010/07/09/waterfalls-101/
#towebperf

23. MANUALLY
http://www.webperformancetoday.com/2010/07/09/waterfalls-101/
#towebperf

24. MANUALLY
•
webpagetest.org (Demo)
•
•
•
http://www.webpagetest.org/result/131127_7M_16HP/
http://www.webpagetest.org/result/131127_ZT_16RA/
Compare to httparchive.org (Demo)
#towebperf

25. TOOLS
HAR
(APIs)
(APIs)
more...
DIY / Browser Plugins
Automatic Tools
#towebperf

26. AUTOMATICALLY
Synthetic Testing
Real User Monitoring
You run the test
User runs the test
Measures experience of exact one selected
configuration
Measures experience of “actual user”
(peace of mind). You get to know your user better
Establish baseline performance level
Get concrete information about user’s latency,
bandwidth, page load time
Tools
private/public WebPagetest (API), PageSpeed (API),
phantomJS, commercial products etc.
Tools
boomerang.js, Google Analytics, commercial
products etc.
#towebperf

27. GOLDEN RULES
•
https://developers.google.com/speed/
•
http://developer.yahoo.com/
performance/rules.html
#towebperf

28. GLOBAL SHELL
•
Shared by all
•
Visual representation
•
Non-visual representation
•
SSI variables in header to
serve ads and tracking
•
Global scripts, 3rd party
scripts and stylesheets
#towebperf

29. IMPROVEMENT
(IS SOMETIMES EASIER THAN YOU THINK?)
•
Re-factored code: Removed old/un-used
code
•
Moved some scripts to the bottom of page
•
Minified and concatenated scripts and CSS
files to
reduce file size and HTTP requests
#towebperf

30. GLOBAL SHELL
#towebperf

31. EXAMPLES
Global Shell: Before and after
75
24
24
18
18
25%
Before
73.6
72.2
12
6
71.9
3%
70.8
69.4
68
0
HTTP Requests
1.3
1.3
0.9
0.975
0.65
0.325
0
30%
Visually complete (s)
After
69.8
Page Weight (kB)
0.942
1
0.691
0.75
0.5
0.25
0
26%
Start to render (s)
#towebperf

32. AUTOMATION
•
Why optimizing manually if you can
automate it?
•
Included performance optimization
into your deployment and release
process
#towebperf

33. AUTOMATED & BUILT-IN TOOLS
•
Maven, Ant Tools and Plugins
•
HTMLCompressor
•
Closure Compiler (Google)
•
Confess
•
Minify-maven-plugin
•
cssembed.jar or compass for
data:uri
#towebperf

34. AUTOMATED & BUILT-IN TOOLS
•
If you can’t / don’t want to use Maven / Ant
•
•
You should use taskrunners and scaffolding: Grunt, Yeoman
Continuous integration (e.g SPOFcheck, yslow)
#towebperf

35. TIPS
#towebperf

36. “It’s not about what you can add, it’s
about what you can’t take away”
– Christian Heilmann, The Vanilla Web Diet
#towebperf

37. START MEASURING AND
LOGGING YOUR PERFORMANCE
#towebperf

38. SERVE ONLY WHAT THE CLIENT NEEDS
Device Detection, Server-side components and
Responsive Web Design
#towebperf

39. SET A PERFORMANCE BUDGET
#towebperf

40. NEXT MEETUP?
Feedback Form: http://bit.ly/towebperf-1
#towebperf

41. THANK YOU!
AND NOW?
LET’S TALK!
#towebperf