10 Simple Performance Tips Every Web Developer Should Know10 Simple Performance Tips Every Web...
Transcript of 10 Simple Performance Tips Every Web Developer Should Know10 Simple Performance Tips Every Web...
Free (disabledware) and Commercial Versions
IE and Firefox Plug-ins
Programmatic Automation Support
http://www.httpwatch.com
http://webpagetest.org/
Free service
Runs tests from outsideyour network
Select speed• FIOS• DSL• Dial-up
Recommendations
Waterfall
Cached/Uncached
Screen shots
CDN
app server
Push the content to the edges
CDN CDN
Use Content Delivery Network
Amazon CloudFront
Limelight Networks
http://en.wikipedia.org/wiki/Limelight_Networks
http://ajax.googleapis.com/ajax/libs
Google JavaScript Libraries
combine images using sprites
element.style {background-position:-76px 0;margin-right:34px;width:66px;
}
.csb, .ss, #logo span, #rptglbl {background:transparent url(/images/nav_logo8.png) no-repeat scroll 0 0;overflow:hidden;
}
https://jawr.dev.java.net/
bundles JavaScript and CSS filesincludes only once
<script>
function cnnad_getTld (hostname) { var data = hostname.split("."); if (data.length >= 2) { return (data[data.length-2] + "." + data[data.length-1]); } return(null);}
var cnnDocDomain = cnnad_getTld(location.hostname);if(cnnDocDomain) {document.domain = cnnDocDomain;}
function cnnGetId(query) { var keyValPairs = query.split('&'); if(!keyValPairs) { keyValPairs = new Array(); keyValPairs[keyValPairs.length]=query; } for(var counter=0; counter < keyValPairs.length;counter++) { var keyVal = keyValPairs[counter].split('='); if(keyVal[0]=='domId') { //alert("returning id: " + keyVal[1]); return keyVal[1]; } }}
</script>
Avoid Inlining JavaScript and Styles
lose cachingdifficult to minifydifficult to compress
Unless the page is really small and it avoids HTTP Requests
Remove whitespace, unnecessary characters and comments
/*! * jQuery JavaScript Library v1.4.2 * http://jquery.com/ * * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2010, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * * Date: Sat Feb 13 22:33:48 2010 -0500 */(function( window, undefined ) {
// Define a local copy of jQueryvar jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); },
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll("left")}catch(a)
{setTimeout(ma,1);return}c.ready()}}function Qa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.t
ext||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChil
d(b)}function X(a,b,d,f,e,j){var i=a.length;if(typeof b==="object"){for(var o in b)X(a,o,b[o],f,e,d);return a}if(d!==w){f=!j&&f&&c.isFunction(d);for(o=0;o<i;o++)e(a[o],b,f?
d.call(a[o],o,e(a[o],b)):d,j);return a}return i?e(a[0],b):w}function J(){return(new Date).getTime()}function Y(){return false}function Z(){return true}function na(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function oa(a)
{var b,d=[],f=[],e=arguments,j,i,o,k,n,r;i=c.data(this,"events");if(!(a.liveFired===this||!i||!i.live||a.button&&a.type==="click"))
{a.liveFired=this;var u=i.live.slice(0);for(k=0;k<u.length;k++){i=u[k];i.origType.replace(O,"")===a.type?
f.push(i.selector):u.splice(k--,1)}j=c(a.target).closest(f,a.currentTarget);n=0;for(r=
j.length;n<r;n++)for(k=0;k<u.length;k++){i=u[k];if(j[n].selector===i.selector){o=j[n].elem
from this to this
24 KB45 KB
https://jawr.dev.java.net/
automatically compressesalternate between compressed and uncompressedbundles JavaScript and CSS filesincludes only once
http://developer.yahoo.com/yui/compressor/
Browser says I support gzip and/or deflate
gzip JavaScript and Styles
Don’t compress images or PDFs
Server says here it is in gzip format
Combine with caching content tip!
Add Expire HeadersWithout Expire Header
unnecessary request is made
date and time of cached content sent
Add Expire Headers
Remove ETags
With Expire Header
expire and max-age tell browser to cache until such time
Subsequent requests are not made until content expires
Choose Image Format
GIFGraphics
Animations256 Colors
Single transparent Color
JPEG
PNG8 PNG32
PhotosLossy
True ColorsNo transparency
Graphics256 Colors
Alpha transparency
PhotosTrue Colors
Alpha transparency
Smush.it
Removes chunks, comments, application information and
EXIF
Reduces color palette
Converts GIF to PNG
Yahoo! YSlow
Review1. Measure, Don’t Guess2. Use Optimized Content Hosts3. Reduce HTTP Requests4. Externalize JavaScript & Styles5. Minify JavaScript & Styles6. Compress Content7. Cache Content8. Structure Page9. Optimize Images10. Preload Content 53
Summary
• Improve performance across all pages• Win/Win/Win
–Improve client experience–Reduce server load–Make yourself more valuable
• Team effort– developers– content producers– operations
President/Consultant/Authoremail: [email protected]: www.juddsolutions.comblog: juddsolutions.blogspot.comtwitter: javajudd
Christopher M. Judd
http://www.organicdesign.co.nz/File:Warning.svg
Attributions
http://www.flickr.com/photos/captkodak/272746539/
http://www.flickr.com/photos/kgrocki/4098972642/