A presentation at GOTO Berlin 2019 in in Berlin, Germany by Nicolas Goutay
Fast by Default Near instant load times at scale with GatsbyJS & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Why performance matters
OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Source: https://wpostats.com/
OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time. THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Source: https://wpostats.com/
OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS 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. PERFORMANCE IS A LONG GAME & /phacks Source: https://wpostats.com/
OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & 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 of the new,(~€9.1 fastermillion) FT.coma showed an Tests extra £8 million year. users were up to 30% more engaged— meaning more visits and more content being consumed. /phacks Source: https://wpostats.com/
OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & 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 of the new,(~€9.1 fastermillion) FT.coma showed an Tests extra £8 million year. users were up to 30% more engaged— meaning more visits and more content BBC has seen that they lose an being consumed. additional 10% of users for every additional second it takes for their site to load /phacks Source: https://wpostats.com/
OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks 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 of the new,(~€9.1 fastermillion) FT.coma showed an Tests extra £8 million year. users were up to 30% more engaged— meaning more visits and more content BBC has seen that they lose an being consumed. additional 10% of users for every additional second it takes for their site to Rebuilding Pinterest pages for load performance resulted in a 15% increase in SEO traffic and a 15% increase in conversion rate to signup. Source: https://wpostats.com/
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks “Poor performance can, and does, lead to exclusion.” Tim Kadlek
OUTLINE WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks The ethics of web performance
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Source: https://v8.dev/blog/cost-of-javascript-2019
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Source: https://blog.chriszacharias.com/page-weight-matters
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks “Performance good practices] have well-known benefits to usability, but are also acts of environmental protection.” Cennydd Bowles, Future Ethics
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks 🐌 Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME 🐌 “I need to buy a new phone” & /phacks Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks 🔋 Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME 🔋 “My battery does not last a full day anymore” & /phacks Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks ♻ Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/
OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME ♻ Web Performance is not a zero-sum game & /phacks Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/
Nicolas Goutay Web Performance Evangelist Theodo Twitter: @phacks & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks An oral history of web development
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks At the beginning, there was static (1991–)
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks At the beginning, there was static (1991–) hey could you pass me that index.html file you got there?
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT hey could you pass me that index.html file you got there? sure thing there you go A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & At the beginning, there was static (1991–) /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB At the beginning, there was static (1991–) hey could you pass me that index.html file you got there? DEVELOPMENT sure thing there you go A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks thanks
OUTLINE At the beginning, there was static (1991–) WHY PERFORMANCE MATTERS hey could you pass me that index.html file you got there? AN ORAL HISTORY OF WEB DEVELOPMENT sure thing there you go A HISTORY RENDERING ON THE WEB thanks THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME Pros & /phacks 👍 Dead simple 👍 Super fast
OUTLINE At the beginning, there was static (1991–) WHY PERFORMANCE MATTERS hey could you pass me that index.html file you got there? AN ORAL HISTORY OF WEB DEVELOPMENT sure thing there you go A HISTORY RENDERING ON THE WEB thanks THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Pros Cons 👍 Dead simple 👍 Super fast 👎 Not dynamic
OUTLINE At the beginning, there was static (1991–) WHY PERFORMANCE MATTERS hey could you pass me that index.html file you got there? AN ORAL HISTORY OF WEB DEVELOPMENT sure thing there you go A HISTORY RENDERING ON THE WEB thanks THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Pros Cons 👍 Dead simple 👍 Super fast 👎 Not dynamic Used by 🦖 The very first web page ⚙ Hugo, Jekyll…
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Server Rendering (late 1990s–)
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Server Rendering (late 1990s–) hey i would like to read the latest comments on that article
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT hey i would like to read the latest comments on that article yeah give me a few seconds to look them up A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & Server Rendering (late 1990s–) /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT hey i would like to read the latest comments on that article yeah give me a few seconds to look them up A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & Server Rendering (late 1990s–) /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT Server Rendering (late 1990s–) hey i would like to read the latest comments on that article yeah give me a few seconds to look them up A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks here they are
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT Server Rendering (late 1990s–) hey i would like to read the latest comments on that article yeah give me a few seconds to look them up A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS here they are PERFORMANCE IS A LONG GAME thanks & /phacks
Server Rendering (late 1990s–) OUTLINE WHY PERFORMANCE MATTERS hey i would like to read the latest comments on that article AN ORAL HISTORY OF WEB DEVELOPMENT yeah give me a few seconds to look them up A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS here they are PERFORMANCE IS A LONG GAME thanks Pros & /phacks 👍 First Paint is interactive 👍 Does not depend on user’s device
Server Rendering (late 1990s–) OUTLINE WHY PERFORMANCE MATTERS hey i would like to read the latest comments on that article AN ORAL HISTORY OF WEB DEVELOPMENT yeah give me a few seconds to look them up A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS here they are PERFORMANCE IS A LONG GAME thanks Pros & /phacks 👍 First Paint is interactive 👍 Does not depend on user’s device Cons 👎 Slow First Paint 👎 App does not feel “snappy”
Server Rendering (late 1990s–) OUTLINE WHY PERFORMANCE MATTERS hey i would like to read the latest comments on that article AN ORAL HISTORY OF WEB DEVELOPMENT yeah give me a few seconds to look them up A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS here they are PERFORMANCE IS A LONG GAME thanks Pros & /phacks 👍 First Paint is interactive 👍 Does not depend on user’s device Cons 👎 Slow First Paint 👎 App does not feel “snappy” Used by ⚙ Django, Rails, Symfony…
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Client-Side Rendering (2014–)
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Client-Side Rendering (2014–) oooh this trip-planning app looks cool can i use it?
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT oooh this trip-planning app looks cool can i use it? you know what why don’t you take all the raw materials and figure it out yourself A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & Client-Side Rendering (2014–) /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT Client-Side Rendering (2014–) oooh this trip-planning app looks cool can i use it? you know what why don’t you take all the raw materials and figure it out yourself A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks wow rude but ok
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT Client-Side Rendering (2014–) oooh this trip-planning app looks cool can i use it? you know what why don’t you take all the raw materials and figure it out yourself A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks wow rude but ok
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT Client-Side Rendering (2014–) oooh this trip-planning app looks cool can i use it? you know what why don’t you take all the raw materials and figure it out yourself A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS wow rude but ok PERFORMANCE IS A LONG GAME it works! & /phacks
Client-Side Rendering (2014–) OUTLINE WHY PERFORMANCE MATTERS oooh this trip-planning app looks cool can i use it? AN ORAL HISTORY OF WEB DEVELOPMENT you know what why don’t you take all the raw materials and figure it out yourself A HISTORY RENDERING ON THE WEB wow rude but ok THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME it works! Pros & /phacks 👍 App-like User experience 👍 API-first Dev experience
Client-Side Rendering (2014–) OUTLINE WHY PERFORMANCE MATTERS oooh this trip-planning app looks cool can i use it? AN ORAL HISTORY OF WEB DEVELOPMENT you know what why don’t you take all the raw materials and figure it out yourself A HISTORY RENDERING ON THE WEB wow rude but ok THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME it works! Pros & /phacks 👍 App-like User experience 👍 API-first Dev experience Cons 👎 Slow First Paint 👍 Slow Time to Interactive
Client-Side Rendering (2014–) OUTLINE WHY PERFORMANCE MATTERS oooh this trip-planning app looks cool can i use it? AN ORAL HISTORY OF WEB DEVELOPMENT you know what why don’t you take all the raw materials and figure it out yourself A HISTORY RENDERING ON THE WEB wow rude but ok THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME it works! Pros & /phacks 👍 App-like User experience 👍 API-first Dev experience Cons 👎 Slow First Paint 👍 Slow Time to Interactive Used by ⚙ Angular, React, Vue…
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks CSR with Rehydration (2016–)
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks CSR with Rehydration (2016–) i heard they worked on performance on this trip-planning app
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT i heard they worked on performance on this trip-planning app they did! here it is: i’m building the page very quicky… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & CSR with Rehydration (2016–) /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT i heard they worked on performance on this trip-planning app they did! here it is: i’m building the page very quicky… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & CSR with Rehydration (2016–) /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT CSR with Rehydration (2016–) i heard they worked on performance on this trip-planning app they did! here it is: i’m building the page very quicky… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile!
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks CSR with Rehydration (2016–) and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile!
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB CSR with Rehydration (2016–) and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile! DEVELOPMENT sweet! i can see the content first… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB CSR with Rehydration (2016–) and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile! DEVELOPMENT sweet! i can see the content first… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB CSR with Rehydration (2016–) and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile! DEVELOPMENT sweet! i can see the content first… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks and now click around!
CSR with Rehydration (2016–) OUTLINE WHY PERFORMANCE MATTERS and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile! AN ORAL HISTORY OF WEB DEVELOPMENT sweet! i can see the content first… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS and now click around! PERFORMANCE IS A LONG GAME Pros & /phacks 👍 App-like User experience 👍 Fast First Paint
CSR with Rehydration (2016–) OUTLINE WHY PERFORMANCE MATTERS and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile! AN ORAL HISTORY OF WEB DEVELOPMENT sweet! i can see the content first… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS and now click around! PERFORMANCE IS A LONG GAME Pros & /phacks 👍 App-like User experience 👍 Fast First Paint Cons 👎 Slow Time to Interactive 👎 Possible “rage clicks”
CSR with Rehydration (2016–) OUTLINE WHY PERFORMANCE MATTERS and now send you the raw materials to build it yourself BUT now you have a nice picture of the finished page to look at meanwhile! AN ORAL HISTORY OF WEB DEVELOPMENT sweet! i can see the content first… A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS and now click around! PERFORMANCE IS A LONG GAME Pros & /phacks 👍 App-like User experience 👍 Fast First Paint Cons 👎 Slow Time to Interactive 👎 Possible “rage clicks” Used by ⚙ NextJS, NuxtJS
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks CSR with Prerendering (2018–)
OUTLINE CSR with Prerendering (2018–) WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks
OUTLINE CSR with Prerendering (2018–) WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request!
OUTLINE CSR with Prerendering (2018–) WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request! RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks no change for you though, you still get your picture and the raw materials
OUTLINE CSR with Prerendering (2018–) WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request! RENDERING ON THE WEB THE PROMISES OF GATSBYJS no change for you though, you still get your picture and the raw materials PERFORMANCE IS A LONG GAME sweet! i can see the content first… & /phacks
OUTLINE CSR with Prerendering (2018–) WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request! RENDERING ON THE WEB THE PROMISES OF GATSBYJS no change for you though, you still get your picture and the raw materials PERFORMANCE IS A LONG GAME sweet! i can see the content first… & /phacks
OUTLINE CSR with Prerendering (2018–) WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request! RENDERING ON THE WEB THE PROMISES OF GATSBYJS no change for you though, you still get your picture and the raw materials PERFORMANCE IS A LONG GAME sweet! i can see the content first… and now click around! & /phacks
CSR with Prerendering (2018–) OUTLINE WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request! DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS no change for you though, you still get your picture and the raw materials PERFORMANCE IS A LONG GAME sweet! i can see the content first… and now click around! Pros & /phacks 👍 App-like User experience 👍 Fast First Paint 👍 No need for a backend
CSR with Prerendering (2018–) OUTLINE WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request! DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS no change for you though, you still get your picture and the raw materials PERFORMANCE IS A LONG GAME sweet! i can see the content first… and now click around! Pros & /phacks 👍 App-like User experience 👍 Fast First Paint 👍 No need for a backend Cons 👎 Dynamic content not available in the preview
CSR with Prerendering (2018–) OUTLINE WHY PERFORMANCE MATTERS hmm they worked on performance yet again? AN ORAL HISTORY OF WEB yeah they figured out that content didn’t change much so now we build only once, when content changes. No more rebuilding on each request! DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS no change for you though, you still get your picture and the raw materials PERFORMANCE IS A LONG GAME sweet! i can see the content first… and now click around! Pros & /phacks 👍 App-like User experience 👍 Fast First Paint 👍 No need for a backend Cons 👎 Dynamic content not available in the preview Used by ⚙ GatsbyJS, Vuepress
OUTLINE Rendering on the Web is a spectrum WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT A HISTORY RENDERING ON THE WEB THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks 😍 😍 😍 Source: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks The promises of GatsbyJS
What is GatsbyJS? OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS Static Site Generators (SSGs) Progressive Web Apps PWAs) Jekyll, Hugo, Middleman React, Vue, Angular 😎 Build performant websites 📱 App-like, snappy experience 📟 Little to no backend 🏗 Easily reuse code & components 🎨 Off-the-shelf themes ✨ Build interactive websites WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks
OUTLINE What is GatsbyJS? WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT Static Progressive Web Apps GatsbyJS THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME 😎 Build performant websites 📟 Little to no backend 🎨 Off-the-shelf themes 📱 App-like, snappy experience 🏗 Easily reuse code & components ✨ Build interactive websites & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks What is GatsbyJS?
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks What is GatsbyJS?
OUTLINE What is GatsbyJS? WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks The SSG part relies on NodeJS and GraphQL
OUTLINE What is GatsbyJS? WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks The SSG part relies on NodeJS and GraphQL The SPA part is a fully-featured React application
OUTLINE What is GatsbyJS? WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks 🛠 Static or weakly dynamic data at build time
OUTLINE What is GatsbyJS? WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS 🛠 Static or weakly dynamic data at build time WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME 0 Highly dynamic data at runtime & /phacks
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks Any datasource
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB Any datasource DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks GraphQL interface
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB Any datasource DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS GraphQL interface PERFORMANCE IS A LONG GAME React components & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks Gatsby as a Static Site Generator: Gatsby Plugins
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks Gatsby as a Static Site Generator: Gatsby Plugins
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks https://phacks.github.io/showcase-for-discogs/ https://github.com/phacks/showcase-for-discogs
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks https://phacks.github.io/showcase-for-discogs/ https://github.com/phacks/showcase-for-discogs
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks Gatsby as a Static Site Generator: Gatsby Plugins
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks Gatsby as a Static Site Generator: Gatsby Plugins
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks Gatsby as a Static Site Generator: Gatsby Plugins
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks Gatsby as a Static Site Generator: Gatsby Plugins
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks 🔌 Custom plugins
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT 🔌 Custom plugins 🔐 Public and private APIs. THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT 🔌 Custom plugins 🔐 Public and private APIs. ⏱ A few hours (but your mileage may vary) THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks
OUTLINE Gatsby as a Static Site Generator: Gatsby Plugins WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT 🔌 Custom plugins 🔐 Public and private APIs. ⏱ A few hours (but your mileage may vary) THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks https://github.com/phacks/gatsby-source-meetup/ https://www.gatsbyjs.org/docs/creating-a-source-plugin/
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks “I designed Gatsby with the goal that when using it, it’d be really hard to build a slow site” Kyle Matthews, GatsbyJS creator
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks GatsbyJS implements state-of-the-art performance optimizations so that you don’t have to
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT GatsbyJS implements state-of-the-art performance optimizations so that you don’t have to THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks 📸 Automatic image optimizations
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT GatsbyJS implements state-of-the-art performance optimizations so that you don’t have to THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks 📸 Automatic image optimizations ✂ Built-in code and data splitting
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT GatsbyJS implements state-of-the-art performance optimizations so that you don’t have to THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME & /phacks 📸 Automatic image optimizations ✂ Built-in code and data splitting 🔗 Link prefetching
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT GatsbyJS implements state-of-the-art performance optimizations so that you don’t have to THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME 📸 Automatic image optimizations ✂ Built-in code and data splitting 🔗 Link prefetching 🏎 Native lazy-loading & /phacks
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT GatsbyJS implements state-of-the-art performance optimizations so that you don’t have to THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME 📸 Automatic image optimizations ✂ Built-in code and data splitting 🔗 Link prefetching 🏎 Native lazy-loading 🏗 Inlined critical CSS & /phacks
OUTLINE Gatsby as a React Compiler: Performance optimizations WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT GatsbyJS implements state-of-the-art performance optimizations so that you don’t have to THE PROMISES OF GATSBYJS WHAT IS GATSBYJS? GATSBY PLUGINS PERFORMANCE OPTIMIZATIONS PERFORMANCE IS A LONG GAME 📸 Automatic image optimizations ✂ Built-in code and data splitting 🔗 Link prefetching 🏎 Native lazy-loading 🏗 Inlined critical CSS 8 Offline support with Service Workers & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME & /phacks Performance is a long game
OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/
OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS Google Ad Manager costs 450ms PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/
OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME Google Ad Manager costs 450ms The YouTube video player costs 700ms THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/
OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME Google Ad Manager costs 450ms The YouTube video player costs 700ms THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & Google Maps widget costs 200ms /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/
OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME Google Ad Manager costs 450ms The YouTube video player costs 700ms THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Google Maps widget costs 200ms HotJar session replay costs 90ms & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/
OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME Google Ad Manager costs 450ms The YouTube video player costs 700ms THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Google Maps widget costs 200ms HotJar session replay costs 90ms Facebook Share widget costs 160ms & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT “Every 100KB of compressed JS results in a 34 second increase in Time to Interactive on a 3G connection” Paul Calvano THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & JavaScript bloat has an impact /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT JavaScript bloat has an impact “Every 100KB of compressed JS results in a 34 second increase in Time to Interactive on a 3G connection” Paul Calvano THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Source: https://twitter.com/paulcalvano/status/1179192810727186433
OUTLINE Open Source performance auditing tools WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks WebPageTest
OUTLINE Open Source performance auditing tools WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB WebPageTest DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Tests on real devices (desktop, mobile) in several locations & /phacks
OUTLINE Open Source performance auditing tools WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB WebPageTest DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Tests on real devices (desktop, mobile) in several locations Access to filmstrips and videos of the website’s loading & /phacks
OUTLINE Open Source performance auditing tools WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB WebPageTest DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Tests on real devices (desktop, mobile) in several locations Access to filmstrips and videos of the website’s loading & /phacks Full Waterfall graph and HTTP requests infos to dive deeper
Performance audit automation OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks 🔬 Recurrent and automated
Performance audit automation OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME 🔬 Recurrent and automated 🗺 Represent the diversity of our users THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Enters Falco
Falco, our WebPageTest runner OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks 🔬 Multiple times a day in many conditions
Falco, our WebPageTest runner OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks 🔬 Multiple times a day in many conditions 📈 Evolution of performance metrics
Falco, our WebPageTest runner OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks 🔬 Multiple times a day in many conditions 📈 Evolution of performance metrics 👥 Invite the whole team
Falco, our WebPageTest runner OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS 🔬 Multiple times a day in many conditions 📈 Evolution of performance metrics 👥 Invite the whole team ENTERS FALCO 🗺 & /phacks Individual URLs or entire user journeys
Falco, our WebPageTest runner OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS 🔬 Multiple times a day in many conditions 📈 Evolution of performance metrics 👥 Invite the whole team ENTERS FALCO & /phacks 🗺 Individual URLs or entire user journeys 📸 Compare WebPageTest results between audits
OUTLINE Falco, our WebPageTest runner WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks ❤ Falco will be Open Source
OUTLINE Falco, our WebPageTest runner WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING ❤ Falco will be Open Source OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Starting now & /phacks
OUTLINE WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Falco, our WebPageTest runner
OUTLINE Falco, our WebPageTest runner WHY PERFORMANCE MATTERS AN ORAL HISTORY OF WEB DEVELOPMENT THE PROMISES OF GATSBYJS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks https://github.com/theodo/falco https://getfal.co
Thank you! Slides will be available later today on my Twitter: @phacks Fonts used for this presentation: • Faune (headers) by Alice Savoie/CNAP • Overpass (outline) by Delve Fonts • Inter (body copy) by Rasmus Andersson • IBM Plex Mono (monospace) by IBM & /phacks
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:
By the end of the talk, the audience will understand why GatsbyJS may be the next game-changer in terms of performance & DX, when to start with (or migrate over to) GatsbyJS, and how to seamlessly integrate it into their own technical context.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.