With over 14 websites and millions of visitors per month, managing Gymsharks SEO is not a job for the faint of heart.
Luckily for us, Scott Salter Gymshark’s SEO & Content manager, and Ben Pusey, the Product Manager, have given some fascinating insights into how Gymshark has evolved its website over the years to drastically improve UX and personalisation on the site.
These improvements seem to have skyrocketed their SERP visitability in recent months and have also added tens of millions in annual revenue, according to Ben.
But how have Scott and his team done it?
A brief bit of history
Founded in 2012, Gymshark burst out of the stalls faster than anyone could have imagined.
This trajectory was driven by innovation, evolution, and adaptation.
These were all characteristics Gymshark had to rely on when in 2015, they faced significant setbacks.
Gymshark’s self-hosted Magento store had failed under the load they faced on Black Friday, leading to substantial financial losses and reputational damage.
As Ben Pusey Gymshark’s product manager stated: “We realized that our tech was a core driver of our business success. We needed to refocus the tech to grow with the business.”
So, out with Magento and in with new….
New Tech Stack & A MACH Approach
Gymshark shifted to implementing a Mach (Microservices, API-First, Cloud-native, Headless) principle approach:
- Microservices: A software development method of creating loosely coupled, independently deployable services, each executing a unique business process, facilitating easier scaling and maintenance.
- API-first: A design approach where application programming interfaces (APIs) are developed first, promoting better collaboration between frontend and backend developers, and fostering robust software architectures.
- Cloud-native: Building and deploying applications to run in cloud environments from the start, enhancing scalability, resilience, and operational efficiency.
- Headless: An architecture that separates front end and back end, allowing independent development on each end and enabling the front end to retrieve data from various backend services via APIs.
This Mach approach introduced a new tech stack, which included:
- Shopify as the foundation; it is extremely modular and extendable thanks to its API-first approach
- Algolia for search and collection pages
- Contentful for content management
- React as the front-end application
- AWS Lambda and other AWS services as the glue holding the technologies together
What this all means
MACH architecture removes the need for dependencies a ‘Monolith’ architecture typically has.
| Attribute/Aspect | Monolithic | MACH (Microservices, API-First, Cloud-native, Headless) |
|---|---|---|
| Pros | ||
| System Simplicity | Easy to develop initially; simpler architecture for small apps | Modular components make it more organized and clean |
| Scalability | – | Components can be individually scaled as needed |
| Flexibility | – | Enhanced; services can evolve independently |
| Maintenance | – | Easier pinpointing and fixing specific service issues |
| Development Speed | – | Parallel development due to service independence |
| Deployment | Uniform deployments | Deploy individual components without affecting others |
| Content Management | – | Efficient & separate, e.g., with tools like Contentful |
| Cons | ||
| System Complexity | Can become complex and tangled with growth | Initial setup can be complex |
| Scalability | Difficult to scale; requires scaling entire system | – |
| Flexibility | Limited; changes affect the entire system | – |
| Maintenance | Difficult in large setups; potential for more bugs | Need for consistent communication between services |
| Development Speed | Slows down as system grows due to dependencies | – |
| Deployment | If one feature fails, the entire deployment could be at risk | – |
| Content Management | Tied within the system, less flexible | – |
But, what’s a “Monolith”?
Let’s quickly digress, into a metaphorical example to help explain MACH Vs Monolith:
Monolithic Architecture:
Imagine a large, bustling kitchen in our food court that prepares all sorts of cuisines—burgers, sushi, pizza, you name it.
In a monolithic architecture, this kitchen does everything: it takes orders from customers, prepares the food, serves it, and manages payments.
Everything is intertwined; if you want to change the way orders are taken, it could impact how food is prepared or served.
It’s like a big, all-in-one restaurant. If anything goes wrong in one part of the system, it could potentially affect the entire operation.
Changing or upgrading anything requires careful consideration and potentially shutting down the kitchen for a while.
Microservices (MACH) Architecture:
Now, instead of one big kitchen, imagine our food court has several small, specialised kitchens—each one focused on a different cuisine.
There’s a burger kitchen, a sushi kitchen, a pizza kitchen, and so on. Each kitchen operates independently, taking orders, preparing food, and managing payments for its own cuisine.
They can change their menu or upgrade their kitchen equipment independently without affecting the others. If the sushi kitchen wants to try a new payment system, it can do so without disrupting the burger or pizza kitchens.
In tech terms, MACH stands for Microservices, API-first, Cloud-native, and Headless. Each kitchen is like a microservice with its own specialised area, communicating via standard protocols (APIs), and capable of being upgraded or changed without affecting the others.
In summary, a monolithic architecture is like a single, large kitchen that handles everything, making it potentially rigid and difficult to change. On the other hand, a MACH (microservices) architecture breaks down the operations into smaller, specialised kitchens, allowing for more flexibility, independence, and easier upgrades or changes to each part of the system.
So, Gymshark gave themselves the capability to be more agile, work at speed and innovate, by adopting a modular approach.
What impact has this had on Gymshark’s SEO?
Over the years, Google has placed more emphasis on user signals as a ranking factor.
By implementing MACH, Gymshark has been able to improve the UX of the site, resulting in not only an increase in revenue but also SERP visitability. As improved UX, leads to improved user signals.
According to Algolia, Ben Pusey believes through improving customer search (internal search), customer navigation, and AI-based merchandising, they have seen an increase of $20m in incremental annual revenue.
Based on the visibility index chart Scott shared on his Twitter in October 2023, it’s fair to conclude that the improvement in UX has had a positive impact on their SEO as well.
Rolling out a headless version for the Gymshark site
Back in June 2023, Scott Salter came to the defence of what seemed to be an error on the Gymshark website.
After one Twitter member flagged up the fact that the entire Gymshark website seemed to be noindexed.
Scott, stated that “We’re moving our website to a Headless environment but first wanted to test the impact on a) user engagement and b) organic search. “
And he went on to explain that the headless version was actually on the .shop subdomains, such as uk.shop.gymshark.com. There was a dice roll (split test) that would send a percentage of users to this headless version, so they could begin to test the impact on conversion rate and other signals.
Googlebot and other crawlers were blocked from the ‘dice roll’ and so continued to index the main site.
Logically, once they were able to prove the value of going headless, they rolled out the version regionally first, such as for the subdomain ca.gymshark.com for Canada.
This staggered approach seems to have come out trumps. As seen from the visibility chart Scott shared in October.
One area he mentioned the headless environment had the greatest SEO impact was with site speed, alongside the uplift in conversion rate.
This is because the decoupling of the front end from the back end, allows Gymshark to use modern frameworks to deliver a fast, responsive and personalised experience.
They can make incremental improvements, to each section of the website, without having to worry about site wide & backend changes every time.
Monolithic platforms also come with numerous third party plugins, custom scripts & bloated code which results in dragging down site performance.
What can we learn from Gymshark's MACH approach for SEO?
MACH isn’t going to be for everyone. It has its drawbacks, such as:
- Setup requirements
- Complexities with managing communications through API’s and multiple microservices,
- Skill requirements
- Operational overheads to make sure all microservices are operating smoothly
That being said, for businesses that have the technical nouse and are planning on their tech stack to be both varied and delivered to a large audience, a MACH approach is undoubtedly the right route to take.
It is a game changer for both scalability and adaptability.
This adoption was clearly made with the intention of providing a consistently improved experience for their customers, such as improving:
- Page speed
- Internal search
- Improved personalisation on category displays
- Localisation
This undoubtedly has had a positive impact on Gymshark’s ability to rank in the SERP, whilst also seeing an uplift in conversions.
Which is of no surprise, considering Gitnux reported that companies utilising headless commerce see an average of a 24% uplift in conversions.
How Gymshark have managed and staggered key changes, to make sure no significant issues occur, is also something that is to be admired.
- Headless adoption
- Testing on a temporary (no indexed) domain using a split test
- Evaluating the results, to see if rolling out to their indexed websites would make sense
- Rolling out to specific regional websites one by one, to avoid company-wide issues if spotted
For such a large audience, Gymshark can’t exactly afford for the site to go down or to face issues. So, this might seem like an obvious approach for enterprise-size sites and SEO managers. But for those working for SMB’s, it’s worth taking note of.
SMB’s can learn from such a process, by rolling out changes, testing using split tests, ads and testing domains in a similar manor.
They can afford to take a more high-risk approach, without worrying about your brand image being impacted through testing. Notably CRO and UX changes. Such as significant CTA changes, restructuring pages, messaging etc.
Content management
Gymshark has also adopted a headless content platform on top of their headless CMS, through Contentful.
Instead of it being tangled up within your code, you can separate it from your presentation, allowing you to manage content without bothering developers, you can assemble content more reliably, and it even gives way to more efficient content automation and programmatic SEO.
Where the content platform comes in, is through centralising content in a single content platform, where tools can be integrated tools, optimise and customise content for a range of platforms, all within one place.
With over 14 websites, my guess is Gymshark uses the Contentful platform to manage and disperse content for all their websites, making it a far more efficient process than managing each as their own entity.
Beyond SEO
Storyblok released an article stating that 83% of companies reported a general improvement when adopting a headless CMS approach, across budget, productivity, meeting their KPI’s and revenue.
This can be seen in the Algolia case study, where they referenced how the Gymshark merchandising team previously needed to “rerank products and hide out-of-stock items on the fly”. Which ended up pricing impossible on large event sales. Since adopting MACH, this is now all automated.
This is one of many examples of improved efficiencies outside UX and SEO. But, once again, shining light on the power of MACH/Headless architecture approaches.
Final takeaway
Gymshark’s leap from a monolithic system to a MACH-driven approach is nothing short of transformative.
The results? Enhanced user experience, a spike in SERP visibility, and a significant boost in revenue.
Their smart, phased rollout is worth looking into for any brand aiming to minimize risks. Plus, by embracing a headless content platform in Contentful, they’ve streamlined content across all their platforms, an ace move for efficiency.
MACH principles can revolutionize your online presence, headless systems offer flexibility, and strategic rollouts minimize potential pitfalls. In the world of e-commerce and SEO, Gymshark’s case study is a playbook for success.
