10 Simple Performance Tips Every Web Developer Should Know10 Simple Performance Tips Every Web Developer Should Know. Christopher M. Judd President/Consultant of leader Columbus Developer

Christopher M. Judd

10 Simple Performance Tips Every Web Developer

Should Know

Christopher M. JuddPresident/Consultant of

leader

Columbus Developer User Group (CIDUG)

Remarkable Ohio

Free

Developed for eTech Ohio and Ohio Historical Center

University System Of Ohio

FreeDeveloped for eTech Ohio and University System Of Ohio

80% of web sites experience performance problems in browser

Disclaimer: Every web site is unique

1. Measure, Don’t Guess

often we only measure the request, response and server execution time

Page Weight

sizecompositiondownload speed

Must consider cached and uncached

Waterfall Chart

Firebug HttpWatch

Yahoo! YSlow Google Page Speed

AOL Page TestFiddler

Firefox Plug-in

Free and Open Sourcehttp://getfirebug.com/

Free (disabledware) and Commercial Versions

IE and Firefox Plug-ins

Programmatic Automation Support

http://www.httpwatch.com

Grade

Firebug Plug-in

Recommendations

Yahoo! YSlow

http://developer.yahoo.com/yslow/

Google Page Speed

http://code.google.com/speed/page-speed/

Firebug Plug-in

Recommendations

Google Page Speed Activity

Detailed Activity

http://webpagetest.org/

Free service

Runs tests from outsideyour network

Select speed• FIOS• DSL• Dial-up

Recommendations

Waterfall

Cached/Uncached

Screen shots

Profile JavaScript

Requests

uncachedcachedrefreshhard refresh

Uncached Requestdownloaded content

Cached Request

did not download content

sent date to validate cache

Refresh Request (F5)

did not download content

sent date to validate cache&

max-age to control cache

Hard Request (ctrl + F5)

downloaded content

did not send cache date&

sent hard clear cache command

2. Use Optimized Content Hosts

web server app server

put images, css, js and other contenton web server

web server app server

put images, css, js and other contenton web server

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

3. Reduce HTTP Requests

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;

}

combine JavaScript and Styles17 Java Script requests from same server

This couldn’t be combined?

avoid duplicate content

https://jawr.dev.java.net/

bundles JavaScript and CSS filesincludes only once

Never have a 404 - File Not Found!!!

4. Externalize JavaScript & Styles

<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

5. Minify JavaScript & Styles

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/

6. Compress Content

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!

7. Cache Content

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

8. Structure Page

CSS

JavaScript

Use LINK in HEADto get progressive rendering

Blocks content from loading

9. Optimize Images

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

10. Preload Content

Preloads

for

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/