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

Slide 1

FAST BY DEFAULT ⚡

Near Instant Load Times at Scale with GatsbyJS

Slide 2

PERFORMANCE MATTERS

Slide 3

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.

Slide 4

THE ETHICS OF WEB PERFORMANCE

“Poor performance can, and does, lead to exclusion.” — Tim Kadlek

Slide 5

PERFORMANCE MATTERS FOR INCLUSION

Source: https://v8.dev/blog/cost-of-javascript-2019

Slide 6

PERFORMANCE MATTERS FOR INCLUSION

Source: https://blog.chriszacharias.com/page-weight-matters

Slide 7

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.”

Slide 8

PERFORMANCE ENABLES NEW USERS

Slide 9

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

Slide 10

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/

Slide 11

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

Slide 12

Hi

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

Slide 13

HOW TO ACHIEVE PERFORMANCE ON THE WEB?

Slide 14

TODAY MARKS THE REIGN OF CLIENT-RENDERED SINGLE PAGE APPLICATIONS ⚙

Angular, React, Vue… 📺 HTML is computed client-side 🖱Interactiveness

Slide 15

SINGLE PAGE APPLICATIONS MADE GREAT PRODUCTS POSSIBLE

Slide 16

BEFORE THEN, SERVER RENDERING WAS KING 👑

🐘 PHP, Python, Ruby 💻 HTML is computed server-side Dynamic

Slide 17

OL’ MYSPACE

Slide 18

IN THE BEGINNING THERE WAS STATIC 💎

Pure HTML files served by server 🥇 First ever page on the Web ⚡ Simple. Scalable. Fast

Slide 19

WE LOST PERFORMANCE DURING OUR JOURNEY

Slide 20

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

Slide 21

MEET GATSBYJS

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

Slide 22

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

Slide 23

IS GATSBY THAT FAST?

Slide 24

IT ALL STARTED WITH A BEER

My colleague Nicolas

Slide 25

PARIS HAS A LOT OF COMMUNITIES

Slide 26

THE JAMSTACK

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

Slide 27

GATHERING JAMSTACK COMMUNITY IN PARIS

Slide 28

300 MEMBERS, 5 MEETUPS

Slide 29

WE WANTED A FAST WEBSITE TO COMMUNICATE

Slide 30

WE USE MEETUP.COM TO ORGANIZE THE MEETUPS

Slide 31

OUR NEEDS 📅

Displays meet-ups from meetup.com API 📸 Picture gallery ⚡ Performance

Slide 32

HERE IS THE FINAL RESULT

Slide 33

📅 DISPLAYS MEETUPS FROM MEETUP.COM API

Slide 34

DATA FLOW IN GATSBY SITE

1 Pull Data from sources . Query Data with GraphQL 2 Pass data to React Components

Slide 35

PULL DATA FROM SOURCE WITH SOURCE PLUGINS

Slide 36

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 } } ] });

Slide 37

DATA IS FETCHED AND MAPPED AT BUILD TIME

FETCHING DATA ON MEETUP API

Slide 38

QUERY DATA WITH GRAPHQL 📢

Query Language 💙 Created by Facebook 🥢 Request only data you want 👯 Same interface for all your data sources

Slide 39

GRAPHiQL TO HELP YOU TINKER WITH QUERIES

Slide 40

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 } } );

Slide 41

PASS DATA TO REACT COMPONENTS

Homepage.js return ( <Layout> {data.meetupGroup.events.map(pastMeetup => { return <Meetup meetupInfo={pastMeetup} /> })} </Layout> )

Slide 42

ADD A BIT OF STYLING 🎨 … RUN A BUILD ⚙

Slide 43

JAMSTACK.PARIS 1.1 🎉

Slide 44

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 💉

Slide 45

📸 PICTURE GALLERY

Slide 46

📸 PICTURE GALLERY

Slide 47

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?

Slide 48

IN GATSBY IMAGES ARE DATA LIKE OTHERS

Slide 49

Install and configure related source plugin ⚙

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

Slide 50

Get your GraphQL right with GraphiQL

SPECIFY WIDTH AND HEIGHT

Slide 51

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>

Slide 52

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?

Slide 53

📸 FAST RENDERING OUT OF THE BOX

Slide 54

Get your GraphQL right with GraphiQL

TRACED SVG?

Slide 55

📸 SMOOTH TRANSITION

Slide 56

⚡ PERFORMANCE

Slide 57

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

Slide 58

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

Slide 59

MANUAL CODE SPLITTING IS HARD WITH WEBPACK

Slide 60

GATSBY AUTOMATICALLY SPLITS YOUR CODE BY PAGE

Homepage JS Gallery JS GATSBY-IMAGE IS ONLY LOADED ON GALLERY

Slide 61

SUBPAGES ARE PREFETCHED ON LINK HOVER

Slide 62

OTHER BUILT-IN OPTIMIZATIONS

🖱Native Lazy Loading 🎨 Inline Critical CSS . HTTP2

Slide 63

IMO GATSBY DOES FULFILL ITS PROMISES

Slide 64

GATSBY LIMITS

Slide 65

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

Slide 66

ERRORS MAY BE MYSTERIOUS

Slide 67

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

Slide 68

IF YOU WANT TO BEGIN WITH GATSBY

📒 https://www.gatsbyjs.org/docs/ 📹 https://egghead.io/browse/frameworks/gatsby https://github.com/gatsbyjs/gatsby

Slide 69

GATSBY IS PART OF A BIGGER ECOSYSTEM : THE JAMSTACK

Slide 70

BEFORE LEAVING, A QUICK TASTE OF GATSBY THEMES

“share design, components and set of plugins easily still allowing configuration and overriding”

Slide 71

THANKS

https://github.com/matthieuauger/ gatsby-theme-meetup

Follow this guy, he tweets about Web Performance: phacks