Implementation of Contentstack and JAMStack for Better SEO and Performance - Software Development

Industry: Telecommunication

In the age of digital transformation, businesses are constantly looking for ways to optimize their online presence. This article delves into a real-life case where a company faced a series of challenges with their websites and the innovative solutions that brought them significant success. The main issue at hand was the usage of WordPress as their main CMS, coupled with outdated technologies across their websites, resulting in performance and functionality issues.

Context and Challenges

The company in question operated three distinct websites, each using different technologies – marketing/sales, university, and e-commerce. Their primary objective was to unify all three websites under a single technological stack to streamline management. Additionally, they faced challenges related to SEO, performance optimization, and the need for scalability.

A crucial challenge involved creating a diverse range of pages from their CMS, comprising various components and multiple languages. This necessitated a powerful search capability for their websites. The company also sought to implement an ambitious SEO plan to bolster their global sales, all while ensuring easy scalability and effective content management.

Enroute's Solutions

The primary goal was to redesign all three websites with a strong focus on SEO and performance optimization. A key element of their strategy was adopting Contentstack as a headless CMS. Enroute also aimed to achieve the following secondary goals:

1. Implementing final user origin auto-detection for displaying the correct language and currency.
2. Ensuring GDPR compliance.
3. Creating new pages with diverse configurations without relying on developer assistance.
4. Generating GeoJSON maps to showcase products across different countries worldwide.
5. Adhering to secure software development practices in line with OWASP's top 10 recommendations.

How It Was Accomplished

Enroute assembled a dedicated team comprising a project manager, six full-stack developers, and two quality assurance professionals. Collaboration with other teams within the telecommunications company was essential.

The team started by evaluating various frameworks and tools, ultimately selecting GatsbyJS and Bulma to fulfill their requirements. They established a robust CI/CD pipeline utilizing GitHub (monorepo), Travis CI, and Netlify. Best practices and naming conventions for Git branches and files were defined, alongside the integration of ESLint and Prettier into the Gatsby project.

The design approach centered on creating React elements and components, mirroring the same structure within Contentstack. This allowed the editor's team to effortlessly craft any type of page. Custom plugins were developed for Contentstack, including a rich text editor, integration with other vendors, and a CSS editor.

Enroute integrated ImageKit into the project to generate custom images on the fly, utilizing their CDN and implementing lazy loading for images, assets, and React components (loadable components) to boost SEO scores. Algolia was chosen to power the indexing and search functionalities of the project, backed by custom facades and webhooks.

It took nearly two years of dedicated effort to bring the new websites into production.

Business Impact

The results were remarkable. Within a few weeks, the company's marketing site achieved a perfect score using Lighthouse, while its page speed surpassed industry standards. In just a few months, the number of visitors surged to four million per month, and leads nearly tripled. This case demonstrates how strategic planning, cutting-edge technology, and a dedicated team can transform a digital landscape and yield significant business benefits.