FAST BY DEFAULT ⚡

Near Instant Load Times at Scale with GatsbyJS

PERFORMANCE MATTERS

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

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

PERFORMANCE MATTERS FOR INCLUSION

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

PERFORMANCE MATTERS FOR INCLUSION

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

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 good practices] have well-known benefits to usability, but are also acts of environmental protection.” — Cennydd Bowles, Future Ethics

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

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 ⚙

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

SINGLE PAGE APPLICATIONS MADE GREAT PRODUCTS POSSIBLE

BEFORE THEN, SERVER RENDERING WAS KING 👑

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

OL’ MYSPACE

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

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

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

My colleague Nicolas

PARIS HAS A LOT OF COMMUNITIES

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 📅

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

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

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

FETCHING DATA ON MEETUP API

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

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

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

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

; 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 ⚙

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

Get your GraphQL right with GraphiQL

SPECIFY WIDTH AND HEIGHT

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

✅ 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

TRACED SVG?

📸 SMOOTH TRANSITION

⚡ PERFORMANCE

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

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

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

SUBPAGES ARE PREFETCHED ON LINK HOVER

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

“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

😍 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

📒 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

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

THANKS

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

Follow this guy, he tweets about Web Performance: phacks