Static Site Revolution: Top Websites Built with Gatsby
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.
There's no limit per page. Make sure they load fast, for your users. I often check https://t.co/s55K8Lrdmo and aim for <2-3 secs
— 🌽〈link href=//johnmu.com rel=canonical 〉🌽 (@JohnMu) November 26, 2016
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.
What Is GatsbyJS?
GatsbyJS has been around since 2015 (its first release took place on October 6th, 2015, to be precise).
The effect? Lightning fast loading site.
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
- 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.
- 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.
- 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.
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.