Making fast websites is hard. Personally, for some projects, I was spending a few days to optimize the web app before releasing into the wild. That was OK because I was familiar with the technique of following 30 item performance checklists and getting an 85 Lighthouse Score at the end.
Not bad, but GatsbyJS web apps scores 90 / 95 on Lighthouse, out of the box. For instance, check out this GatsbyJS Starter, built in 10 minutes, on top of Dimension design (from HTML5UP).
Of course, I was curious to find out how they did it. For newcomers, GatsbyJS is a free and open source framework based on React that helps developers build blazing fast websites and apps.
Metrics to follow, to know that we have a fast website:
- Speed Index: how many milliseconds it takes for the visible parts of a webpage to be displayed.
- TTI: time to interactive
- Critical rendering path. Aka load only the critical stuff for your page, defer the rest.
How Gatsby solve performance?
Code split and cache
When building a page, Gatsby can see which components the page needs and let webpack do code splitting automatically. This is applied by setting up Dynamic Imports. Through this way, the browser will only request files required for the page, not the entire website, speeding up the time to interact with the page.
As a result, links to other pages will download their files only when the user interacts with the link, slowing navigation.
To avoid this problem, the webpack configuration of Gatsby applies a technique called Link prefetching.
Every page is a React app
Navigating through pages in a static website still requires a load of HTML files, but not for Gatsby — they are React apps.
Each anchor tag for another page will become a route by Reach Router (a tool for building routes on React with accessibility). It looks like it’s changing from one HTML file to another when in fact, it’s a SPA updating the content on the page.
Optimizing images can be one of the best performance improvements on a website.
Fewer bytes to download means less bandwidth required, so the browser can download and render content faster. These are some of the optimizations we can do:
- Resize to the same amount of space it needs
- Generate responsive images with different resolutions for desktop and phones
- Remove metadata and apply compression
- Apply lazy loading to speed up the initial page load
- Display a placeholder while the image is loading
Like many tools in Gatsby, gatsbyjs-image is powered by GraphQL. This plugin sets up the images with different resolutions for download. It creates some thumbnails and applys compression. All this on the building step.
Real life samples
- Dimension, Lighthouse score: 91 - Demo, Check Speed
- Jodie, Lighthouse score: 96 - Demo, Check Speed
- Strata - Lighthouse score: 98 - Demo, Check Speed
More resources and beyond
Gatsby cares about performance optimization so that you don’t need to. If you are more curious about how Gatsby works under the hood, check out the documentation.
Looking for more React Themes? This article contains themes designed by HTML5 Up, LekoArts, Creative-Tim. Source code and Demo's included.
Useful? Sharing is caring. Thank you!