The web performance hackathon – January 2016

Every so often, we like to give our brightest minds a break from the day-to-day and ask them to show off their creative and development talents on some brand new ideas in a hackathon.

They have just two days to come up with working proofs of concept on a certain theme, and the latest hackathon, held in January this year, was all about integrating data from different sources.

Here’s a brief summary of what some of the teams were able to achieve.

Team Roulette – a real-time dashboard to show business users everything they need to know about the performance of a key page

This team integrated data from Performance Analyser, Synthetic Monitoring, Real User Monitoring (RUM) and a tag database (developed by one of NCC Group’s technical consultants to help identify and categorise third-party content).

High-level insights are displayed in simple dashboard, with the most current/active data at the top and more static data at the bottom. Synthetic monitoring and RUM inputs are refreshed every minute, with RUM data aggregated over the last 5 minutes.

roul1

The ‘roulette’ panel at the top of the display gets its name from the fact that it allows users (from RUM) to be picked at random.

Underneath this, the custom insights carousel loops through a number of tables from different products, including most popular locations, devices and slowest third parties.

As well as functioning as a static monitor, the dashboard can also be used to initiate tests in Performance Analyser or deep link into other products for further analysis.

The judges were particularly impressed by the way this team delivered a wealth of insight in one simple report and by the ease with which users are able to drill down for more detailed analysis. They therefore awarded Team Roulette first prize.

team_roulette

Team MONRUMPA – combining automated insights from Synthetic Monitoring, RUM and Performance Analyser

The next team really took the theme of the hackathon to the limit and integrated results from three of NCC Group’s performance testing and analysis tools.

Their project involved looking for anomalous results from tests in Performance Analyser, Synthetic Monitoring and RUM, and attributing scores to each one. Anomalies might come in the form of unusual activity on the site (captured in RUM) or failure to meet performance KPIs (as measured in Performance Analyser). Each anomaly would add to an overall score, with an alert triggered once the cumulative total passed a certain point:

monrumpa1b

Clicking on a bar in the above chart would give you more insight into the anomalies that contributed to the score:

monrumpa2a

Team MONRUMPA’s ambitious effort earned them second prize.

team_monrumpa

Lookup Masters – a common service providing host and SSL certificate information for RUM, Synthetic Monitoring and Performance Analyser

This team developed a plugin for several of NCC Group’s performance testing and analysis products. It verifies SSL certificates by connecting to the web server and displaying the results of the SSL connection, including what SSL certificate is installed and its validity dates. It also provides information about the host, such as domain name, IP Address, expiry date for the domain, security headers, and contact details for the admin and technical support teams.

The idea was to make this kind of useful information more easily accessible from a convenient location, not least to help web teams stay organised and avoid embarrassing lapses.

lookup1

lookup2

The judges liked the way the Lookup Masters enriched NCC Group’s existing products and awarded this team third prize.

team_lookup

Team Spider – a visualisation tool for tracking the geographical origin of objects on a web page

This team used D3 to create a world map that shows where objects on a web page are actually served from.

It uses bright lines to create hotspots indicating the volume of requests and responses. The demo was created with live data from tests running in Performance Analyser, but other data sources are also an option.

This project offered a simple, visual way to assess the potential impact of latency on the performance of the web page under test.

Team APIFace – displaying monitor status on an LED matrix

It’s quite common for organisations to display the status of their various website monitors on a big screen. However, APIFace came up with a novel and simple way to show monitor statuses using LEDs, offering an even more straightforward, high-level overview.

It made use of NCC Group’s monitoring API, along with Arduino Uno, a Neopixel shield and the Adafruit NeoPixel and NeoMatrix libraries to process the serial output and control an LED matrix to display high-level status and severity.

The first demonstration showed how warnings, errors and outages could be communicated using a combination of colours and facial expressions:

apifaceAll

The team went on to show how the same information could be communicated with scrolling numbers, again in different colours, to show how many monitors were OK, how many were showing errors, etc.:

scrolling-number2

Alternatively, the LEDs could be used to display a bar chart, displaying a green bar for successful tests, yellow for warnings, red for problems and blue for downs.

barchartmonitor

If you think you’ve seen something like this before, you might be right. This was an extension of the idea first tested by Tim Daish back in June 2015 (https://www.nccgroup.trust/uk/about-us/newsroom-and-events/blogs/2015/june/getting-your-monitoring-data-to-work-with-an-arduino-board/).

Overall, we’re delighted with the output of the event, and it continues to provide inspiration for potential improvements to our products. For example, the Performance Heatmap, recently released in Performance Analyser, started off as a hackathon project. So look out for more hackathon-inspired features in the future!


 

Andrew Darnell

Andrew is Engineering Manager at NCC Group Web Performance.

Leave a Reply

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