[Post updated: February 2023]
If you’re building the website the chances are you’re considering using a platform like WordPress, Drupal, or Shopify (this website uses WordPress). But in some cases, more flexibility and customisation are required than what is offered by these platforms, and this is where you may consider building a website with React.
React is component-based, meaning that developers can easily break down the project into small reusable components, making changes easier to implement. And, since React uses JavaScript for development, it is able to provide faster page loading speeds and improved site performance.
This is where Gatsby comes in. It’s an open-source static site generator that can help you create a fast, secure, and modern website. It takes React components and turns them into optimized HTML code with automatic routing – resulting in a page speed increase of up to 69%. Gatsby’s wide range of plugins and features also provide more control over web development.
So, with the tech decision made for the build, let’s get into SEO performace.
Back to SEO basics – how Google ranks website performance
To ensure that Google ranks a website favourably, it’s important to structure and format the content in a way that bots can understand. These bots traverse the website and analyse each page, creating an index of all the webpages for the search engine. This index is then used to determine how likely it is for someone searching relevant terms to find the website when running a query. In order to achieve this, it is essential to create content that can easily be understood by automated processes, so that websites can reach their maximum potential on Google’s search engine.
Server-side rendering
React websites render the website client-side, which means that the Google bot gets HTML files with little content. Then the JavaScript code downloads the content from the server, and the users can engage with the website. When it comes to SEO, this is an issue. As the Google bots are not able to get all the relevant information to index the website correctly and rank it high.
Indexing issues with React websites
Google bots have no problems understanding HTML pages. The bot downloads the HTML file and extracts the links and information from the code, indexing the page and ranking the website based on the information provided. With JavaScript web pages, the same process becomes more complicated. The bot downloads the HTML, CSS and JavaScript files. Then it has to render, compile and execute all the JavaScript code. After the information is assembled, the website is processed and indexed. Websites utilising JavaScript are significantly slower for this reason.
Gatsby
Gatsby is a static site generator, building the website on the server. Gatsby generates static HTML, making the content available as HTML and improving SEO with no long initial load time. Blitzm has used this strategy to improve website performance, and by merging from React js to Gatsby Blitzm improved the performance of one of the websites we built from 27% to 96%.
Is Gatsby the right solution for you?
The modern site generator design of Gatsby has its benefits too, as it comes with an active community as well as plugins that simplify the development process while adding exciting new features.
However, building websites using Gatsby is not without drawbacks. As the content on the website grows so too does the build time which can increase both development times and deployment times. For more dynamic websites, other technologies such as Next.Js may prove more suitable than Gatsby. Landing pages, blogs, and portfolios however are generally well served by Gatsby due to the fewer dynamic activities needed.
At Blitzm, we have extensive experience building websites, web portals, and business systems – our consultants can discuss your requirements and recommend the most appropriate technology for you.
