deZaan

About

deZaan are a global cocoa manufacturer that have been around for over 110 years. Their site is managed through Contentful CMS and also integrates with Salesforce to allow for lead management for the academy.

Challenge

There have been several technical challenges to overcome throughout the project. Firstly, the project was inherited from previous developers and with it came the learning curve of dealing with a legacy codebase while making improvements to performance and other processes without causing any production issues.

Build times were also incredibly slow, taking as much as 12 minutes for the entire 2,000 website. This meant the developer experience was frustrating and that's before dealing with the qwerks of Gatsby.

The site has support for multiple locales and each locale may have restrictions on what can be displayed in each region.

Solution

The first part of the project was implementing TypeScript support throughout the project. This helps ensure a safer development experience, particularly as were were able to convert the GraphQL Fragments into types from Contentful.

The build issues were being caused by common components being re-rendered for each page that Gatsby creates. To speed up the process, we instead went through the entire codebase to find components that could be converted to slices. This essentially creates a reference that can be used throughout each page. This resulted in build times being reduced by over 60% to around 4 minutes.