Category: Technology

Gatsby is an extremely powerful tool for quickly creating complex websites. It allows us to pull data from any source, provides access to a rich ecosystem (both of Gatsby-specific plugins and the broader React ecosystem), and even does things that feel magical, like auto-optimizing images.

In this article we’ll cover different attributes of Gatsby and how those features help in speeding up the application. And before that let’s take a closer look at GatsbyJS, a framework that has captured the hearts of many React developers worldwide!

Blending Static Websites with Dynamic Apps

In addition to using React, Gatsby is also a static site generator. If your website has multiple pages, it creates HTML files for each page.

Node.js will mount the React application to create HTML files with the rendered content for each route. Gatsby’s core is this.

“Gatsby pre-builds pages instead of waiting for them to be requested.“

-Gatsbyjs.com

In order to understand why this is important for performance, let’s go back to the basics.

An HTML file is accessed by an HTML browser, which renders its contents. Using an anchor tag, without any cache or JavaScript, will load another HTML file when clicked, even without any cache or JavaScript.Consequently, the user may have to wait or, in the worst case scenario, see a blank page while the page is being rendered.

Until Single Page Applications (SPAs) came along, this was the most common way to design a website.

JavaScript is used to render the page. This allows you to update much more quickly than if you had to download static files. As the user interacts, they update a single HTML file.

As the view layer of an SPA, React is used. JavaScript code is required for such frameworks and libraries as React. This means that the Critical Rendering Path is significantly affected when these are built as SPAs.

Critical Rendering Path stalls the render while loading and executing JavaScript.

Source: Guillermo.at

What about API calls to fetch data from external servers or databases, such as blog posts or product lists for your eCommerce shop? After the build process is complete, GatsbyJS creates the corresponding site content. Every time you update your database, you have to run the build process again. A continuous deployment tool would be useful in this scenario.

You can see how Gatsby deploy and build website in the diagram below:

Below are the ways how Gatsby JS speeds up your web application.

Image Optimization

Image optimization can be one of the most effective ways to improve a website’s performance.

Less bytes to download means less bandwidth required, allowing the browser to download and render content more quickly. Some of the optimizations we can make are as follows:

• Resize it to take up the same amount of space.
• Create responsive images with varying resolutions for desktop and mobile devices.
• Compression and metadata removal.
• Lazy loading can be used to speed up the initial page load.
• While the image is loading, show a placeholder.

This can take a lot of effort and Gatsby has a solution: this whole process can be automated.

Gatsbyjs-image, like many other Gatsby tools, is powered by GraphQL. This plugin prepares images in various resolutions for download. It generates thumbnails and compresses them. This is all on the construction step.

You will receive all of the following benefits by using this component:

• Images that are responsive and optimized for your screen size,
• By default, an image blurred by base64 encoding (low resolution) is loaded.
• When the image is visible, an integrated IntersectionObserver swaps the base image for the proper image.

When the image loads, a “blur-up” technique shows a preview in a very low-quality image that is already in the HTML file (or just the background). To create the automated optimization, all of the work in coding GraphQL queries is reduced. Check out this example:

So, what does this mean for app performance? In summary:

• Using media queries, a user will receive the smallest image that is compatible with his device,
• Heavier images are requested only when they are visible,
• A blurred image retains the required size,
• Jumping content or shifting elements are avoided.

Prefetch on scroll and hover

The majority of people dislike apps that take too long to load or are unresponsive while in use. That is why Gatsby expends so much effort in resolving the issue. During the build process, your code and data are divided into smaller chunks. Users load only the most important elements on the first visit to ensure that your site is rendered correctly. Once everything is visible and the user begins interacting with the page, Gatsby by default prefetches data for other pages on the site, making clicking around and navigating between pages incredibly smooth.

Remember that the Gatsby application is still a single page application (SPA). It means that after a routing event on your site (for example, after clicking on a link), there is no need to retrieve the entire site from the server again, which saves a significant amount of transferred data.

Best of Both Worlds

Gatsby gives us the best of both worlds by generating HTML statically and letting React do whatever it needs to do on the client side.

Statically rendered pages improve SEO, TTI, and overall web performance, among other benefits. Static sites are easier to deploy and have a wider global distribution.

Conclusion

This does not mean that there will be no issues with the build version if the code runs successfully in development mode (Gatsby develop). Build the code regularly and fix issues. Builds are generated after every change, and the build time is only a few minutes. A build might be more difficult to create if there are frequent changes and multiple issues need to be resolved at the time of the build.

Sites with many styled components and libraries take longer to build. As a result, it is no longer feasible to run the build after every change, making it difficult to track down build problems.

About Galaxy Weblinks

We specialize in delivering end-to-end software design & development services and have hands-on experience with popular front-end and back-end frameworks. Our back-end and front-end engineers also help in improving security, reliability, and features to make sure your business application scales and remains secure.