The movement towards designing with performance budgets in mind has inspired more fist pumps and vuvuzela bleating in this developer than the recent World Cup. Thinking through the ramifications of design choices for site performance makes it easier for me to build a fast website when development begins.
But when it comes to testing against budgets, we’ve been measuring page weight and rendering times manually, using tools like WebPageTest.org and Yahoo’s YSlow. Relying on humans to run tests has meant we don’t always measure our performance consistently, therefore missing page weight hogs like the occasional stray Blingee. There has to be a better way, right? A curious client got us wondering how we could automate our performance testing.
When we think of responsive design, we typically focus on newfangled mobile devices like smartphones and tablets. But, as front-end developers, we still need to account for older browsers that can’t handle the newest CSS3 techniques when rendering our sites. In the case of responsive design, that means our old friend Internet Explorer 8 (and below) needs some extra handholding when we build our sites with media queries. These browsers don’t support media queries, and since they are still in widespread enough use that we can’t ignore them (~10% of users are still using IE8), we have to come up with new techniques for gracefully degrading our sites.