Andy Davies

Independent Web Performance Consultant

Implementing Sparkicons

A few days ago, Mark Boulton bounced around the idea of Sparkicons, small inline icons at the end of links, that indicate what's on the end of a hyperlink.

Based on meta-data attached to a link, the Sparkicon could indicate the link is to a PDF, or a video, or a discussion thead. It could also include addition information such as how long a video is or how many comments there are in a discussion thread.

This is one way they could be implemented...

Think Twice Before Using matchMedia to Conditionally Load Stylesheets

Christian Heilmann recent started exploring how matchMedia could be used to conditionally load resources based on viewport size and other mediaqueries - Conditional Loading of Resources With MediaQueries

I've experimented with using matchMedia to restrict the loading of social media buttons to larger viewports so I think using matchMedia to conditionally load content is a great idea but I was less convinced by the benefits of Christian's example of conditionally loading CSS.

Visualising Webpage Resource Dependencies

Waterfall charts are great but they show a timeline rather than the relationships between the resources on a page and I often want to understand what triggered a resource to load.

At Velocity EU, Rajiv Vijayakumar of Qualcomm demonstrated a tool they're building to map the resource dependencies in webpages highlighting blocking paths etc.

Currently it's not clear whether Qualcomm are going to opensource the tool, or run it as a service (like WebPageTest), so during a moment of curiosity I attempted to produce something similar using WebKit dev tools and Mike Bostock's D3.js.

Configuring an ‘all-in-one’ WebPageTest Private Instance

WebPageTest (WPT) is a great tool and the public instances cover many scenarios but sometimes I need a private instance, for example when testing sites that aren't publicly accessible yet or debugging a script.

Setting up a private instance is reasonably straightforward but there are a few gotchas and some settings aren’t always obvious the first time around.

I’ve been asked by a few people how I set up instances, so these notes explain the steps I follow to create an ‘all in one’ installation with the server and test agents on same machine.

What if We Could Use CSS to Alter HTML Attributes?

As the ideas behind responsive web design mature, and our skills and experience with them grow, we're faced with a gap between what the tools and technologies can do and what we'd like them to do.

We often end up trying to fill the gap with javascript and using it not just for behaviour but to change appearance and content too.

Javascript might be the right tool for many things, but should we really be embedding attributes that control appearance in our scripts, or might a declarative approach that uses CSS to change HTML attributes be clearer?