Website Performance

WEBSITE PERFORMANCE18%

PRESENTING THE PROBLEM

PRESENTING THE PROBLEM

Total Weight 1.1 Mb

PRESENTING THE PROBLEM

1140 Kb

PRESENTING THE PROBLEM

1 167 360 bytes

PRESENTING THE PROBLEM

9 338 880 bit

PRESENTING THE PROBLEM

That’s one tired hamster

PRESENTING THE PROBLEM

What to do?

PRESENTING THE PROBLEM

Upgrade hardware?

PRESENTING THE PROBLEM

Knowledge!

PRESENTING THE PROBLEM

Analyzing the situation

PRESENTING THE PROBLEM

Saving Bandwidth

SAVING BANDWIDTH

Clean Markup Reduce code to content ratio Proper semantics Webstandards Minify HTML

Minifying http://www.arla.dk/ could save 13.3 Kb (26% reduction)

Optimize Images & Flash Choose the right image format No image scaling in HTML Compress with the right tools Smush.it™

Smushed 23.30% or 50.26 KB from the size of your image(s) PngCrush, PngOptimizer....

SAVING BANDWIDTH

How do I uptimize a GIF?

Make it aPNG!

SAVING BANDWIDTH

Minify JavaScript There is 303kB worth of JavaScript. Minifying could save 290.5kB (95.9% reduction)

Minify CSS There is 261 Kb of CSS Minifying could reduce size by 59.8Kb (23% reduction)

Enable Compression Compressing JS and CSS with gzip could reduce their transfer size by

463.4Kb all together (77% reduction)

SAVING BANDWIDTH

Total Weight: 1140.8K Total Weight: 657.6K

PRESENTING THE PROBLEM

Caching

SAVING BANDWIDTH

Caching of Static Content Add Expires headers

There are 51 static components without a far-future expiration date

Configure entity tags (ETags) There are 53 components with misconfigured Etags

Caching of AJAX calls Save XMLHTTP requests http://www.arla.dk/Mine-sider/Indkobsliste/

Build Cacheable URL’s Remove the query string and encode the parameters into the

URL. Not: http://www.arla.dk/ScaleAndCrop?size=178x99&url=dish.jpg But: http://www.arla.dk/ScaleAndCrop/178/99/dish.jpg

Be sure to handle deployment and versioning

SAVING BANDWIDTH

Total Weight: 1140.8K Total Weight: 70.1K

SAVING BANDWIDTH

70.1Kb = 0.5sec(Download time on average ADSL)

SAVING BANDWIDTH

Server Requests

SERVER REQUESTS

Server Requests

SERVER REQUESTS

Combine Files Combine external CSS Combine external JavaScript YUI Compressor

arla.allinone.min.v.123234543678.css arla.allinone.min.v.123786743543.js

SERVER REQUESTS

Use Sprites Combine all CSS background-images into one file:

background-position: -130px -435;

A pain but there are tools. http://www.stevesouders.com/blog/2009/09/14/spriteme/

SERVER REQUESTS

Parallelize downloads

SERVER REQUESTS

Serve static content from cookieless domains

SERVER REQUESTS

But don’t overdo it Generally 2-4 domains does the trick Main script and css files in the header should be

served from the same domain as the main content.

ARLA case img.arlastatic.dk (cookieless)

/images/150x94/28470829817f4880891989f96ee08f1e_150x94.jpg

gfx. arlastatic.dk (cookieless)/css/gfx/icons/linkArrowSmallGreen.gif

crop.arla.dk/ScaleAndCrop?size=178x999999&background=0&cachetimeout=60&i...

SERVER REQUESTS

browserscope.org

SERVER REQUESTS

Total Weight: 1140.8K Total Weight: 70.1K

Prioritizing Content

PRIORITIZING CONTENT

3rd party content Twitter, Analytics, FaceBook, Digg Mashable has 40+ widgets document.write() FRAG tag (document fragment)

Design patterns Asynchronous load of content

http://arla.dk/opskrifter/pasta-med-basilikum-og-ost http://mashable.com

Optimistic approach Everything works all the time.

PRIORITIZING CONTENT

Defer Javascript Maybe / maybe not - make it a conscious decision

Or append it: var js = document.createElement(’script’);

js.src = ’arla.allinone.v.153409870.js’;var h = document.getElementsByTagName(’head’)[0]h.appendChild(js);

HTML JS/CSS IMAGES

HTML

JS/CSS

IMAGES

Mobile?

MOBILE

Guessing that half of it applies Files too large wont be cached AppCache jQTouch are onepage apps No more than 4 connections total DNS Lookups are costly

Talk to me!