Build a lightning fast site with GatsbyJS

Victoria Sloan

Front-end Developer @ iManage

@victoriasloan95

What is a static site?

All the HTML files are completely generated with data before they are uploaded to the server

Why use static sites?

Very fast, even in heavy traffic

Increased Security

No server dependency

Cheaper to host

Search Engine Optimisation

When to use a static site?

Blogs

Online CVs/ Portfolios

Marketing sites

What is a static site generator?

How does GatsbyJS work?

GRAPHQL

Data querying language developed by Facebook

Provides a layer of abstraction over many different data sources

Gives the client control of only asking for the data it needs

Comes with a built-in playground environment (GraphiQL)

GraphiQL

Why use GatsbyJS?

Preconfigured webpack

Hot Reloading

"Gatsby sites are consistently 2-3x faster than similar types of websites" 

-Founder @ GatsbyJS Kyle Mathews

How is Gatsby so fast? 🚀

Inline critical CSS

<link preload/> for critical resources

Pre-route code-splitting

Pre-fetching soon-to-be resources

Works as a SPA after initial load

https://gatsbyjs-pandas.netlify.com/

Thanks 😊