#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

NEXT MEETUP?

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

#towebperf

THANK YOU!AND NOW? LET’S TALK!