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

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

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

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 – 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 (2014) - IMDb

Fresh from prison, a street racer who was framed by a wealthy business associate joins a cross country race with revenge in mind. His ex-partner, learning ...
Read more

Need for Speed - [PC]: Amazon.de: Games

Need for Speed - [PC] bei Amazon.de - Schneller & Kostenloser Versand ab 29€. Jetzt bestellen!
Read more

Need for Speed - YouTube

With over 20 years of history in its rear view mirror, Need for Speed™ returns with a reboot that delivers on what Need for Speed stands for - rich ...
Read more

Need for Speed - [PlayStation 4]: Amazon.de: Games

Need for Speed - [PlayStation 4] bei Amazon.de - Schneller & Kostenloser Versand ab 29€. Jetzt bestellen!
Read more

Need for Speed (PC) - Test, Download, Systemanforderungen ...

Auf GameStar.de erfahren Sie alles zum Sportspiel Need for Speed von Ghost Games: Test, News, Wertung, Download, Systemanforderungen, Release Termin, Demo ...
Read more

Need for Speed | Spiele | EA

Need for Speed - Videospiele von Electronic Arts, die Quelle für die am höchsten bewerteten und spannenden Titel wie Need for Speed Most Wanted
Read more

Need for Speed: World - Download - CHIP

Need for Speed - World: Einsteigen, anschnallen, Gang rein - Go! Weltweit Rennen gewinnen und Prestige erlangen, das ist Ihr Ziel. Need for Speed: World ...
Read more