How to optimize your GatsbyJS Website to crush the LightHouse Google Report

I created a website for one of my clients as a freelance and they are a traveling agency located in South America, the website was created using GatsbyJS as the front end and Strapi as the Backend, were the content manager is going to be able to handle all the content of the Website dynamically.

On this Tutorial I want to explain how to have a very high score on the Lighthouse report, this is going to help your website to rank much better and have a very high performance value, and users are going to have a great experience on your website.

How to handle images and lazy Loading with Gatsby?

You will need to use these plugins (gatsby-plugin-sharp, gatsby-transformer-sharp, gatsby-plugin-image).

This last plugin called gatsby-plugin-image it's very essential to handle lazy loading since you can specify which kind of lazy loading placeholder you want. Also images are going to render as a webp which google recommends having to improve your image performance. Here is an example how the image are going to render.

Also, I want to explain how to use the plugin. as the Gatsby documentation states "if you are using an image that will be the same each time the component is used, such as a logo or front page hero image, you can use the StaticImage component. The image can be a local file in your project or an image hosted on a remote server. Any remote images are downloaded and resized at build time." Here's an example.

        <StaticImage
          src="../images/Background-pic.jpg"
          className="hero-style"
          alt="omega homepage background picture"
          layout="fullWidth"
          placeholder="tracedSVG"
        />

But if you are using Dynamic images you will need to use GatsbyImage.

First, Add the image to your page query.

Then, Configure your image using childImageSharp

Finally, Display the image. Here's an example.

export const query = graphql`
  query getSingleDestino($titulo: String) {
    strapiDestinos(titulo: { eq: $titulo }) {
      descripcion
      imagen {
        localFile {
          childImageSharp {
            gatsbyImageData(placeholder: TRACED_SVG, layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`;

const DestinosTemplate = ({ pageContext: { titulo }, data }) => {
  return (
    <>
      <GatsbySeo
        title={`Destino ${titulo}`}
        description={`Destino de Viaje ${titulo} con los mejores precios`}
        canonical={`https://omega-agencia.netlify.app/destinos/${titulo}`}
      <section>
        <div>
          <div className="destinos-single-page-title">
            <Title title={titulo} />
          </div>
          <div className="destinos-single-page-align">
            <div className="destinos-single-page-description">
              <div
                className="destinos-description"
                dangerouslySetInnerHTML={{
                  __html: data.strapiDestinos.descripcion,
                }}
              ></div>
            </div>
            <div className="destinos-single-page-image">
              <GatsbyImage
                image={getImage(data?.strapiDestinos.imagen.localFile)}
                alt={titulo}
                className="destinos-single-page-image-description"
                formats={["AUTO", "WEBP", "AVIF"]}
                fadeIn="false"
              />
            </div>
          </div>
          <CTAComponent />
          <ContactForm />
        </div>
      </section>
    </>
  );
};

One last thing to mention about optimizing images is that Google request that all the images have a width and height specify for each image, if not that would hurt your lighthouse performance score.

Finally, Please don't forget to always add an alternative text to each image that you have if you don't it could hurt your lighthouse score report and you SEO significantly.

How to minimize bundle size and page loading speed?

Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT) are 3 performance metrics that google takes into account when scoring a site performance, it is very important to score very well on these 3 to have a high score.

Total Blocking Time (TBT) is defined as the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI).

TBT is a measurement of how long the browser's main thread is blocked by long tasks, such as parsing JavaScript (JS).

To improve it there's a great solution to the JS execution time and the bundle size of your dependencies and that is called Preact.

Preact is a small (3kb), fast alternative to React. And thanks to gatsby-plugin-preact, switching your Gatsby-site from running on React to Preact is incredibly easy.

You just need to run the following command and you will be set to go after listing the 'gatsby-plugin-preact' under you plugin list on the gatsby-config.js

npm install --save gatsby-plugin-preact preact preact-render-to-string

If you want to check a dependency size before you install it to your project, this site (bundlephobia) it's a great tool to compare dependencies, find out the size of any dependency and find similar dependencies that weigh less to the ones that you want to install.

How to minimize the size Material UI, TailwindCSS, Boostrap5?
These are very big libraries and they could hurt your loading time since they are very big, the solution to minimize the size is using PurgeCSS to remove any unused classes.

Here's the website if you want to have a look, the content it's not finalize yet :) and the agency is buying a new domain at the moment of this article

https://omega-agencia.netlify.app/

I hope you will find this tutorial helpful, if you have any questions or you need any help please comment or send me a DM through Linkedin or Github.

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/