⇒ Computer Science & Engineering Student @GUC


Quick Reminder

  • Get up and stretch
  • Drink some water 
  • Correct me if you see any mistakes
  • You can ask questions anytime

Inside GatsbyJS


  • What Is GatsbyJS?
  • How Gatsby Works
  • Who Uses Gatsby
  • What Makes Gatsby "Blazing Fast"

What Is GatsbyJS?


You want to start a blog

You end up with something that looks like this:

  • Very hard to manage
  • A lot of copying/pasting

Solution: use a CMS (Content Management System) or a static site generator

What is a static site generator? 

Examples of Static site generators

Static Site Generator vs. CMS 

  •  Handle large amounts of traffic with ease
  •  No security vulnerabilities
  •  Faster
  •  Cheaper
 Advanced issue found
  • Non-technical people can't use them
  • No real-time content

How Gatsby Works


React Docs

Airbnb Engineering Blog



Gatsby & Performance

Web Performance

How Do They Do it?

Getting Started

npm i gatsby-cli

gatsby new [projectName] [repo link]

Route-based code-splitting

While this is nice, it's not enough

You might end up with pages that are  fast while others are slow 

The solution?

Gatsby <Link/> Demo

- React Docs >Open Chrome Devtools> Network tab

- Guess. js is a collection of libraries & tools for enabling data-driven user-experience on the web.  ( for guessing which pages to load)

 Advanced issue found

- Intersection Observer API  

 Advanced issue found

Optimizing Images

  • Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images
  • Strip all unnecessary metadata and optimize JPEG and PNG compression
  • Efficiently lazy load images to speed initial page load and save bandwidth
  • Hold the image position so your page doesn’t jump while images load

gatsby-image demo

Demo from Gatsby for optimized performance with images. The “blur-up” technique is also used by Medium.

Demo: portfolio website

Demo: portfolio website


Before and after using gatsby-image

GatsbyJS Deep Dive

By Mahmoud Abdelwahab

GatsbyJS Deep Dive

A talk on what is Gatsby and how it creates incredibly fast websites

  • 122
Loading comments...

More from Mahmoud Abdelwahab