Highlights from the web performance hackathon

Every so often, following the annual lockdown, we give some of our best and brightest minds free rein to work on anything that takes their fancy. Fuelled by pizza and a passion for their work, they’re given just two days to come up with working solutions in a two-day hackathon. We try to make the atmosphere as relaxed as possible to help spark some creative thinking. There’s also the incentive of a number of small prizes for the most imaginative ideas.

Last year’s event took place on 14–15 December, and here are a few of the highlights:

Caching header analysis

How do you tell if an object has appropriate caching headers? There isn’t always a right or wrong answer, but Team Toaster decided to look for a simple, visual way to check whether headers might need attention. The idea was to look at the relationship between the Last Modified and the Expires headers. If the Last Modified date was much further in the past than the Expires date was in the future, this could be a good indication that the Expires date should be extended. It’s not foolproof, but it provides an excellent starting point. The team built their solution with PHP, JavaScript and an open source graphing library. Here’s a sample of the output:

toast1
Figure 1 ­– Comparing Last Modified date with Expires date – the bars on the left show when each object was last modified, while the ones on the right show the number of days before it expires

toast2
Team Toaster

Experimenting with the monitoring portal UI

Team High Fidelity decided to experiment with NCC Group’s monitoring portal UI. Building on the new version of the portal (a preview of which is coming soon), their aim was to promote thought and discussion rather than produce the dream solution.

Nevertheless, they came up with some great ideas:

iPad-fidelity
Figure 2 – Displaying monitoring data in different ways and on different devices

highfid1
Team High Fidelity

Performance heatmap

This team was inspired by Mark Zeman’s front-end performance heatmap. Written in PHP, their solution can be used to log in to Performance Analyser, run a test, retrieve the results and generate an image showing which parts of the page were quickest to load. The focus was on load order, rather than absolute timings, with the areas of the page that load first highlighted in green and the slowest in red.

Web performance heatmap
Figure 3 – A web performance heatmap

This gives you an at-a-glance guide to whether you’re loading the most useful content first.  For example, it will show you whether you’re loading a purely decorative background image before more useful text or third-party ads before your own content.

jnm1
Simon Hearne and Andy Davies built the performance heatmap

PA Runner for CI

Increasingly, organisations are building web performance into the development process. This inspired one team to integrate Performance Analyser with Jenkins.

Written in Java and configurable using a simple JSON file, this worked so well and was so well documented that you can use it today if you’re a Performance Analyser customer. You’ll find a step-by-step guide here: https://community.nccgroup-webperf.com/documentation/application/pa-runner-for-jenkins/.

This was also the overall winner.

pa-runnner-ci
Figure 4 – Output from an integration of Performance Analyser with Jenkins

parunner2
Paul Bianciardi collects the prize for the integration of Performance Analyser and Jenkins

We’ve just covered a few of the highlights here, but other excellent entries included a tool to analyse and visualise log files from the latest version of our monitoring agent, a working chat room and an application that allowed users to recommend drinks by photographing them on a smartphone.

The verdict

It was a fun event with a serious purpose. Getting people to think creatively outside the constraints of their day-to-day job can be incredibly valuable. Even quirky, off-the-wall ideas can help people learn how to use a new technology or work in new ways. This year, the hackathon gave us a number of ideas to take forward and at least one finished, ready-to-use solution. We’re looking forward to running the next one.


Andrew Darnell

Andrew is Engineering Manager at NCC Group Web Performance.

2 thoughts on “Highlights from the web performance hackathon

Leave a Reply

Your email address will not be published. Required fields are marked *