Knowledge Hub
The importance of having a fast-loading website need not be explained. A highly performant website influences user experience, increases user retention rate, causes a bump in SEO rankings, and helps your business achieve marketing goals. Adopting the Jamstack architecture as the way of building your website is an easy way to reap the benefits of the highly performant website mentioned above.
In general, there are a couple of things you can do that can help your website load fast and stay fast after loading. Reduce the weight of pages of the website. Reduce the number of requests the website makes for external resources. But also, control how and when the website makes those requests.
Let’s say you are using Gatsby. Wonder what you can do to reduce page weight and increase your website’s performance?
I’m glad you asked 😬
Page weight is the total size of a web page. Page size is composed of the sizes of the HTML document, CSS, images, scripts, assets, and other media like videos. The bigger the size of these files, the heavier the page is.
Page weight influences the time it takes for a page to load. However, not all parts of the page influence performance the same ie 1MB of JS is not the same as 1MB of images for the performance. In general, the heavier the page, the longer it would take for the page to load. The converse is also true.
To increase the performance of your page, it is essential to reduce the size of the files used by the page to reduce the weight of the pages (again, keep in mind different files have a different impact on the performance).
In Gatsby, universe plugins are essential tools built to help you reduce and analyze the weight of pages of your website.
Gatsby plugins are Node.js packages that implement Gatsby APIs to add additional functionality to a Gatsby website. In this post, I’m gonna focus on the ones that can help you reduce page weight, handle certain network requests, and the ones that can help understand what is inside the bundle and what can be managed or removed.
Now that we got that out of our way let’s take a look at the plugins we here at Bejamas like to use. Remember, to make them work, each plugin in this list needs to be installed and added to the list of plugins in `gatsby-config.js`.
Preact is a front-end library for building user interfaces. The total size of Preact and PreactDOM gzipped and minified is 7.7kb. This is much less than the size of React and ReactDOM which is 38.8kb (gzipped and minified). Basically, using Preact in the stead of React can save you some 30kb in bundle size. This means that a website built with Preact and PreactDOM would have a smaller page weight than a website built with React and ReactDOM. Hence, the former would tend to load faster than the latter.
The size of Preact is not the only thing that contributes to the high-performance sites built with Preact. Preact also has one of the fastest virtual DOM.
You can replace React and ReactDOM with Preact and PreactDOM in your Gatsby website by installing `gatsby-plugin-preact` and adding it to the list of plugins in `gatsby-config.js`. Make sure everything works as expected after including the plugin in your Gatsby website.
SVGR is a library that enables you to import SVGs as React components. Apart from making integration and reusability of SVGs easy in React, SVGR uses SVGO to optimize SVGs. This optimization includes removing useless information and redundant metadata often found in SVG files, which in turn save some bytes.
`webpack-bundle-analyzer` is a plugin for webpack that creates an interactive zoomable treemap that visualizes the contents of the bundle. This treemap helps you to know, among other things, the sizes of the modules that make up the size of the bundle. The information this plugin provides you with can help you find ways to optimize your site.
By default, when the browser is constructing the render tree (DOM and CSSOM), requests for webfonts are delayed until critical resources have been requested (in this case in CSS). This may lead to the situation where text rendering is delayed until the particular webfont has been requested.
One way to prevent delayed text rendering issues is to preload fonts by adding `rel=”preload”` attribute the link tag which points to the webfont.
Installing `gatsby-plugin-preload-fonts` and adding it to your `gatsby-config.js` will automatically preload all necessary webfonts for you.
Loading external fonts with just the link tag is a render-blocking process. This process reduces page speed. One of the techniques to prevent this is to load the fonts asynchronously. The Web Font Loader library developed by Google and Typekit does just that.
The library asynchronously loads specified fonts in its configuration and gives you events to control the font loading experience.
In your website, you might need to connect to an external source and retrieve content from there. When the HTTP request is sent to the server of the external source, TCP handshakes, TLS negotiations, and DNS lookup can cause latency. This, of course, can affect the performance of your website.
To prevent this, you can add `rel=”preconnect”` to the link tag which points to the source. By adding this attribute to the link tag, it will send a hint to the browser that you intend to retrieve some of the page content from the specified source. Browser will establish an early connection to the source before the request for the resource is actually made.
This reduces latency from round-trips which may be caused by TCP handshakes, TLS negotiations, and DNS lookups which can save some time and increase the performance of the website.
`gatsby-plugin-preconnect` does this for you. Keep in mind that the plugin requires you to specify the domains you want to `preconnect` in the options in ‘gatsby-config.js’. Check out the homepage of the plugin to find out how to configure the plugin properly and the various optional settings that are at your disposal.
The poor network connection can increase the time it takes for a website to load and provide the first paint of page content. One way to solve this problem is to enable the website to work offline so that when the user network is disrupted, the website can still work as it should.
The solution to this problem is to cache the assets of the website using Service Workers and make them available when the users’ device has a poor network connection or is offline.
`gatsby-plugin-offline` is a plugin built to handle the implementation of Service Workers in Gatsby built websites.
When building a website, you might choose to use a CSS framework like Bulma, Tailwind or Bootstrap to enhance the styling of your website. More often than not, a greater part of these libraries are unused. Even so, these would contribute to the total weight of the page and increase page load times.
The solution is to get rid of all unused CSS on the page. This is where PurgeCSS becomes useful. PurgeCSS is a tool that analyzes your content and removes all unused CSS in the content.
`gatsby-plugin-purgecss` brings the power of PurgeCSS to your Gatsby website. Check out the homepage with a detailed guide on how to use the plugin before you start working with it.
Guess.js is a library that brings the power of machine learning and analytics to enhance the user experience of a site. The library uses downloaded data from Google Analytics to create models based on which the library can predict, among other things, the page(s) that a user is likely to visit next and prefetch that page(s).
The technique is called predictive prefetching and it helps you enhance the user experience and website performance at the same time.
The main goal for all of us has always been to deliver the best possible user experience to the audience of our websites. The tools and metrics we used to help us in that effort differed a lot. With a goal to provide web developers and website owners with a unified set of metrics for building websites with user experience and performance in mind at the beginning of May Google announced Web Vitals.
With this in mind, we made a plugin that sends Web Vitals metrics to Google Analytics with the main purpose to track the real performance of real users.
By no means this is an exhaustive list. It is rather a list of Gatsby plugins we’ve used in many of our projects so far. In case you have a plugin we should check or a better one than the ones we mentioned we’d love to hear from you. Head over to our Ask Bejamas page.
Thinking of utilizing Gatsby for a better user experience and performance of your website? No worries. We can help!
CLICK HERE to schedule a 1-on-1 talk and learn more about what we can do for you and your business.