Website Performance

WEBSITE PERFORMANCE
18%

Presenting the problem

Total Weight
1.1 Mb

1140 Kb

1 167 360 bytes

9 338 880 bit

That’s one tired hamster

What to do?

Upgrade hardware?

Knowledge!

Analyzing the situation

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™
Smushed23.30% or 50.26 KB from the size of your image(s)
PngCrush, PngOptimizer....

Saving bandwidth
How do I uptimize a GIF?
Make it a
PNG!

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

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 misconfiguredEtags
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: 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: 70.1K

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.

HTML
JS/CSS
IMAGES
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

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!

Website Performance

by Morten Pedersen on Sep 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 4

Statistics

Website Performance — Presentation Transcript