At weKnow, we’re all about making the best user experiences for our clients. Whenever we get a project, we always try to ensure that the end product is a smooth UX that comes with a convenient UI and an aesthetically pleasing website layout. Our weapon of choice is, of course, Gatsby and to that end we’re fairly obsessed with the static site generator owing to the superior quality that the generator offers.
Gatsby balances out customizability without compromising website performance, which is simply brilliant. We try to contribute to the potential capabilities for Gatsby because we believe that Gatsby is the future of web development. For those who might be interested, we did a series of blogs where we spoke of the ways you can improve Gatsby-Drupal integration using Gatsby plug-ins and modules in Drupal, and how you can create elements to improve the performance of your Drupal websites.
Just to drive the nail home, we feel that it’s important that you understand why Gatsby is so great and what exactly we mean when we say that it lets us create efficient websites. Clearly, there is a link between user preference and website performance; especially when you consider the following statistics:
- Sites that load within 5 seconds have 25% higher ad viewership, 70% longer sessions and 35% lower bounce rates on average.
- 53% of all mobile websites are abandoned if they take longer than 3 seconds to load.
- 47% of all online shoppers expect a webpage to load within 2 seconds.
Clearly, it’s in your commercial interests to have websites that work really fast and which can load within a matter of seconds, because otherwise your customers/users will just lose interests. And if you can’t keep them around, you can’t expect to make sales or generate revenues. Your websites are the single most effective client base development tool at your disposal and you need these to run lightning fast.
This entire discussion raises the question of how fast Gatsby really is. This is where we come to some important metrics for website performance measurements. We’ll assess how Gatsby websites measure across each of these to establish once and for all why Gatsby is a superior web development platform.
How Do Gatsby Websites Measure Up?
The people at Gatsby went through a lot of trouble to make sure that Gatsby websites turned out to be some of the fastest ever seen on the internet. For one thing, static websites are typically faster; owing to the fact that these weigh only a few kilobytes each, these render text faster and if you balance out your images to less than 1 MB in size, then these can run far faster than dynamic websites.
Gatsby offers much more than just the advantages of a static website, it enhances website performance when compared to other static websites. The Gatsby website has these metrics listed, where they’ve measured various performance indicators that include:
Lower Time To Interactivity
Back in 2018, the average page load time for PC based websites across various industries was around 9 seconds and for those on mobile was 22 seconds. Considering how people move on from web pages if it doesn’t load within 15 seconds, that’s cutting it pretty close. The best way to keep people around is to give them something to interact with which is essentially tied to the time to load for your web pages.
The time to interactivity is a measure of how soon the webpage is populated with interactive elements, which directly determines how soon the page will load and whether people will interact with it. Gatsby offers a time to interactive measurement of 1.62 seconds.
Lower Input Latency
Input latency, measured as a time to response resulting from a stimulus (Like clicking a link on the webpage) needs to be low because you don’t want to send ahead a laggy user experience. Gatsby websites measure at an average of 13 milliseconds. This is almost like the webpage is responding instantaneously to any inputs.
Higher Speed Indices
The speed index is a measure of how soon the visible elements of your website are displayed on the page. The lower the time, the faster your website displays content. Gatsby has a speed index of 810 milliseconds.
How Does Gatsby Manage These Numbers?
Gatsby is the latest in a line of static page generators each of which have been trying to ease the process of developing static websites and improving their performance. Before Gatsby came around, you could achieve the same results but you had to add plug-ins to make it happen. Gatsby already has many of these functionalities preinstalled and has made it far easier to manage your plug-ins to make development easier.
However, this is part of why developing with Gatsby is easier. The reason for why Gatsby produces faster websites is because of the way it allows for the production of web pages. This process involves the following components:
Gatsby Uses PRPL
PRPL stands for Push, Render, Pre-Cache and Lazy Load. This basically implies that most of the page elements that the user will see have been pre-downloaded before they even ask for them and are just displayed instantaneously when the user clicks a certain link or scrolls down page. This pre-downloading is done in the background which is why it doesn’t affect of the performance of the webpage that the user is looking at currently.
Push:
This sends site assets essential for website functionality to the user before they’ve asked for any of these.
Render:
These assets are then used to render the basic layout for the page.
Pre-Cache:
Once the user is on the website, it’s only inevitable that they will move around the website to follow various links. Gatsby websites download these pages to display them instantaneously; entire pages are downloaded irrespective of whether the user goes to them. It’s a contingency that allows Gatsby to improve page load times.
Lazy-load:
As the user scrolls down the page, all the hyperlinks are downloaded in the background to be shown whenever needed by the user.
Gatsby Uses In-Line CSS
Gatsby directly identifies the styles being used on the webpage, to present them as the page is being rendered. Compared to the conventional ways in which stylesheets are downloaded and then rendered; Gatsby renders the styles as the page is being rendered.
Gatsby Doesn’t Require Page Reloads
With Gatsby, the pre-downloaded web pages are instantaneously rendered when required; which doesn’t require a separate reload of a page each time you switch to a different one. It just links one pre-cached page to a link and then renders it as is required.
Gatsby Uses Data Splitting
Gatsby only sends ahead the code required for any page to render instead of all the code which is then periodically parsed as required. This shaves milliseconds from the page load times.
Gatsby Pre-Fetches Data
Since Gatsby doesn’t download content/code from links only when required; instead pre-downloading it, the websites work far faster than they would through other development tools.
Conclusion
In conclusion, Gatsby essential pre-prepares and pre-fetches data to be viewed as required by the user. Since a browser’s cache already contains these pages, there is no need to download these pages again. With some shrewd delegation of computing processes and truncating redundant or unnecessary computing processes; Gatsby delivers a user experience that is changing website development as we speak.