Having an awesome landing page is essential for your business. It allows your potential clients to discover what problem you solve for them and it’s how your company appears to the world. For that you need your page to load as fast as possible, to be highly visible on all the major search engines, such as Google, Bing, and Yahoo, and to be available to everyone. And Gatsby takes care of that and much more for you.
What is Gatsby?
Gatsby is a free and open-source framework based on React that helps developers build blazing fast websites and apps, or that is what they say on their website. In my opinion, Gatsby is more than another framework based on React, it’s the way to build your website right from the start and solve all the classical problems of making pages with only integrated plugins pre-made by the community.
Also, there is an amazing community behind it, that contributes to continuously improve Gatsby and create wonderful plugins that solve all types of problems with just a couple of lines of code.
What does Gatsby solve?
Gatsby resolves a lot of things including: offline support, integration with WordPress, lazy loading of images and much more. It generates clean code that is extremely straightforward for testing and QA. But specifically, if you need to build a landing page as soon as possible, the following features stand out with Gatsby:
SEO (Search engine optimization)
SEO is vital for your landing page. It allows your website to be displayed in a highly visible way on search engines which translates to more visitors. With Gatsby, the challenge of SEO is resolved as long as Gatsby generates static pages, which means the crawler of the search engine will take all the information of your page without loading the Javascript of your site, but there are other things we can do to improve this. We can add the plugin [.c-inline-code]react-helmet[.c-inline-code] for Gatsby because this is important not just for site viewers, but also for SEO — title and description metadata stored in the document head is a key component used by Google in determining placement within search results. You can see the SEO performance of your page with Lighthouse tools on Chrome.
Progressive Web App
Gatsby.js is a generator of Progressive web apps, a growing first-choice for app development. This is a great improvement for your landing page because it allows you to load only the critical HTML, CSS, Javascript and data that your page needs in order to display. Also, Gatsby pre-fetches resources for other pages, so if you hover your mouse on a link, Gatsby preloads the page to provide a fast load. This impacts the way your users perceive the speed of your website.
Hosting advantages compared to traditional hosting services
One of the most amazing pros of using Gatsby is not in Gatsby itself, it’s in the services related to the deployment of a Gatsby page, such as Netlify and Zeit. These Static Hosting services are characterized by having lower prices (the free plan has all you need generally) and letting you improve your project with continuous deployment. The latter allows you to have a faster deployment of your page and test changes before you push to production.
Extremely easy blog integration
Say goodbye to cumbersome old CRM blogs. The integration, and creation, of a blog is extremely easy. You can start with a starter provided by Gatsby or you can integrate with your landing page. There are great examples of blogs made by the community so you only need to search, and with continued deployment you can forget about deploying every time you create a blog post.
Conclusion
Picking the right tool for the job is essential when you start a project. For that and much more, Gatsby adapts perfectly, from making the development much faster and easier, to the creation of static pages such as your blog or your landing page.
