Powering growth with a scalable headless website for a Shopify app

Overview

SEOVariants, a Shopify app for generating SEO-friendly variants, required a high-performance, SEO-optimized website. The site was built using Astro.js, a framework that enhances efficiency by generating static files from a headless CMS. This setup allows quick content updates and easy editing through reusable sections. Custom transitions ensure smooth loading experiences.

The site employs TinaCMS, which stores content in markdown files, allowing for excellent git-based version control. Despite adding performance-impacting marketing scripts, optimization techniques were implemented to maintain solid Google PageSpeed scores.

Additionally, the website features a custom help portal integrated into the CMS, enhancing user support and accessibility.

Headless CMS website

The website is built on Astro.js, a web framework designed for ultra-fast and efficient websites.

Unlike traditional CMS setups, where content is fetched live from the database with each user request, Astro.js improves efficiency by converting the site into static files with content directly from the headless CMS. This means pages are only generated once, and incremental rebuilds occur whenever content is updated to add what's missing.

Pages in the CMS are constructed from reusable sections, making the editing process quick and easy, allowing SEOVariants to create content rapidly.

Admin preview

Git-based version control

The site uses TinaCMS for the content management system, which saves all of your data in markdown files. Because of this, you are able to store all of it in git and have an amazing version control. This approach is fairly uncommon, but there are definitely some big companies that use this, like the Smashing magazine.

Achieving a good Google page speed score

The project required the addition of several marketing scripts, which initially caused a significant drop in performance. To fix this, I applied some optimization techniques to ensure the scripts ran smoothly without slowing down the load time.

Before:

After:

Without the marketing scripts:

With the marketing scripts:

Custom help portal

The website features a built-in help portal that is fully integrated into the CMS, ensuring seamless access to support resources. The changelog includes an API endpoint that allows data to be passed both to the app and the website, ensuring synchronized updates across all platforms.