The Need For Speed

The Need For Speed… BarCamp Stroud, 13 Sep 2010 … why slow page load times matter …some things you can do about it @andydavies

Straw poll: Who does what?

Me…
Run development and operations for Kerboodle
Subscription based service for secondary education - GCSE/AS/A2 etc.
300,000+ “paid for” users
Peak 1 million page views a day (but very peaky)
Rich media content
Congested connections:
Average School: 300+ PCs, 16Mbps pipe = 64Kpbs/user!

Slow pages = poor user experience = less time on site = lower conversions

What affects performance?
Request size
Time to generate response
Response size
Number of components
Bandwidth
Latency
Browser
Network gateways
Security Software
Things we can influence Things we can’t control

What does a page load look like?

So, how can we speed things up?

Shrink the response
Compress (deflate/gzip)
html, css, js, xml, json etc.
Minify
css & js
Concise markup
Remove un-needed HTTP headers
X- headers

Images
Pick the right format
jpg
png
gif
Optimise
Do you need an image?
CSS3
Canvas/SVG

Spot the difference

The difference… gif 26KB png 9KB

A Song for Europe Richard http://givepngachance.com

Shrink the request
A is for Asymmetric (ADSL)
Upload speed != download speed
Static content from a cookieless domain (take care if using sub-domain)
POST vs GET
.NET – Here be dragons!

Reduce the requests
Merge CSS, JS
Merge images and use CSS Sprites
Set cache directives
Do you need an external image?
CSS3
dataURIs

CSS Sprites
http://www.google.co.uk/images/nav_logo16.png
.icon { background:url(/images/nav_logo16.png) background-position: -40px -85px; height: 19px; width: 19px; }

Browsers Block
Stylesheets
Block page rendering until all external stylesheets have been downloaded
Javascript
External scripts block rendering of elements below them
Inline scripts block rendering of everything

3 rd Party Scripts
e.g. Share This, Google Analytics, Widgets etc.
What happens if the third party is broken or slow?
Simulate with Charles - reduce bandwidth or increase latency for third party URLs
Is there an asynchronous version available?

Other things…
Watch the limit on number of parallel downloads
Specify a charset
Content-Type: text/html; charset=utf-8
<meta http-equiv="Content-Type" content="text/html; utf-8">
Flush the response early?
e.g. after <head>, header, before footer etc.

Handy Tools
YSlow
http://developer.yahoo.com/yslow/
PageSpeed http://code.google.com/speed/page-speed/
WebPageTest
http://www.webpagetest.org/

The Giants!
Steve Souders
@souders
http://www.stevesouders.com/blog/
Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com/

Thanks for listening… http://slideshare.net/andydavies/the-need-for-speed @andydavies Questions… Comments… Thoughts?

Find Out More…
Google Guidelines
http://code.google.com/speed/page-speed/docs/rules_intro.html/
Yahoo Guidelines
http://developer.yahoo.com/performance/rules.html
Blogs
http://www.webperformancetoday.com/
http://blog.patrickmeenan.com/
http://pipes.yahoo.com/stoyan/perfplanet/

Waterfall Generators
WebPageTest - http://webpagetest.org/
Firefox - Firebug
Chrome/Safari – Inspector
AOL PageTest - http://pagetest.wiki.sourceforge.net/
MSFast - http://msfast.myspace.com/

Traffic Inspectors
Charles
http://www.charlesproxy.com/
HTTPWatch
http://www.httpwatch.com/
Fiddler
http://www.fiddler2.com/
Wireshark
http://www.wireshark.org/

CSS & Javascript Minifiers
CSS
YUI Compressor - http://developer.yahoo.com/yui/compressor/
CSS Tidy - http://csstidy.sourceforge.net/
Javascript
YUI Compressor - http://developer.yahoo.com/yui/compressor/
JSMin - http://crockford.com/javascript/jsmin
Closure - http://code.google.com/intl/pl/closure/compiler/

Optmising Images
General list
http://www.phpied.com/big-list-image-optimization-tools/
Yahoo Smush.it
http://www.smushit.com
Gifsicle
http://www.lcdf.org/gifsicle/
PNG
http://www.phpied.com/give-png-a-chance/

Image credits
Slide 1: © Chris-Håvard Berge 2009 - http://www.flickr.com/photos/chberge/3803475294/
Slide 2: © Dominique Archambault 2009 - http://www.flickr.com/photos/chezdom/3268236588/
Slide 4: © Chris Miller 2008 - http://www.flickr.com/photos/thatmushroom/2299645283/
S lides 5, 6, 7: StrangeLoop Networks - http://strangeloopnetworks.com/
Slide 8: © eko - http://www.flickr.com/photos/ekosystem/3117095951/
Slide 18: Google - http://www.google.co.uk/

http://www.andysnotebook.com	883
http://andydavies.me	135
http://andysnotebook.typepad.com	53
http://127.0.0.1	47
http://andysnotebook.com	37
http://feeds.feedburner.com	35
http://webcache.googleusercontent.com	3
http://192.168.1.151	3
http://translate.googleusercontent.com	2
http://www.linkedin.com	1

The Need For Speed

by Andy Davies

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,199

Statistics

The Need For Speed Presentation Transcript