Your SlideShare is downloading. ×
0
KICK-OFF	

WEB PERF GROUP
(Front-End) Web Performance 101
November 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 #perfmatter...
WHY IS THERE A NEED
FOR SPEED?

#towebperf
#towebperf
Houston’s airport: customer complaints

It takes so long....grrrrr

All good, bla bla...

6x

6x

#towebperf
Overestimating wait times for rides

Hidden lineups

#towebperf
S L OW

FAST

Unpleasant

Task is successful

Unknown

Responsive system

Boring

Informed about progress

Perception of S...
“Ultimately performance is about respect”
–Brad Frost

BRAD FROST
#towebperf
SOME FACTS
•

39% say speed is more important than
functionality for most websites	


•

8 out of 10 people will not retur...
QUIZ!

http://channel9.msdn.com/Events/BuiId/2012/3-132

#towebperf
WHICH IS THE FASTEST WEBSITE?
Total
Number
Size (k) Elements

CSS
Rules

Image
Files

Script
Script
Lines (F) Libraries

S...
WHICH IS THE FASTEST WEBSITE?
Total
Number
Size (k) Elements

CSS
Rules

Image
Files

Script
Script
Lines (F) Libraries

S...
WHICH IS THE SLOWEST WEBSITE?
Total
Number
Size (k) Elements

CSS
Rules

Image
Files

Script
Script
Lines (F) Libraries

S...
WHICH IS THE SLOWEST WEBSITE?
Total
Number
Size (k) Elements

CSS
Rules

Image
Files

Script
Script
Lines (F) Libraries

S...
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.o...
TOOLS
HAR
(APIs)

(APIs)
more...

DIY / Browser Plugins

Automatic Tools

#towebperf
AUTOMATICALLY
Synthetic Testing

Real User Monitoring

You run the test

User runs the test

Measures experience of exact ...
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...
IMPROVEMENT 


(IS SOMETIMES EASIER THAN YOU THINK?)
•

Re-factored code: Removed old/un-used
code	


•

Moved some script...
GLOBAL SHELL

#towebperf
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 ...
AUTOMATION
•

Why optimizing manually if you can
automate it?	


•

Included performance optimization
into your deployment...
AUTOMATED & BUILT-IN TOOLS
•

Maven, Ant Tools and Plugins	


•

HTMLCompressor	


•

Closure Compiler (Google) 	


•

Con...
AUTOMATED & BUILT-IN TOOLS
•

If you can’t / don’t want to use Maven / Ant	

•

•

You should use taskrunners and scaffold...
TIPS

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

#towebp...
START MEASURING AND
LOGGING YOUR PERFORMANCE

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

#towebperf
SET A PERFORMANCE BUDGET

#towebperf
NEXT MEETUP?

Feedback Form: http://bit.ly/towebperf-1

#towebperf
THANK YOU!
AND NOW?	

LET’S TALK!

#towebperf
Upcoming SlideShare
Loading in...5
×

#towebperf meetup - Kick-off: Web Performance 101

2,536

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,536
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "#towebperf meetup - Kick-off: Web Performance 101"

  1. 1. KICK-OFF WEB PERF GROUP (Front-End) Web Performance 101 November 28, 2013 #towebperf
  2. 2. AGENDA ! HOUSE KEEPING NOTES (FRONT-END) 101 WEB PERFORMANCE Q&A AND NETWORKING #towebperf
  3. 3. THANKS TO…. #towebperf
  4. 4. ORGANIZERS @bbinto @blakecrosby #towebperf
  5. 5. TWEET! @towebperf #towebperf
  6. 6. ONE OF MANY #towebperf
  7. 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. 8. WHY IS THERE A NEED FOR SPEED? #towebperf
  9. 9. #towebperf
  10. 10. Houston’s airport: customer complaints It takes so long....grrrrr All good, bla bla... 6x 6x #towebperf
  11. 11. Overestimating wait times for rides Hidden lineups #towebperf
  12. 12. S L OW FAST Unpleasant Task is successful Unknown Responsive system Boring Informed about progress Perception of Speed #towebperf
  13. 13. “Ultimately performance is about respect” –Brad Frost BRAD FROST #towebperf
  14. 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. 15. QUIZ! http://channel9.msdn.com/Events/BuiId/2012/3-132 #towebperf
  16. 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. 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. 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. 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. 20. BREAKDOWN #towebperf
  21. 21. HOW DO YOU MEASURE PERFORMANCE? #towebperf
  22. 22. MANUALLY • View waterfall in your browser http://www.webperformancetoday.com/2010/07/09/waterfalls-101/ #towebperf
  23. 23. MANUALLY http://www.webperformancetoday.com/2010/07/09/waterfalls-101/ #towebperf
  24. 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. 25. TOOLS HAR (APIs) (APIs) more... DIY / Browser Plugins Automatic Tools #towebperf
  26. 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. 27. GOLDEN RULES • https://developers.google.com/speed/ • http://developer.yahoo.com/ performance/rules.html #towebperf
  28. 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. 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. 30. GLOBAL SHELL #towebperf
  31. 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. 32. AUTOMATION • Why optimizing manually if you can automate it? • Included performance optimization into your deployment and release process #towebperf
  33. 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. 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. 35. TIPS #towebperf
  36. 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. 37. START MEASURING AND LOGGING YOUR PERFORMANCE #towebperf
  38. 38. SERVE ONLY WHAT THE CLIENT NEEDS Device Detection, Server-side components and Responsive Web Design #towebperf
  39. 39. SET A PERFORMANCE BUDGET #towebperf
  40. 40. NEXT MEETUP? Feedback Form: http://bit.ly/towebperf-1 #towebperf
  41. 41. THANK YOU! AND NOW? LET’S TALK! #towebperf
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×