Wednesday 7 September 2011

Newcastle Coders Group Talk - September 2011

Some of the notes from the talk I gave on speeding up websites.
The coders group meets on the first Wednesday of the month at Newcastle University. I attend them regularly and recommend them.

YSlow
  • Addon for Google Chrome or Firefox
  • Rates your website from 0-100 for performance
  • Uses rules defined in Yahoo Developer Network
  •  Details what you should do to improve performance and reasons why
  • Great for learning and pushing you to get a competitive score
  • http://developer.yahoo.com/performance/rules.html

Spritesheets
  • Websites can use a lot of graphics and images
  • Best results achieved when you have merge multiple images into a single file. Saves on network traffic.
  • You can then split the single image back into separate images using css
  • This is the best tool I found, open source, it allows you to use the code your own projects
  • http://spritesheetpacker.codeplex.com/
  • Example buttons and country flags – 283 images in single file
  • http://www.physiotherapyexercises.com/Sprite-btn.png
  • Warning for IPad and Iphone – images do not work in > 1024x1024 square
  • Put in special logic in my extension to split it into separate images
Javascript and CSS Analysis
Minification
  • Javascript, Css and Html has a lot of text that isn’t required in production
  • Removes comments, extra spaces, swaps out variables with shorter names
  • You should always keep your original code, as the new code can be quite unreadable
  • Many online tools that you can use
  • JSMIN http://www.crockford.com/javascript/jsmin.html
  • JSCOMPRESS http://jscompress.com/
  • I use the tool provided as part of the Microsoft Ajax toolkit, just because it is done via a dll and can be automated
  • http://aspnet.codeplex.com/releases/view/40584
  • 25% saving on CSS, 40% saving on javascript
  • Catenate multiple javascript/css files into single file
Caching
  • Many of the latest browsers allow caching using a manifest file, this allows you to run your website offline and also minimise repeated downloads and minimize traffic
  • Text file, details files that should be cache
  •  http://diveintohtml5.org/offline.html
  • http://www.physiotherapyexercises.com/ExerciseData.appcache
Google Analytics
  • Easy way of determining what your users are doing on your website
  • Can be customised with your own events so you can track exactly what your users are doing
  • http://www.google.com/analytics/
  • Also works for iphone, windows phone etc

HTML5 and other Library Files
Google Chrome Developer Tools
  • Google Chrome has a lot of features that are useful for developers
  • Page speed (similar to yslow)
  • http://code.google.com/speed/page-speed/
  • Console – great for logging
  • Elements -  Great to see elements, Css applied
  • Network -  See files loaded, timing
  • Resources - Storage, Cookies, Application Cache
  • Scripts - Great for debugging - Add breakpoints etc