#towebperf KICK-OFF WEB PERF GROUP (Front-End) Web Performance 101 November 28, 2013
#towebperf
KICK-OFF WEB PERF GROUP
(Front-End) Web Performance 101November 28, 2013
#towebperf
AGENDA !
HOUSE KEEPING NOTES (FRONT-END) 101 WEB PERFORMANCE
Q&A AND NETWORKING
#towebperf
THANKS TO….
#towebperf
ORGANIZERS
@bbinto @blakecrosby
#towebperf
TWEET!
@towebperf
#towebperf
ONE OF MANY
#towebperf
OTHER WEB PERF EVENTS AND SOCIAL MEDIA
• Other Web Perf meetups
• Velocity conferences
• #webperf and #perfmatters
• W3C http://lists.w3.org/Archives/Public/public-web-perf/
#towebperf
WHY IS THERE A NEED FOR SPEED?
#towebperf
#towebperf
Houston’s airport: customer complaints
It takes so long....grrrrr
6x
All good, bla bla...
6x
#towebperf
Overestimating wait times for rides
Hidden lineups
#towebperf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive system
FAST
Informed about progress
#towebperf
–Brad Frost
“Ultimately performance is about respect”
BRAD FROST
#towebperf
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
QUIZ!
http://channel9.msdn.com/Events/BuiId/2012/3-132
#towebperf
YUI
Total Size (k)
Number Elements
CSS Rules
Image Files
Script Lines (F)
Script 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 Prototype ExtJS Other Scriptaculous
WHICH IS THE FASTEST WEBSITE?
#towebperf
YUI
Total Size (k)
Number Elements
CSS Rules
Image Files
Script Lines (F)
Script 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 Prototype ExtJS Other Scriptaculous
WHICH IS THE FASTEST WEBSITE?
#towebperf
YUI
Total Size (k)
Number Elements
CSS Rules
Image Files
Script Lines (F)
Script 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 Prototype ExtJS Other Scriptaculous
WHICH IS THE SLOWEST WEBSITE?
#towebperf
YUI
Total Size (k)
Number Elements
CSS Rules
Image Files
Script Lines (F)
Script 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 Prototype ExtJS Other Scriptaculous
WHICH IS THE SLOWEST WEBSITE?
#towebperf
BREAKDOWN
#towebperf
HOW DO YOU MEASURE PERFORMANCE?
#towebperf
MANUALLY
• View waterfall in your browser
http://www.webperformancetoday.com/2010/07/09/waterfalls-101/
#towebperf
MANUALLY
http://www.webperformancetoday.com/2010/07/09/waterfalls-101/
#towebperf
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
TOOLS
HAR
DIY / Browser Plugins Automatic Tools
(APIs)(APIs)
more...
#towebperf
AUTOMATICALLYSynthetic 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
Toolsprivate/public WebPagetest (API), PageSpeed (API),
phantomJS, commercial products etc.
Toolsboomerang.js, Google Analytics, commercial
products etc.
#towebperf
GOLDEN RULES
• https://developers.google.com/speed/
• http://developer.yahoo.com/performance/rules.html
#towebperf
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
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
GLOBAL SHELL
#towebperf
68
69.4
70.8
72.2
73.6
75
Page Weight (kB)
69.8
71.9
0
0.25
0.5
0.75
1
Start to render (s)
0.691
0.942
EXAMPLESGlobal Shell: Before and after
0
6
12
18
24
HTTP Requests
18
24Before After
25% 3%
26%0
0.325
0.65
0.975
1.3
Visually complete (s)
0.9
1.3
30%
#towebperf
AUTOMATION
• Why optimizing manually if you can automate it?
• Included performance optimization into your deployment and release process
#towebperf
AUTOMATED & BUILT-IN TOOLS
• Maven, Ant Tools and Plugins
• Closure Compiler (Google)
• Minify-maven-plugin
• HTMLCompressor
• Confess
• cssembed.jar or compass for data:uri
#towebperf
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
TIPS
#towebperf
– Christian Heilmann, The Vanilla Web Diet
“It’s not about what you can add, it’s about what you can’t take away”
#towebperf
START MEASURING AND LOGGING YOUR PERFORMANCE
#towebperf
SERVE ONLY WHAT THE CLIENT NEEDSDevice Detection, Server-side components and
Responsive Web Design
#towebperf
SET A PERFORMANCE BUDGET
#towebperf
THANK YOU!AND NOW? LET’S TALK!