After deploying the first iteration of the new site for North Harrow Community Library, developed in GatsbyJS using React, I’ve gotten a good opportunity to evaluate it as a framework.
At first, I really struggled to understand a lot of the concepts. Being someone who first started developing sites in the early 2000s, the concept of being “blazingly fast” confused me a little initially. How could it be faster than just using plain old static HTML? But working with the framework over a couple of months I really see the advantages.
The reality is: the web has changed. Browsers have changed. Websites are more complex than ever, and the criteria for evaluating speed have changed. More importantly, peoples expectations of the web have changed. Websites taking more than a few seconds to paint meaningful content is now parsed by the mind as being a sign of something having gone wrong. This is where GatsbyJS really kills it.
A simple example is the gatsby-image package. If you’re displaying a lot of images on a page, the default loading behaviour is to wait for all of them to load. gatsby-image provides lazy-loading of images via the IntersectionObserver API, generates lower bandwidth versions that load almost instantly while the higher resolution version loads in the background, and generates optimised versions to avoid unnecessary page bloat.
Combined with Google Chrome’s Lighthouse Audit tool, GatsbyJS provides an extremely powerful way to build websites that load and perform in ways that keep users happy and engaged.