Andy Davies

Web Performance Consultant

Generating HAR Files for iOS Safari

If you want to generate page load waterfalls for iOS Safari the current options are Mobitest / WebPageTest or Safari on OSX.

Mobitest and WebPageTest are great tools (essentially the same tool underneath) that I often use but they have a few limitations:
- there's a limited number of test locations so latency can complicate testing
- uses a UIWebView so any javascript in the pages doesn't have access to the JIT

Safari on OSX is OK but there seems to be no way of generating a HAR file from the waterfall view in developer tools.

These limitations sometimes frustrate me so I decided to write a generator that creates HAR files from Safari running on the iOS Simulator (actual physical iPhones and iPad support will hopefully come too).

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.