How can GatsbyJS speed up your application?

“The Great Gatsby”

So what in fact is this mythical GatsbyJS? As we can read on their official site, it is a free and open-source framework based on React, but it is worth mentioning that under the hood, it is largely using GraphQL software. Its biggest goal is to help build extremely fast web applications and sites. But what makes an app created with GatsbyJS so fast and special? This is influenced by the fact that Gatsby is actually a static site generator! Sounds intriguing?

Source: www.gatsbyjs.org/blog

Wait… a static site?

Yeah, that’s right, a site created and shipped to users with static HTML, CSS, and some JavaScript code! It makes it super fast to load, cause such sites are not rendered on the client-side during runtime (by JavaScript), and there is also no server-side code, to execute in order to serve your web application. So Gatsby isn’t like Next.js (or Nuxt.js) - there is no render after request, all is done during the build process on your machine. It is important to mention that static sites don't mean not interactive or not dynamic elements. Our interactive components, like buttons, forms, powered by JS are still working because our HTML structure is later rehydrated with React executable code. Awesome isn’t it?

But what about API calls to fetch data, like blog posts, products list to your eCommerce shop, from external servers or databases? As GatsbyJS is, in fact, a static site generator, it fetches this data during the build process carried out on your local machine, and later on, it creates corresponding site content. That can be a disadvantage in some cases, because every time you update your database, there is a need to run the build process again. In this scenario, it is good to think about some continuous deployment tool.

On the diagram below, you can observe how Gatsby works:

Gatsby workflow, source: www.gatsbyjs.org

But why?

If you still don't know why then it's all about performance! Static sites are going to be much faster than many other web solutions out there. Compared to optimized sites created using WordPress (most popular CMS), GatsbyJS will be better anyway.

Looking for solutions to boost the performance of your app? Check our extensive guide with best practices!

It is really hard to beat static served content in terms of its performance. In addition, the fact that when a user enters the page, no more data is fetched, make it even faster! This approach will also improve SEO score, because the site will be ‘visible’ much quicker during the first visit.

Load content even smoother!

Prefetch on scroll and hover

Most people dislike apps that take too long to load or are unresponsive while using. That's why Gatsby puts immense effort into fixing that problem. During build time, your code and data are split into smaller portions. On the first visit, users load only the most critical elements - to make sure that your site is rendered correctly. Once everything is visible and the user starts interaction on the page, Gatsby by default prefetches data for other pages available on site, so clicking around and navigating between pages feels incredibly smooth.

Remember that the application created with Gatsby is still a single page application (SPA). It means that after a routing event on your site (fired for example, after clicking on a link), there is no need to fetch the whole site from the server once again - this saves a lot of transferred data.

Optimized images

Let's look at one of the many plugins that you can use with Gatsby - gatsby-image. As you can guess, we will use that component to place an image content on our site. But why is it so special? Let me tell you, by using this component you will get all of the following:

• responsive, optimized images matching your screen size,
• mage blurred by a base64 encoding (low resolution) is loaded by default,
• an integrated IntersectionObserver that swaps the base image for proper image, when the image is visible.

So in fact, what does it mean to app performance? In brief:

• by media queries, a user will get the smallest image that fit his device,
• heavier pictures are requested only when there are visible,
• a blurred image holds required size - jumping content, or shifting elements is eliminated!

Knowing that, let me show you how it looks under the hood:

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Image from "gatsby-image"

export default const MyGreatGatsbyImage = () => {
 const data = useStaticQuery(graphql`
   file(relativePath: { eq: "hello-merix.png" }) {
     childImageSharp {
       fluid(maxWidth: 1800) {
         ...GatsbyImageSharpFluid
       }
     }
   }
 `)

 return <Image fluid={data.file.childImageSharp.fluid} />
}

‍

‍This React component with GraphQL query to fetch images, after build process will be converted into HTML similar to this:

‍

‍<div class="gatsby-image-wrapper" style="position:fixed;overflow:hidden">
 <!-- This div will hold required size -->
 <!-- No more jumping content while loading -->
 <div style="width:100%;padding-bottom:150.58%"></div>
 <img src="data:image/jpeg;base64,base64-image-here" style="background-color: rgb(251, 250, 252); position: absolute; top: 0px; bottom: 0px; opacity: 0; transition-delay: 0.35s; right: 0px; left: 0px;"></div>
 <!-- This picture is added when content is visible -->
 <picture>
   <!-- Media queries for propper size -->
   <!-- Smaller size = lighter image -->
   <source srcset="/static/bf21a/hello-merix.png 400w,
     /static/6gd3e/hello-merix.png 800w,
     /static/7be34/hello-merix.png 1200w,
     /static/def46/hello-merix.png 1600w,
     /static/kl4ab/hello-merix.png 2400w" sizes="(max-width: 1000px) 100vw, 850px">
   <img alt="" src="/static/n84d8/hello-merix.png" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 0.5s ease 0s;">
 </picture>
</div>

‍

Faster development process

As I said, GatsbyJS uses ReactJS for generating views, and this a good news for many developers all around the world considering the popularity of this library. It is also worth mentioning that GraphQL has a significant share during the development process. So will your employees or colleagues, not be satisfied with the use of the latest technologies? Oh, they will be! Especially considering that there will be no need to take the time to study new frameworks!

It is really similar to using plain React probably because Webpack configuration in React has been done by the core team developing Gatsby. So everything is setup and ready to go. Now you can focus on writing more code!

You don’t have any idea what your new layout should look like? Or maybe you are looking for some top-notch template for your blog? GatsbyJS is for you! It has a starter library to document all starters templates you can use!

PWA support

With Gatsby you can create Progressive Web Applications which, by definition, are to work extremely fast. This approach to creating modern web apps became standard. So you can turn the Gatsby app to be PWA simply by adding two plugins provided by their team. Easy right?

Just test it!

If you don’t believe that sites created with Gatsby are so fast, just run a simple audit held by Lighthouse - a built-in Chrome solution, accessible via the “Audits” tab in Developer Tools.

Lighthouse score may sometimes vary between runs. Results may be different depending on what type of computer is used to run the audit. But when you reach your score in the range of 90-100 - you may be sure that your site has performance on the highest possible level.

Looking for more noteworthy modern JavaScript frameworks and libraries? Check:

• Preact
• Svelte
• Sapper

‍

Should I choose GatsbyJS for my next project?

It really depends on your needs. If you are a React developer, who has never tried this tool before, you should definitely give it a try - maybe consider doing your portfolio project using Gatsby. If you are a business owner, who wants to create, for example, an eCommerce site using this particular tool, it might be overwhelming in the future to re-deploy your site every time a new product appears in your e-shop. But on the other hand, this approach will be much more secure. When a hacker breaks into a server, he will only be able to see static files served by Gatsby. No database, order information or credit cards credentials!

So GatsbyJS will be great for developing, for example, product sites or landing pages, for which we need to provide fast loading and good SEO results. These two things can raise your conversion rate, and help you gain more new customers!

Like what our JS developers do? Check our expertise in JavaScript development.