<commit_before>---
title: Gatsbygram Case Study
date: "2017-03-09"
author: "<NAME>"
image: 'ui-and-code.png'
---

![Gatsbygram](ui-and-code.png)

[Gatsbygram](https://gatsbygram.gatsbyjs.org) is a clone of Instagram
built with Gatsby 1.0.0-alpha12 and is being continually updated as we
make our way towards our 1.0 release.

The [source code for
Gatsbygram](https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram)
lives in the Gatsby monorepo. See the instructions at the end for how to
start playing with the code!

<div>
<video controls="controls" autoplay="true" loop="true">
  <source type="video/mp4" src="/gatsbygram.mp4"></source>
  <p>Your browser does not support the video element.</p>
</video>
</div>

## What is Gatsby

Gatsby is a JavaScript web framework that let's you build fast, very
dynamic, mobile-ready websites *without* an advanced degree in
JavaScript wizardry.

It combines the fast performance of static websites with the powerful
abstractions, tools, and client capabilities of the React.js world.

### Gatsby is fast

[Gatsby automatically optimizes your site for the modern
web](/docs/prpl-pattern/). You provide pages and Gatsby stitches them
together so they load as fast as possible.

As proof of this, Gatsbygram loads *2-3x faster* than the real Instagram site.

I tested Gatsbygram and Instagram on
[webpagetest.org](https://www.webpagetest.org/) using a simulated 3G
network and a Moto G4 smartphone—a budget Android typical of many
lower-end phones used today. The median [speed
index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)
score for
[Gatsbygram](http://www.webpagetest.org/result/170310_XP_11AS/) was 3151
vs. 8251 for
[Instagram](http://www.webpagetest.org/result/170310_PC_11AZ/).

![gatsbygram vs. instagram filmstrip](gatsbygram-instagram.png)*Filmstrip of Gatsbygram (top)
and Instagram (bottom) loading on webpagetest.org*

The second repeat view is even faster for Gatsbygram as it now loads
from its service worker. It has *pixels on the screen in under a 1/2
second on a budget Android device*! And for both the initial and repeat
view, Gatsbygram  *finishes* loading a full second before Instagram gets
started.

![gatsbygram vs. instagram filmstrip repeat
load](gatsbygram-instagram-repeat-load.png)*Filmstrip of a repeat view
of Gatsbygram (top) and Instagram (bottom) loading on webpagetest.org*

The difference in Time to Interactivity (TTI) (measure of how long
before the user can actually interact with the page e.g. click on a
link) between the sites is just as dramatic. Gatsbygram's TTI is 6.1s vs
14.1s for Instagram.

* [Gatsbygram's webpagetest
results](http://www.webpagetest.org/result/170310_XP_11AS/)
* [Instagram's webpagetest
results](http://www.webpagetest.org/result/170310_PC_11AZ/)

### Gatsby is built for the next billion internet users

As [Benedict Evans has
noted](http://ben-evans.com/benedictevans/2015/5/13/the-smartphone-and-the-sun),
the next billion people poised to come online will be using the internet
almost exclusively through smartphones.

Smartphones with decent specs (as good or better than the Moto G), a
great browser, but *without* a reliable internet connection.

Gatsby uses modern web performance ideas (e.g.
[PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/))
developed by the Google Chrome Developer Relations team and others to
help websites work well on modern browsers with unreliable networks.

Sites built with Gatsby run as much as possible in the client so<commit_msg>Correct smartphone model<commit_after>---
title: Gatsbygram Case Study
date: "2017-03-09"
author: "<NAME>"
image: 'ui-and-code.png'
---

![Gatsbygram](ui-and-code.png)

[Gatsbygram](https://gatsbygram.gatsbyjs.org) is a clone of Instagram
built with Gatsby 1.0.0-alpha12 and is being continually updated as we
make our way towards our 1.0 release.

The [source code for
Gatsbygram](https://github.com/gatsbyjs/gatsby/tree/1.0/examples/gatsbygram)
lives in the Gatsby monorepo. See the instructions at the end for how to
start playing with the code!

<div>
<video controls="controls" autoplay="true" loop="true">
  <source type="video/mp4" src="/gatsbygram.mp4"></source>
  <p>Your browser does not support the video element.</p>
</video>
</div>

## What is Gatsby

Gatsby is a JavaScript web framework that let's you build fast, very
dynamic, mobile-ready websites *without* an advanced degree in
JavaScript wizardry.

It combines the fast performance of static websites with the powerful
abstractions, tools, and client capabilities of the React.js world.

### Gatsby is fast

[Gatsby automatically optimizes your site for the modern
web](/docs/prpl-pattern/). You provide pages and Gatsby stitches them
together so they load as fast as possible.

As proof of this, Gatsbygram loads *2-3x faster* than the real Instagram site.

I tested Gatsbygram and Instagram on
[webpagetest.org](https://www.webpagetest.org/) using a simulated 3G
network and a Moto G4 smartphone—a budget Android typical of many
lower-end phones used today. The median [speed
index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)
score for
[Gatsbygram](http://www.webpagetest.org/result/170310_XP_11AS/) was 3151
vs. 8251 for
[Instagram](http://www.webpagetest.org/result/170310_PC_11AZ/).

![gatsbygram vs. instagram filmstrip](gatsbygram-instagram.png)*Filmstrip of Gatsbygram (top)
and Instagram (bottom) loading on webpagetest.org*

The second repeat view is even faster for Gatsbygram as it now loads
from its service worker. It has *pixels on the screen in under a 1/2
second on a budget Android device*! And for both the initial and repeat
view, Gatsbygram  *finishes* loading a full second before Instagram gets
started.

![gatsbygram vs. instagram filmstrip repeat
load](gatsbygram-instagram-repeat-load.png)*Filmstrip of a repeat view
of Gatsbygram (top) and Instagram (bottom) loading on webpagetest.org*

The difference in Time to Interactivity (TTI) (measure of how long
before the user can actually interact with the page e.g. click on a
link) between the sites is just as dramatic. Gatsbygram's TTI is 6.1s vs
14.1s for Instagram.

* [Gatsbygram's webpagetest
results](http://www.webpagetest.org/result/170310_XP_11AS/)
* [Instagram's webpagetest
results](http://www.webpagetest.org/result/170310_PC_11AZ/)

### Gatsby is built for the next billion internet users

As [<NAME>ans has
noted](http://ben-evans.com/benedictevans/2015/5/13/the-smartphone-and-the-sun),
the next billion people poised to come online will be using the internet
almost exclusively through smartphones.

Smartphones with decent specs (as good or better than the Moto G4), a
great browser, but *without* a reliable internet connection.

Gatsby uses modern web performance ideas (e.g.
[PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/))
developed by the Google Chrome Developer Relations team and others to
help websites work well on modern browsers with unreliable networks.

Sites built with Gatsby run as much as possible in the client so
{'fraction_non_alphanumeric': 0.09084536660591616, 'fraction_numerical': 0.02172998738258797, 'mean_word_length': 4.857142857142857, 'pattern_counts': {'":': 0, '<': 22, '<?xml version=': 0, '>': 22, 'https://': 10, 'lorem ipsum': 0, 'www.': 10, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5203695', 'n_tokens_mistral': 2356, 'n_tokens_neox': 2210, 'n_words': 850}