Fast by Default : Near Instant Load Times at Scale with GatsbyJS

A presentation at GDG Craiova DevFest in November 2019 in Craiova, Romania by Matthieu Auger

FAST BY DEFAULT ⚡ — FAST BY DEFAULT ⚡
Near Instant Load Times at Scale with GatsbyJS

PERFORMANCE MATTERS

PERFORMANCE MATTERS FOR YOUR BUSINESS — PERFORMANCE MATTERS FOR YOUR BUSINESS
Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time. Trainline reduced latency by 0.3 seconds across their funnel and customers spent an extra £8 million (~€9.1 million) a year. BBC has seen that they lose an additional 10% of users for every additional second it takes for their site to load Rebuilding Pinterest pages for performance resulted in a 15% increase in SEO traffic and a 15% increase in conversion rate to signup.

THE ETHICS OF WEB PERFORMANCE — THE ETHICS OF WEB PERFORMANCE
“Poor performance can, and does, lead to exclusion.” — Tim Kadlek

PERFORMANCE MATTERS FOR INCLUSION — PERFORMANCE MATTERS FOR INCLUSION
Source: https://v8.dev/blog/cost-of-javascript-2019

PERFORMANCE MATTERS FOR INCLUSION — PERFORMANCE MATTERS FOR INCLUSION
Source: https://blog.chriszacharias.com/page-weight-matters

PERFORMANCE MATTERS FOR INCLUSION — PERFORMANCE MATTERS FOR INCLUSION
In 2009, YouTube engineer Chris Zacharias tackled the page weight of youtube.com and reduced it from 1.2MB to less than 100KB. “He pushed the feature in production, waited for the results of how much he’d have improved the performance. After a week of data collection, the numbers came back… and they were baffling. The average aggregate page latency under the new version had actually INCREASED.” “Under the new version, despite it taking over two minutes to get to the first frame of video, watching a video actually became a real possibility [in developing countries]. […] Large numbers of people who were previously unable to use YouTube were suddenly able to.”

PERFORMANCE ENABLES NEW USERS

PERFORMANCE MATTERS FOR THE ENVIRONMENT — PERFORMANCE MATTERS FOR THE ENVIRONMENT
“[Performance good practices] have well-known benefits to usability, but are also acts of environmental protection.” — Cennydd Bowles, Future Ethics

PERFORMANCE MATTERS FOR THE ENVIRONMENT — PERFORMANCE MATTERS FOR THE ENVIRONMENT
🐌 “I need to buy a new phone” 🔋 “My battery does not last a full day anymore” Source: https://timkadlec.com/remembers/2019-01-09-the-ethics-of-performance/

PERFORMANCE MATTERS FOR THE ENVIRONMENT — PERFORMANCE MATTERS FOR THE ENVIRONMENT
New devices hide performance issues on our websites Pushing users to buy new devices Reducing the perceived need to work on performance Making sites slower on old devices

Hi
$ Numele meu este Matthieu VP of Engineering at Theodo 🥇#1 time in Romania - 🎨 Colorblind @matthieuauger

HOW TO ACHIEVE PERFORMANCE ON THE WEB?

TODAY MARKS THE REIGN OF CLIENT-RENDERED SINGLE PAGE APPLICATIONS ⚙ — TODAY MARKS THE REIGN OF CLIENT-RENDERED SINGLE PAGE APPLICATIONS ⚙
Angular, React, Vue… 📺 HTML is computed client-side 🖱Interactiveness

SINGLE PAGE APPLICATIONS MADE GREAT PRODUCTS POSSIBLE

BEFORE THEN, SERVER RENDERING WAS KING 👑 — BEFORE THEN, SERVER RENDERING WAS KING 👑
🐘 PHP, Python, Ruby 💻 HTML is computed server-side Dynamic

OL’ MYSPACE

IN THE BEGINNING THERE WAS STATIC 💎 — IN THE BEGINNING THERE WAS STATIC 💎
Pure HTML files served by server 🥇 First ever page on the Web ⚡ Simple. Scalable. Fast

WE LOST PERFORMANCE DURING OUR JOURNEY

CAN WE RECONCILIATE INTERACTIVENESS OF TODAY WITH PERFORMANCE OF THE 90”?

MEET GATSBYJS — MEET GATSBYJS
You code in React . Application is compiled to HTML at build time

REQUEST FLOW — REQUEST FLOW
Can I have the homepage please? yeah, take this HTML file, a snapshot of the page I made during the build sweet! i can see the content first… React environment is loaded client-side and now click around! Following navigation is managed by React

IS GATSBY THAT FAST?

IT ALL STARTED WITH A BEER — IT ALL STARTED WITH A BEER
My colleague Nicolas

PARIS HAS A LOT OF COMMUNITIES

THE JAMSTACK — THE JAMSTACK
“a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.”

GATHERING JAMSTACK COMMUNITY IN PARIS

300 MEMBERS, 5 MEETUPS

WE WANTED A FAST WEBSITE TO COMMUNICATE

WE USE MEETUP.COM TO ORGANIZE THE MEETUPS

OUR NEEDS 📅 — OUR NEEDS 📅
Displays meet-ups from meetup.com API 📸 Picture gallery ⚡ Performance

HERE IS THE FINAL RESULT

📅 DISPLAYS MEETUPS FROM MEETUP.COM API

DATA FLOW IN GATSBY SITE — DATA FLOW IN GATSBY SITE
1 Pull Data from sources . Query Data with GraphQL 2 Pass data to React Components

PULL DATA FROM SOURCE WITH SOURCE PLUGINS

SOURCE PLUGINS ARE NPM PACKAGES — SOURCE PLUGINS ARE NPM PACKAGES
gatsby-config.js module.exports = ({ … plugins: [ { resolve: gatsby-source-meetup, options: { key: process.env.MEETUP_API_KEY, groupUrlName: JAMstack-paris, status: “upcoming,past”, desc: “true”, page: 10 } } ] });

DATA IS FETCHED AND MAPPED AT BUILD TIME — DATA IS FETCHED AND MAPPED AT BUILD TIME
FETCHING DATA ON MEETUP API

QUERY DATA WITH GRAPHQL 📢 — QUERY DATA WITH GRAPHQL 📢
Query Language 💙 Created by Facebook 🥢 Request only data you want 👯 Same interface for all your data sources

GRAPHiQL TO HELP YOU TINKER WITH QUERIES

DATA CAN BE QUERIED IN CODE — DATA CAN BE QUERIED IN CODE
Homepage.js const data = useStaticQuery( graphqlquery { meetupGroup { events { id name description local_date venue { name address_1 city } link status } name } } );

PASS DATA TO REACT COMPONENTS — PASS DATA TO REACT COMPONENTS
Homepage.js return ( <Layout> {data.meetupGroup.events.map(pastMeetup => { return <Meetup meetupInfo={pastMeetup} /> })} </Layout> )

ADD A BIT OF STYLING 🎨 … RUN A BUILD ⚙

JAMSTACK.PARIS 1.1 🎉

CHECKLIST WHEN WORKING WITH DATA — CHECKLIST WHEN WORKING WITH DATA
Look for, install and configure related source plugin ⚙ . Get your GraphQL right with GraphiQL 9 2 Inject it to your React components 💉

📸 PICTURE GALLERY

📸 PICTURE GALLERY

IMAGES ARE HARD TO GET RIGHT — IMAGES ARE HARD TO GET RIGHT
; How to serve high quality images to high resolution devices? ; How to optimise image size of small devices? ; How not to wait for full download of images before rendering the pages?

IN GATSBY IMAGES ARE DATA LIKE OTHERS

Install and configure related source plugin ⚙ — Install and configure related source plugin ⚙
gatsby-config.js module.exports = { plugins: [ { resolve: gatsby-source-filesystem, options: { name: gallery, path: ${__dirname}/src/images/gallery } } ] };

Get your GraphQL right with GraphiQL — Get your GraphQL right with GraphiQL
SPECIFY WIDTH AND HEIGHT

Get your GraphQL right with GraphiQL — Get your GraphQL right with GraphiQL
GENERATES HIGHRES VERSIONS <picture><source srcset=” /static/762d4c85dbed42f294dd8870c0200bc6/792e8/meetup-lbc-haroen.jpg 1x, /static/762d4c85dbed42f294dd8870c0200bc6/c3f37/meetup-lbc-haroen.jpg 1.5x, /static/762d4c85dbed42f294dd8870c0200bc6/1eaf9/meetup-lbc-haroen.jpg 2x “/> <img srcset=” /static/762d4c85dbed42f294dd8870c0200bc6/792e8/meetup-lbc-haroen.jpg 1x, /static/762d4c85dbed42f294dd8870c0200bc6/c3f37/meetup-lbc-haroen.jpg 1.5x, /static/762d4c85dbed42f294dd8870c0200bc6/1eaf9/meetup-lbc-haroen.jpg 2x ” src=”/static/762d4c85dbed42f294dd8870c0200bc6/792e8/meetup-lbc-haroen.jpg” alt=”JAMstack Paris Gallery Picture” width=”300” height=”300” loading=”lazy” style=”position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; objectfit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;” /></picture>

IMAGES WERE HARD TO GET RIGHT — IMAGES WERE HARD TO GET RIGHT
✅ How to serve high quality images to high resolution devices? ✅ How to optimise image size of small devices? ; How not to wait for full download of images before rendering the pages?

📸 FAST RENDERING OUT OF THE BOX

Get your GraphQL right with GraphiQL — Get your GraphQL right with GraphiQL
TRACED SVG?

📸 SMOOTH TRANSITION

⚡ PERFORMANCE

FAST, BY DEFAULT — FAST, BY DEFAULT
“I designed Gatsby with the goal that when using it, it’d be really hard to build a slow site” — Kyle Matthews, GatsbyJS creator

ROUTE BASED CODE SPLITTING — ROUTE BASED CODE SPLITTING
Goal of code splitting: only bring to the user what he needs, when he needs it. We will split our Javascript in multiple chunks and when the user makes an action, he will only receive the related Javascript

MANUAL CODE SPLITTING IS HARD WITH WEBPACK

GATSBY AUTOMATICALLY SPLITS YOUR CODE BY PAGE — GATSBY AUTOMATICALLY SPLITS YOUR CODE BY PAGE
Homepage JS Gallery JS GATSBY-IMAGE IS ONLY LOADED ON GALLERY

SUBPAGES ARE PREFETCHED ON LINK HOVER

OTHER BUILT-IN OPTIMIZATIONS — OTHER BUILT-IN OPTIMIZATIONS
🖱Native Lazy Loading 🎨 Inline Critical CSS . HTTP2

IMO GATSBY DOES FULFILL ITS PROMISES

GATSBY LIMITS

BUILD TIME IS CORRELATED TO CONTENT SIZE — BUILD TIME IS CORRELATED TO CONTENT SIZE
“builds are slow (about 1.5-2 times slower than my PC) and […] 15 minutes is sometimes easy to reach” Source: https://oioannou.com/build-on-circleci-deploy-netlify

ERRORS MAY BE MYSTERIOUS

SUM-UP — SUM-UP
😍 Really good experience 📓 Documentation is great 👫 Community is positive and helpful ❤ The hybrid approach of static and dynamic 🏰 Still look for a professional project to use Gatsby with

IF YOU WANT TO BEGIN WITH GATSBY — IF YOU WANT TO BEGIN WITH GATSBY
📒 https://www.gatsbyjs.org/docs/ 📹 https://egghead.io/browse/frameworks/gatsby https://github.com/gatsbyjs/gatsby

GATSBY IS PART OF A BIGGER ECOSYSTEM : THE JAMSTACK

BEFORE LEAVING, A QUICK TASTE OF GATSBY THEMES — BEFORE LEAVING, A QUICK TASTE OF GATSBY THEMES
“share design, components and set of plugins easily still allowing configuration and overriding”

THANKS — THANKS
https://github.com/matthieuauger/ gatsby-theme-meetup
Follow this guy, he tweets about Web Performance: phacks

Matthieu Auger
@matthieuauger

1 / 71

GatsbyJS is a library that adds powerful static capabilities to React-powered webapps and packs many performance optimizations, making websites load instantly, by default.

Gatsby plugins allows any datasource, including custom APIs, into a Gatsby-powered website with the expressiveness of GraphQL.

In this talk we will cover the following topics:

Why Performance plays a major role in the success of any online venture;
How GatsbyJS & GraphQL enhance the performance, developer experience and scalability of modern webapps;
Tayloring GatsbyJS to your own APIs through Source Plugins;
Reusing GatsbyJS code, data and design through Themes.

By the end of the talk, the audience will understand why GatsbyJS may be the next game-changer in terms of performance & DX and when to start with (or migrate over to) GatsbyJS.