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
Measuring the results
So how big were the performance gains made by these tweaks?
A pretty impressive return for an afternoon's work!
Check out the full Github repo
Top comments (1)
Understood nothing but it looks pretty cool