menuLinkedinGitubEmailSkip to content

NetBase On-Tour

Migrated event microsite from WordPress to JAMstack and improved page load speeds by 43%

My Role

  • Tech Lead

  • Improved page load speeds by 43%

  • Improved in workflow efficiency

Tech Stack

  • HTML5 / CSS3

  • React

  • Gatsby

  • GraphQL

  • Airtable CMS

  • Jenkins

About this project

NetBase is a cloud-based social media analytics platform for companies and marketing agencies. Every year, the marketing team would host a roadshow across the world to demo their platform. The marketing team needed an event microsite that is easy to update and is able to display event details, speaker bios, and agendas for each city that they are visiting.

Problem

The first event site was built on WordPress and Divi theme. The source of truth for the content was all stored in a Google Sheet and was updated on a regular basis, which means the site have to be updated as well. Updating content on the site was manual and resource consuming than it should.

Process

Working with the stakeholders of the marketing team, I gathered requirements and scoped out work for the 2nd iteration of the event microsite and introduced the team to a JAMstack architecture which has many benefits over the WordPress counterpart. The front-end was built using Gatsby, a React-based static site generator, and the back-end leveraged Airtable as the content management system. Airtable CMS offered a "Google Sheets" experience, which everyone on the team is familiar with, and the API is simple for developers to work with. Finally I implemented an autonomous CI/CD pipeline that allows the team to update, preview, and deploy content anytime.

Result

After switching to the JAMstack, we observed an increase in workflow efficiency and improved page load times by 43%. Airtable replaces Google Sheets as the source of truth and content changes are automatically updated on the event site whenever the updates are published, thus reducing duplicate work. Developers are also happy since they get to worry less about page performance since the Gatsby framework automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure the site is fully optimized.