Optimizing your website with Gatsby plugins

Gatsby is a modern static-site generator to create stunning and blazing-fast, secure, and powerful websites using a React-based framework. Gatsby is built to help improve your website speed and performance. High-performance websites have a big impact on user experience, and this can affect SEO rankings and search results and increase user conversion rates.

With the Gatsby version, 3.0 things got even better with optimized loading, prefetching, responsive images, and accessible routing. Other than the Gatsby itself, Gatsby has plugins that also help increase the performance of your pages. In this post, we will discuss Gatsby's plugins.

What are Gatsby plugins?

Gatsby plugins are Node.js packages that implement Gatsby APIs. Plugins are meant to add additional functionality and features to the Gatsby website and Gatsby plugins simply install into your Gatsby config file. In this post, we are going to focus on the ones that can help optimize a website.

gatsby-plugin-preact

Preact is a JavaScript library that describes itself as a fast 3kb alternative to React with the same ES6 API which prioritizes code weight and initial load times. This means less JavaScript to download. It's perfect for Gatsby websites that don't need React's extensive which hurts website performance.

gatsby-plugin-image

Images account for a large portion of a website's load time. Gatsby-plugin-image is a completely optimized image loading for your website. For example, it automatically generates a responsive, lazy-loading, and non-render blocking image.

gatsby-plugin-web-font-loader

Gatsby-plugin-web-font-loader loads external webfonts asynchronously. This reduces page speeds. You can load popular fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.

gatsby-plugin-preload-fonts

When the browser is rendering a DOM tree, requests for webfonts are delayed until critical resources have been requested so that the CSS file (in this case) has the highest possible download priority. That means that the browser will stop the initial page render until this CSS file has finished downloading. 

The solution is to preload all necessary fonts per route to decrease time meaningful.

gatsby-plugin-offline

When you do not have a network connection, you can still open the website. You can do this by persisting loads the service worker into the client. For example, fully interactive site offline, periodic background syncing, and even push notifications.

gatsby-plugin-manifest 

The web app manifest provides information about web apps to the browser and even allows users to install PWAs directly onto their devices. You always see a website that has an icon on a browser tap. The manifest provides configuration and icons to the phone.

gatsby-plugin-advanced-sitemap

Gatsby sitemap plugin automatically generates advanced, XSL sitemaps for your site that are both human and machine readable. 

gatsby-plugin-robots-txt

Robots.txt is a text file with instructions for search engine crawlers. It defines which areas of a website crawlers are allowed to search. Ensure your site is crawlable by search engines and has a valid robots.txt file, by including the gatsby-plugin-robots-txt plugin.

gatsby-plugin-react-helmet

Metadata is used by browsers, search engine optimization (SEO), and other web services. 

React Helmet lets you add attributes to the component. For example, title, meta attributes, etc. This will get added to the static HTML pages Gatsby builds.

Conclusion

These are Gatsby plugins that I use for my projects to help my clients optimize their website performance. Considering about maximize your website performance with Gatsby, let's talk to me. I am excited about your project and I am here to help you.