Improving a static site's performance

#gatsby #graphql #performance #lighthouse

Introduction

I have a very simple one-page portfolio site 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.

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

Improving the site

I decided to port the site over to Gatsby 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 to pull in brand icons with an npm package rather than rely on a CDN
moved the site to Netlify so I could deploy the site directly from the command line