Tyler Madison

GZIP Compression in a Nutshell

Tyler Madison — Tue, 06 Mar 2012 20:11:07 +0000

I finally have had some time to wrap my head around a number of lingering topics lately one of them being GZIP Compression. When the client (your browser) requests a page from a web server it sends along HTTP headers with the request, one of the header fields includes Accept Encoding: which tells the web server what HTTP compression formats it is willing to accept when the server responds.

Most modern browsers are able to accept GZIP, deflate which allows the server to fetch the requested document and compress it before sending it back to the client, where it is then essentially uncompressed on the client (your browser) side. This reduces both load time and bandwidth. Seems like a win win situation to me, considering how instantaneous users are expecting to see and be able to interact with your pages.

Sample Implementation to include in your .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

This compression method along with concatenating and minifying scripts and css files, should be used on all HTML,CSS, and JavaScript files. Most images have some type of compression already on them so its not as big of a deal to worry about them so much using this technique. Further research and explanation on implementation can be found here.

Navigation Timing API

Tyler Madison — Tue, 06 Mar 2012 19:52:11 +0000

The Navigation Timing API introduces a JavaScript interface for gaining access into key insights into the performance times of each of the stages of page load. With over 21 attributes that break down page load, you can draw some interesting and informative conclusions about where your page or server times may be bottlenecking. As the page loads these various timings are captured and stored in epoch time on the window.performance.timing object. You can see below at what point these timings occur during load.

Useful benchmarking calculations with some of the 21 attributes:

Document parsing: domInteractive – domLoading
Network Latency: responseEnd – fetchStart
Page load time: loadEventEnd – responseEnd
Navigation and page load time: loadEventEnd – navigationStart

Faster Websites

Tyler Madison — Tue, 06 Mar 2012 19:38:17 +0000

While working at Odopod for the past month or so one thing has become clear, performance! We are striving to make educated decisions about development and think critically about the future of our sites once they are released into the wild. I quickly wanted to share some findings that each have days worth of research behind them. Without further ado, here is my work in progress list of things one should consider when developing and planning for a new site.

• GZIP Compression on HTML,CSS and JavaScript files in .htaccess or IIS server config

• Optimize images using OptiPNG

• Minify and concatenate JavaScript into as little amount of files as possible

• Minify CSS and HTML as much as possible – usually stripping unnecessary whitespace and comments

• Include JavaScript at the bottom of the page just inside the closing body tag

• Load JavaScript asynchronously / or dynamically

• Keep users happy with minimal script execution times < 50ms

• Lazy load images

• Allow your scripts to breath so that they don’t make the UI unresponsive – i.e. processor intensive calculations/looping etc.

• Start with mobile, make content the priority to the user, add functionality and eye candy progressively with more capabilities.

• Use feature detection libraries such as Modernizr instead of browser detection/user agent sniffing

• Limit HTTP requests

• Add an Expires Header on all components – scripts,stylesheets and flash