Top Websites Built with Gatsby – InApps Technology 2022

As we are all settled for good in 2019, let’s talk about one of UX strongest trends of 2018 — the web performance.

Think about an average time you waited for a website to load last year. Ok, you probably wouldn’t know the exact number of seconds, but I can bet you see the difference compared to previous years.

These seconds you have to wait to see a website’s content are one of the strongest factors of good user experience. People are now used to getting desired information nearly immediately after sending a request, and it’s a trend that doesn’t seem to go anywhere.

Just wonder, the internet connection, web and mobile apps, payment systems — everything works much faster now. With user expectations like that, companies can do nothing but follow.

Load Speed vs. Search Engines

So, users like fast sites. What’s worth knowing is that Google does too.

In a web world, fast usually is a crucial part of a good UX. Since March 2018 Google robots consider speed and good UX major search engine ranking factors, meaning if you care for traffic and conversions (and of course you do), it’s time for you to take action and improve your website’s load speed. Also on mobile:

“How fast your website loads is critical but often a completely ignored element in any online business, and that includes search marketing and search engine optimization. And that includes page load times on mobile devices: The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53 percent of visits are abandoned if a mobile site takes longer than three seconds to load. That’s a big problem,” the Google docs state.

Twenty-two seconds may sound a little abstract, but the truth is companies still struggle to keep up to users’ expectations with popular engines they use. Over 35 percent of all websites are dynamic sites built on WordPress, Joomla or Drupal.

Those, because of many factors, are not very speed-friendly. That created the background for, so-called, static site generators, like Gatsby.

What Is a Static Site Generator?

Static site generators are quite the opposite of popular dynamic sites. In these, when a user enters a website, there’s a request sent by a server to a database to download the content needed at the moment. After that, the data is displayed on the website as an HTML file.

No wonder that the whole process takes its time and can be slowed down even more with too many requests sent at one time (for example, when the website meets more significant traffic).

The effect? Users wait for many seconds for elements to load, getting frustrated and, sometimes, leaving the site.

Static site generators don’t use the database layer behind the front-end. It uses static files to build the site in the browser, not on the server, as the user enters each page. Meaning, if the person on your website wants to see the Contact page — the About Us page is not being rendered.

What you get when going serverless? A lightweight website that takes less time to build and maintain, as you can forget about databases.

Front-end solutions like static site generators raise popularity since ca. 2011, getting more and more enthusiasts each year. And it doesn’t really matter what coding language you prefer. There’s Jekyll for Ruby on Rails people, Hugo for those who choose Go, and as for JavaScript — NextJS and GatsbyJS, which I’ll shortly describe here.

What Is GatsbyJS?

GatsbyJS has been around since 2015 (its first release took place on October 6th, 2015, to be precise).

Long story short, Gatsby is a static site generator that combines the best features of React JavaScript library and GraphQL to give you fresh, entirely front-end web building experience. When a website uses static files only, asset optimization, smart image loading, code splitting, and server-side rendering is what you get in return.

The effect? Lightning fast loading site.

GatsbyJS is built on the JAMstack — Javascript, APIs, and markup — what means it shares JAMstack’s perks — high performance, safety, and scalability.

How does it work in practice? You, or your developers, code and build your website. Then, Gatsby takes static data sources like Markdown and turns them into a dynamic website using React JS. Following the component-driven development model of React, Gatsby re-uses specific components, like contact forms, across a site, gaining more speed.

As a result, blogs and sites developed in GatsbyJS function as a single-page app.

Why choose GatsbyJS Over Other Static Site Generators

1. The JavaScript development environment: It’s the team to play in right now, and don’t get me wrong, it’s definitely not a temporary trend. Technology with a bright future and a big, great community are definitely for a plus.
2. Rich ecosystem: Although Gatsby is a pretty fresh technology, it’s got really comprehensive documentation and starters to help you get into it quickly. And when you need some tips, it has one of the most active and fast-growing communities of all static site generators — right now there are 1,602 of them on GitHub.
3. The performance: I say it for the 100th time for a reason, every aspect and every solution of Gatsby has been designed with speed in mind. And you can see it in the final products — sites built on Gatsby are noticeably faster than those created with other generators.
4. An enjoyable developer experience: Because we always aim for doing things the pleasant way.

Now, let’s get to the point.

Websites Built with GatsbyJS

Let me show you some examples of companies and other subjects that considered GatsbyJS for their case and decided to implement it into their websites.

The Official React Javascript Library Website

React developers use Gatsby to tell about the library’s possibilities and show the community how to use it. The website has a complex, yet simple architecture that helps users get to know React with a tutorial, learn how to start using it for their projects and easily find answers to their questions. You can notice how fast it is, and according to Semrush, only in December 2018, it had over 3 million visits. I guess following React’s official team is not the worst plan.

Braun GatsbyJS eCommerce

The Canadian branch of popular razors’ brand Braun decided on Gatsby for their store. It’s used to present the brand and particular products, with lots of visual content. Today Canada, maybe other versions tomorrow?

The Impossible Foods’ Brand Website

The Impossible Foods is the company that produces and sells meatless meat products: burgers, meatballs, baos, chili, tacos and many others. All America’s favorites, no harm for animals and environment.

The Airbnb Sites for Developers and Designers

Airbnb uses GatsbyJS for two of their websites: the Airbnb Engineering & Data Science and developers’ blog, and to share their brand typeface — Airbnb Cereal. It shows that Gatsby is a good choice both when one wants to present the product in with an attractive design and also when there’s a big amount of data and content to be displayed.

The Just Do It Promotional Nike Website

Another big name in this summary, Nike, used Gatsby for Just Do It project. It’s a website that shares people’s dreams and stories on how to fulfill them. And of course, presents Nike sportswear that lets us do it.

The NYC Pride 2019 Platform

The colorful and bold website of New York 2019 Pride celebrations. There is the news, there is a calendar, there are an interactive map and a transport and accommodation map for visitors. All to host the World’s biggest annual Pride.

SEOmonitor: The SEO Platform Website

While readying to launch Signals, a companion to their SEO platform, SEOmonitor was in need to replace their old, clunky and slow WordPress website with one build on modern, fast and secure web architecture executed with Gatsby. Tech stack that brought the results they were looking for was Gatsby, as a static site generator, Contentful as a headless CMS and Netlify as a hosting solution (there is a complete case study about it).

Need more examples? Here is the full official list of the websites built with GatsbyJS.

In a fast-evolving world of web development trends come and go. For Gatsby and static sites that might not be the case because it offers a faster and more secure way of building websites and those two benefits, in today’s world, are hard to overlook.

Thinking about choosing GatsbyJS for your project? Ping us at bejamas.io! We’ll be happy to help you make the right decision, whether with Gatsby, or other technology.

Feature image via Pixabay.