The challenge

Each month, the Guardian’s website receives over 350 million unique page views. In order to meet readers’ expectations, their website must not only be optimized for performance and serve content as quickly as possible, but also support a diverse range of web accessibility requirements.

As a large media site, every millisecond counts. According to BBC, every additional second a page takes to load causes 10% of users to leave. “We needed a way to ensure that our assets are optimized when they get published to our website,” says Max Duval, senior software engineer for the website.

Beyond performance, the engineers also acknowledge that many of their readers use a wide range of assistive technologies to consume the content from their website. To make sure their stories are widely read, they must support web accessibility requirements. “A manual audit revealed some of our articles included HTML elements that were missing critical attributes,” Max says. “We wanted to make sure any new articles follow the best accessibility practices, but didn’t have a systematic, automated approach to surfacing these discrepancies at scale.”

The solution

The team knew they needed to build an automated system for assessing accessibility and performance discrepancies. They first turned to Node, but ran into complexity issues. “Using Node for something as simple as downloading a page and looking at it was super complex,” Max says. “Doing a GET request, parsing URLs, resolving redirects, all required evaluating and installing a library.” But using Deno, which natively supports web standards APIs, this same script was much simpler. “There’s no risk for dependency bloat with Deno, as there is with Node and npm.”

They also enjoyed using Deno for its native TypeScript support. “The Guardian has traditionally used Scala for most of its server code, where strong typing is a given. TypeScript has steadily grown in popularity, but it’s difficult to use for non-bundled applications. Being able to write and execute TypeScript without configuration has helped our team move faster,” Max says.

Their automated system runs Deno scripts everyday on GitHub Actions to check for missing HTML attributes, as well as size of assets like images, fonts, and other media, to assess for accessibility and performance. Any deviations surfaced by the job will update these GitHub issues for their team to investigate.

“Deno made it easy for us to spin up a solution to cover our bases, which helps ensure our stories can be consumed by the widest possible readership,” says Max.