Gataby-Wordpress

WordPress is the most popular CMS / platform in the world with and powers nearly one third of the internet. The problem with WordPress is the load and rendering time of the website. In this article I will cover how to increase your website scores on Google Insight to nearly 100%. Many of the core plugins to create an informational WordPress website such as ACF (Advanced Custom Fields) and Gravity Forms are already supported within Gatsby.js / React. As you are in the planning stages of your website, you will want to understand what plugins are available.

What is Gatsby.js

Gatsby, or GatsbyJS, is a static site generator built with ReactJS and powered by GraphQL that will help; with the development of lighting fast websites and web applications. Gatsby is a free and open source framework that can be modified as needed.  Gatsby loads only the necessary CSS, HTML and JavaScript to allow your website to load faster. After your website is loaded Gatsby calls upon any additional resources that are needed.

Why Use Gatsby.js

The reason to use Gatsby.js is to increase the loading time of your website. According to a study by Critical Case “just a second more in the page load time produces a loss of 11% of page views, 16% of customers satisfaction and, the most important number, a loss of 7% in the conversion rate.” In addition, Google has sent many indicators on the relationship between website load speed and how it will organically rank a website. 

To demonstrate the increase in speed we took the website DesignByPatrick that I would say has been minimally optimized hosted and on WPEngine.com (which I consider one of the better WordPress hosting solutions) and compared it with a Gatsby.js / WordPress instance. You can see the results below.

Standard WordPress Mobile Google Insights Score
Standard WordPress Desktop Google Insights Score
Gatsby WordPress Mobile Google Insights Score
Gatsby WordPress Desktop Google Insights Score

Understanding How WordPress and Gatsby.js Work Together

The Gatsby.js framework which is based on React uses the REST API provided from WordPress as an interface to access the WordPress data from outside the WordPress framework.  The WordPress REST API is already included in every WordPress version from 4.7 onward.

Understanding the Limitations of a Gatsby.js / WordPress Website

A Gatsby.js / WordPress solution will not be a good fit for every website. A key factor will be the functionality of the website.  In many cases this limits you to a more informational website. Shopping carts or websites with extended functionality could need React.js plugins that are not available. This should be determined in the planning phase of the website.

Hosting a Gatsby.js / WordPress Website

A WordPress site that is using Gatsby.js can be hosted on any Linux server. Keep in mind that if you are using a standard host like WPEngine the Gatsby.js instance is hosted separately. The key is to make sure your WordPress instance is publicly accessible in order to be able to pull the data.

Finding Recourses to Lean How to Implement a Gatsby.js / WordPress Website

There are a few great resources I found to be able to get your WordPress website up and running under the Gatsby.js framework.  One of the better ones in my opinion is provided by the gatsbyjs.org website. This covers the step by steps of what is needed to complete your project. For those that are more audio / visual and prefer I would recommend the Udemy course by Thomas Weibenfalk. This course covers all areas to be able to fully understand a Gatsby.js / WordPress installation.

Visit Us
Follow Me
Tweet
Skype