DeepLearning.AI is a leading ed-tech company in Artificial Intelligence and Machine Learning field. It is on a mission to grow and connect the global AI community. DeepLearning.AI is founded by Coursera’s chairman and co-founder, Andrew Ng.
We collaborated with DeepLearning.AI’s marketing team to build them a technical infrastructure which could help them extract the most value out of their marketing efforts and take it to the next level.
Key outcomes of this project were:
- Migrated to a modern stack: JAMstack.
- 80% faster page load times on all pages.
- Amazing content management experience, and low developer depencency for making updates.
- Merged multiple sub-domains into the primary domain for stronger SEO.
- Increadibly Low downtime
- High security
- Lastly, we improved Developer Experience for ourselves, so that we can deliver faster in future.
What is JAMstack?
JAMstack is an abbreviation for Javascript, APIs, and Markup. It is a modern architecture for building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.
A JAMstack website consists of a headless CMS and a frontend framework.
One Website, Multiple Data-sources
With JAMstack, we can pull data from multiple CMSs. We don’t have to rely on just one CMS; we can play to their strengths and use the best CMS for a particular use case. E.g., a blog section can use Ghost, an e-commerce section can use Shopify, and for landing pages, we can use Storyblok, All on the same website.
The following diagram shows the data sources we use in this project:
Technologies Used
Going Headless with WordPress
The client previously used WordPress for their website with a custom-built Gutenberg theme. Though Gutenberg editor and ACF blocks provide great flexibility, but site lacked speed, user experience, developer experience.
Going headless allowed us to have the good parts of both worlds.
Essential WP plugins that you need to use your WordPress site as headless CMS:
- WP GraphQL
- Add WPGraphQL SEO
- WPGraphQL for Advanced Custom Fields
95/100 Scores on Google Lighthouse
We used Lighthouse and Gtmetrix to measure the performance of the website before and after the migration. The following table shows the performance report of the website before and after the migration.
| Before | After | |
|---|---|---|
| Performance | 26 | 95 |
| Accessibility | - | 87 |
| Best Practices | - | 90 |
| SEO | - | 100 |
| Largest Contentful Paint | 3.9s | 0.6s |
| Cumulative Layout Shift | 0.12 | 0.003 |
Techniques that we used to improve performance:
- Static Site Generation (SSG) using Next.js
- Image optimizations using next/image component
- Code splitting
- Third-party script optimization using next/script component
60% Cost reduction
We migrated the website from a custom-built WordPress theme to a JAMstack website. This allowed us to reduce the cost of hosting by 60%. We also reduced the cost of maintenance by 50%.
A headless WordPress site doesn’t need an expensive server; Just a basic WordPress server sufficient to serve WordPress’s admin interface to content editors was enough for the team. We use Vercel to host the website. Vercel is a serverless platform that provides a lot of features out of the box such as CDN and easily scale to server millions of visitors.
Yoast WordPress Plugin
Top concern for our client was if they’d be able to continue using Yoast SEO plugin. With headless WordPress you can continue using Yoast SEO plugin as usual.
WPGraphQL Yoast SEO plugin provides a seamless integration with WPGraphQL.
Developer Experience
We finally moved from a nightmarish WordPress theme development experience to a more streamlined one. We no longer have to deal with any PHP code and WP API’s to make things work. We can work with simple Javascript and REST (and GraphQL) APIs.
This allows us to deliver faster and reduces the cost of maintenance for the client.
Client Testimonial
Thank you for working on moving our website to a headless CMS. I am impressed by the positive changes, e.g, the loading speed is significantly improved, and also I’m glad to see the Batch site finally lives under the main URL. The seamless experience would greatly improve UX, and on top of that SEO ranking.