Headless CMS: Jamstack for website speed

A client's website, makeupdesignory.it, was a Word Press website with very poor performance. The user landing on the home page with an average mobile device on a 4G connection would see something appear on the page only after about 7 seconds (start render) of looking at a white blank page, and see any useful content only after waiting another full 20 seconds! (LCP).

Much of the problems were caused by Word Press inherent prior performance combined with a poor hosting, causing a very high TTFB (Time to first byte). 

Additionally there were other issues related to how the code of the theme was written  with poor optimization of how resources such as Java script, Images and CSS were loaded by the browsers.

This caused in turn that the important content, such as the images and text that should have been immediately visible to the user, were loaded very late.

Being the audience for this website composed by of 70% by mobile users, it became evident that performance was a key factor not only to increase ranking on organic search since core Web Vitals are a ranking factor, but very importantly to improve user experience.

This in turn would reduce bounce rate and improve conversions.

Headless CMS Jamstack: how does it work

We took up the project of redesigning the website  using a Jamstack architecture.

CMS such as Wordpress, Drupal, Magento have been around for a long time now and they are great. However these architectures notoriously suffer from a few issues such as poor website performance (slow websites) and security risks.

Websites constructed with the Jamstack framework segregate the code (JavaScript) from both the infrastructure (APIs) and the content (JavaScript) (Markup) making it easier to scale.

Generally Jamstack web architectures offer these advantages:

• Speed: the pages are pre-rendered so that the server does not have to generate a page when a page is requested.
• Security: since there is a separation between frontend and backend, Jamstack is inherently much more secure than traditional monolithic CMSs.
• Scalability: since with Jamstack the server only delivers static assets, it overcomes the limits of traditional CMSs.
• Simplified content management: using a headless CMS such as Storyblok makes it easier for the team to manage and update site content.
• Improved SEO performance: Improved site performance can positively influence search engine rankings.
• Flexibility and adaptability: The separation of components makes the site more flexible and adaptable to different needs and emerging technologies.

For this project our developers have chosen Gatsby as headless CMS supported by storyblok for the management of the contents.

This ensured a solid framework for the backend combined with content management easy for the customer to manage, and for which we have provided training.

Web Performance Optimization

Before launch and during the first 2-3 weeks of the new website going live we took the time to test, diagnose and implement strategies to maximise the performance for a site which was already much faster to load. 

The final result under the same testing conditions was a LCP for only 2.4 seconds!

The filmstrip below we can see how effectively the user would have to wait nearly 30 seconds to see anything useful on the home page.

Thanks to a good front page design it also resulted in a much more virtually stable content leading to a CLS of only 0.03, well below the maximum allowed by google to pass the Core Web Vitals Test of 0.1.

Here is the difference with the website before the migration.

Core Web Vitals

Immediately after the go live of the website the Core Web Vitals report on Google Search Console showed improvements.

Further optimizations brought even better results in April.  Core Web Vitals are a ranking factor which can become crucial in highly competitive markets. It can make the difference between dominating the top position in organic searches.

Bounce Rate

While other factors like a new more user friendly design and site navigation might have had an impact on the bounce rate, we are confident that a contribution to the drop from over 40% to about 20% bounce rate can be attributed to the improved user experience.

‍

This shows a greater user engagement which can lead to an increased conversion rate as shown in many independent case studies.