Improving a static site's performance
Tags: gatsby, graphql, performance, lighthouse
Published: 2020-04-19 08:41:04

---
title: Improving a static site's performance
published: true
description: Porting an HTML site to Gatsby in order to improve the site's speed and performance.
tags: gatsby, graphql, performance, Lighthouse
---
## Introduction
I have a very [simple one-page portfolio site](https://audreyhayes.dev/) that I built a couple of years ago when I was just starting to learn to code. I wanted to see if I could speed up the site's load time without losing too much of the site's simplicity (written in pure HTML & CSS).

## Measuring the problem
I already know from simply visiting the site that the lack of minification, unoptimised images and unnecessary requests to third-party resources via inline script tags and stylesheets are major issues causing the site to load far too slowly.

But I still wanted some measured data to back up my own user experience on the site. So I audited the site using Google Chrome's *Lighthouse* report.

![Lighthouse Audit report results](https://dev-to-uploads.s3.amazonaws.com/i/kaan9hbutzgj4w62lb8a.png)

Ouch! I don't know if I've ever seen a performance score that low. The site definitely needs a facelift :grimacing:.

## Improving the site
I decided to port the site over to [Gatsby](https://www.gatsbyjs.org/) so I could leverage all the image processing power that it offers. By writing one GraphQL query, I was able to use `sharp` to control the image sizes and render them fluidly directly from the local file system. 

```
export const useBackground = () => {
    const result = useStaticQuery<BackgroundQuery>(graphql`
        query background {
            allFile(filter: { extension: { eq: "jpg" } }) {
                edges {
                    node {
                        base
                        childImageSharp {
                            fluid(fit: CONTAIN) {
                                aspectRatio
                                base64
                                originalName
                                sizes
                                src
                                srcSet
                            }
                        }
                    }
                }
            }
        }
    `);

    return {
        backgrounds: result.allFile.edges,
    };
};
```

Although migrating the site to Gatsby was a breeze, it took a bit of logic to pass in a background color prop to the card component so I could render the correct background image for each card.

This could probably be written more succinctly, but my goal was to complete this project in a day or less!

I set the `backgroundColor` prop as an `enum` of `'mint' | 'orange' | 'pink' | 'teal' | 'yellow'` which I then filtered to match the name of the `png` file.

```
    const { backgrounds } = useBackground();

    const filteredBackground = backgrounds.filter(
        background =>
            background.node.childImageSharp.fluid.originalName.slice(0, -4) === backgroundColor
    );
```

Some additional improvements that I made:
- used [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) to pull in brand icons with an npm package rather than rely on a CDN
-  moved the site to [Netlify](https://www.netlify.com/) so I could deploy the site directly from the command line

## Measuring the results
So how big were the performance gains made by these tweaks?

![Lighthouse Audit report results](https://dev-to-uploads.s3.amazonaws.com/i/mxa4ewg2kx9j1ahcavbm.png)

A pretty impressive return for an afternoon's work!

Check out the full [Github repo](https://github.com/snack-attack/portfolio)