Live demo of our MCP this Thursday! RSVP
Directus Logo
  • Use Cases and Features
    • Headless CMS
      Manage and deliver content with ease
    • Backend-as-a-Service
      Build and ship applications faster
    • Headless Commerce
      A single source of truth for products
    • 100+ More Use Cases
      Build anything (or everything)
    • Instant APIs
      Connect a database, get REST + GraphQL APIs
    • Granular Policy-Based Auth
      Provide secure, autonomous data access
    • Visual Automation Builder
      Automate content and data workflows with ease
    • 50+ More Features
      Get everything you need out-of-the-box
    Project Showcase
    Built With Directus

    Built With Directus

    See what everyone's been building with Directus

  • Learn More
    • Blog
      Read our latest articles and guides
    • Case Studies
      Case studies and success stories
    • Community
      Join our 13k member Discord community.
    • Agency Directory
      Browse our list of agency partners
    • About Us
      Learn more about Directus and the team
    • Wall of Love
      See what others are saying about us
    • Contact
      Have a general inquiry or question for us?
    • Support
      Reach out to Directus support
    Watch Directus TV
    Directus TV
    Video

    Directus TV

    Go down the rabbit hole with hours of original video content from our team.

  • Developers
  • Enterprise
  • Pricing
Chat With UsGet Started Free
GitHub logo30,731
Back
Case Study
Wednesday, June 15, 2022

How Cucumber Achieved a 100% Lighthouse Score

Founded in 2004, Cucumber is based in New Zealand that uses technology and innovation to solve complex real-world problems of all kinds for customers.
How Cucumber Achieved a 100% Lighthouse Score

Founded in 2004, Cucumber is based in New Zealand that uses technology and innovation to solve complex real-world problems of all kinds for customers, with solutions that drive efficiency, sustainability and productivity. The company works across government (from local to central), research, and national and multinational enterprises.

Cucumber works in partnership with both large and small enterprises from simple websites to complex front and back end data systems. “Our team provides analysis and strategy through design, execution and management, for both the frontends and backends of complex platforms,” said Matt Skinner, at Cucumber.

A Project Close to Their Hearts

One project that’s been important to the team at Cucumber for more than a decade is designing and maintaining the website for a local initiative called Young Innovators Awards (YIA). YIA is integrated into schools’ curriculum and leads to an annual awards night that celebrates the work the students produce. It is designed to develop the innovation economy within the Bay of Plenty region.

Cucumber was tasked with modernizing the YIA website for the 2022 awards, and improving its performance and SEO based on measurements provided by Lighthouse, an open-source, automated tool for improving the quality of web pages. “We rebuilt YIA’s entire web presence to make it easy for students to find the information they need and upload their entries,” Skinner said.

However, because many disparate data sources were feeding the site, and data and content were provided in various formats, optimizing the site’s performance was challenging. “The existing website was achieving a Lighthouse score of about 80%, and we wanted to increase that as much as possible,” Skinner said.

Skinner and his team evaluated multiple solutions before choosing Directus. “We looked at numerous NodeJS-based CMS solutions and narrowed down the list until only Directus was left,” he said. “Other solutions either had a buggy interface, were too opinionated, or just didn’t make the data as open and as free as we needed. Directus is unopinionated, open and flexible, so it was the perfect fit.”

Directus Delivered Essential Flexibility and Simplicity

Directus democratizes data across organizations with an easy-to-use, intuitive platform for technical and non-technical users alike. It eliminates the need to architect, provision and maintain the backend infrastructure, and provides an intuitive no-code app for creating highly customized digital projects in minutes.

Directus connects to new or existing data sources via REST, GraphQL APIs, a CLI or an SDK, providing the flexibility to leverage an array of data connection options. It supports various authentication methods, as well, and enables granular role-based permissions for access control.

According to Skinner, many of Cucumber’s clients have monolithic solutions in place. “They have datasets from dispersed sources, multiple APIs and a wide variety of data types, and they haven't really thought about that process evolving,” he said. “Directus unlocks access to all that data by enabling a website’s UI to reveal data from multiple sources through a single API. There’s only one external source to worry about, rather than having to connect to multiple APIs to pull the data.”

A New Paradigm for Content and Data Management

Using Directus, Cucumber has created a modular, repeatable approach to design using ready-made components, which reduces development time and costs while enabling bespoke output. “We can implement understandable blocks of code in a consistent manner, so that our content managers don’t have to think through how an entire page renders – they just need to imagine how and where blocks of content render on the page,” Skinner said.

Skinner added that this approach to content management is a different paradigm compared to monolithic platforms. Clients benefit from greater control along with commercial-grade consistency and safety, and the ability to render content appropriately for different UIs and devices. “You can't set up templating with that level of granularity with WordPress – but Directus makes it easy,” he said. “Directus keeps out of the way in a good way so we can do what we want to do with the UI.”

While the team is aware of the Directus platform’s capacity for customization, they have yet to use it, because all the functionality they need is included in the core platform. “As our templates and components become more complex, we might leverage some of the customization available in Directus; but for now, the core platform has been more than adequate.”

100% Lighthouse Score Across the Board

Using Directus to create the new YIA website has enabled Cucumber to achieve 100% Lighthouse scores across all five parameters: performance, accessibility, best practices, SEO, and progressive web app (PWA). Skinner said achieving a perfect score is almost unheard of, and he credits Directus. “Directus enabled us to make our own choices and set the YIA website up in the right way, whereas other more opinionated situations prohibit that freedom of choice,” he said.

Skinner added that decoupling the content from the site is key to making this work, and far different from typical monolithic CMS platforms, where the content is essentially built into the site itself. By taking this open data approach, Directus enables a wide range of use cases, which benefits Cucumber as they look to solve various business problems for their enterprise customers.

“There’s a lot of potential in using Directus for a variety of use cases, as we look for ways to meet the needs of clients requesting mission-critical internal applications and other digital projects,” he said. “We’re thrilled with what we’ve been able to do with YIA, and we’re excited about the opportunity to leverage Directus for our enterprise customers moving forward.”

Posted By

Benjamin Haynes

Benjamin Haynes

CEO, Founder

Share

LinkedIn LogoTwitter LogoReddit LogoDev.to Logo

Sign up for updates 🐇

Get insights, releases, and exciting news delivered directly to your inbox once a month. No spam - we promise. 🙂

  • Directus LogoDirectus Logo

    A composable backend to build your Headless CMS, BaaS, and more. 

  • Solutions
    • Headless CMS
    • Backend-as-a-Service
    • Product Information
    • 100+ Things to Build
  • Resources
    • Documentation
    • Guides
    • Community
    • Release Notes
  • Support
    • Issue Tracker
    • Feature Requests
    • Community Chat
    • Cloud Dashboard
  • Organization
    • About
    • Careers
    • Brand Assets
    • Contact
©2025 Monospace Inc
  • Cloud Policies
  • License
  • Terms
  • Privacy