Website Performance
-
Upload
morten-pedersen -
Category
Technology
-
view
882 -
download
0
description
Transcript of Website Performance
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!