The ideal setup for performance: Gatsby with Drupal 9

The ideal setup for performance: Gatsby with Drupal 9

The ideal setup for performance: Gatsby with Drupal 9

 

A slow website means a bad user experience, a high bounce rate, and SEO penalties

Slow loading times can be caused by several factors, including poorly written code, outdated technology, large image files, too many external scripts, and poor hosting services. 

When your site is slow, especially the mobile version, Google factors that in and could penalize your site's quality score which will have a negative impact on SEO.  Not to mention bounce rates and overall user experience.  

 

What is Gatsby?

Gatsby (gatsbyjs.com) is a front-end tool built on React.  It enables static site pages to be generated with light blazing load times.  It is built with performance in mind and right out of the box developers can get perfect Lighthouse scores.  

 

What is so important about Lighthouse Scores?

Lighthouse is an open-source tool built by Google that audits your page performance.  It gives a score for speed, accessibility, progressive web apps, SEO and more.  The tool is important for understanding what improvements should be made in Google's eyes.  Getting near perfect scores across the board will improve user experience, bounce rates, and SEO.  

 

Why Drupal 9?

Drupal 9 is the latest and most secure backend from Drupal.  It is built with Symfony and Twig.  From a developers stand point, this is the gold standard for web development.  It is much more secure and powerful than WordPress or any other major CMS on the market.  It is also easy to use for non-technical content creators. 

Moving from Drupal 7 or 8 to Drupal 9 should be on every companies to-do list this year or next.  Especially considering that Drupal 7 & 8 are reaching end-of-life on November 2nd, 2021.

 

What is a headless CMS or decoupled CMS?

A headless CMS, or decoupled CMS, is a system built with a back-end separated from the presentation front-end.  The content is still managed from a back-end CMS such as Drupal, WordPress, etc, but the CMS does not control the presentation layer.  The content is delivered via an API (Drupal 9 has this built in) and the presentation of the site page is done with a more advanced static site generator such as Gatsby.  

To put it simply, it is taking the best of a back-end system and the best of a front-end system and combining them.  

 

Do you have to use Drupal 9?

No but Drupal 9 is built with an API which makes decoupling simpler.  WordPress can be used as a headless CMS but would be more difficult to use as a decoupled CMS.  Decoupled CMS systems are more powerful because you can have one location for content that can be pushed anywhere.  You could use a decoupled CMS such as Drupal 9 to contain all of your content then use the built in API to push that content to your site, app, software, IOT devices, etc.  

For a simple site though, WordPress as a headless CMS will work fine.  You will get the performance benefits just the same as if it was built with Drupal 9 so if you are used to WordPress do not let this stop you from going to a headless CMS with WordPress.

 

Why is this setup gaining traction?

This setup is gaining traction because of performance.  Lighthouse scores becoming more well known are driving business's to start asking why their sites scores are suffering.  The answer inevitably comes down to using a CMS system that was not built for getting perfect Lighthouse scores.  

 

Who would benefit most from this setup?

Any company that values lower bounce rates, better user experience, and improvements regarding SEO will benefit from this setup.  

 

What about downsides?

The only downside is that content authors are not able to preview how the created content will look from inside the CMS.  A solution to this problem is to have a staging site setup so that changes can be made first on the staging site, reviewed and tested, then made live.

 

Want to talk more about improving your company site's performance?

Book A Free Consultation →