The Need For Speed

50 %
50 %
Information about The Need For Speed
Technology

Published on September 13, 2010

Author: AndyDavies

Source: slideshare.net

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!

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

Request size

Time to generate response

Response size

Number of components

Bandwidth

Latency

Browser

Network gateways

Security Software

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

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

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!

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

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; }

http://www.google.co.uk/images/nav_logo16.png

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

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?

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=&quot;Content-Type&quot; content=&quot;text/html; utf-8&quot;> Flush the response early? e.g. after <head>, header, before footer etc.

Watch the limit on number of parallel downloads

Specify a charset

Content-Type: text/html; charset=utf-8

<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; utf-8&quot;>

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/

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/

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/

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/

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/

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/

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/

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/

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/

Add a comment

Related presentations

Related pages

Need for Speed - Official Site - US

Need for Speed Out Now on PC Out now on PlayStation 4, Xbox One and PC Watch Trailer ×
Read more

The Need for Speed – Wikipedia

The Need for Speed war das erste Spiel der Need for Speed-Serie und wurde erstmals 1994 für den 3DO veröffentlicht. 1995 wurde der Konsolen-Titel für ...
Read more

Need for Speed – Wikipedia

Need for Speed (kurz NFS; engl. für „Bedürfnis nach Geschwindigkeit“) ist eine Autorennspiel-Serie von Electronic Arts. Neben den Versionen für den ...
Read more

Need for Speed - Wikipedia, the free encyclopedia

Need for Speed, also known by its initials NFS, is a racing video game franchise published by Electronic Arts and developed by several studios including EA ...
Read more

The Need for Speed - Wikipedia, the free encyclopedia

The Need For Speed was met with positive reviews. The four reviewers of Electronic Gaming Monthly scored the 3DO version an 8.0 average, with two of them ...
Read more

Need for Speed - Offizielle Website - DE

Need for Speed Jetzt erhältlich für PC Jetzt erhältlich für PlayStation 4, Xbox One und PC Trailer ansehen ×
Read more

Need for Speed | Film 2014 | moviepilot.de

Alle Infos zum Film Need for Speed (2014): Bis der Asphalt brennt: Mit der Videospielverfilmung Need for Speed will DreamWorks mit Aaron Paul der...
Read more

Need for Speed - Film 2014 - FILMSTARTS.de

Need For Speed, Ein Film von Scott Waugh mit Brian L. Keaulana, Rich Rutherford. Übersicht und Filmkritik. Der Mechaniker Tobey Marshall (Aaron Paul) hat ...
Read more

The Need For Speed - YouTube

The Need For Speed History (1994-2012) Must Watch in Fullscreen [HD] - Duration: 30:12. Daniel C. Souza 15,595 views. 30:12 History of Need ...
Read more

Need For Speed (2014) - Rotten Tomatoes: Movies | TV Shows ...

With stock characters and a preposterous plot, this noisily diverting video game adaptation fulfills a Need for Speed and little else.
Read more