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.

  • 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

  • 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
  • Example buttons and country flags – 283 images in single file
  • 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
  • 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
  • I use the tool provided as part of the Microsoft Ajax toolkit, just because it is done via a dll and can be automated
  • 25% saving on CSS, 40% saving on javascript
  • Catenate multiple javascript/css files into single file
  • 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
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
  • 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)
  • 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