Speed up your Gatsby app in a day (Byteconf React 2020 talk)
Working on it
Posted on May 2, 2020
Last update March 22, 2021
You can find the slides here. And the video for the talk on YouTube is below:
Unfortunately, I didn't finish the written version yet 😥 I'll update this post as I finish polishing my notes (they're very messy and I couldn't automatically generate a transcription from the video).
Resources mentioned in the talk & more
- Tools for testing
- Google Lighthouse
- WebPageTest
- Pingdom tools
- Google PageSpeed Insights - runs Google Lighthouse and provides real world data through Chrome User Experience Report
- Why care about performance
- Why Performance Matters, by Google Developers
- Gatsby Low Tech Starter, by Mathieu Dutour
- Location, Privilege and Performant Websites, by Stephanie Stimac
- Gatsby performance benchmarks - 922 Gatsby sites tested with Google Lighthouse
- Making Google Fonts faster by Sia Karamalegos
- Create a Medium like Lazy Image Loading Effect Using Gatsby.js in 5 minutes by Srey Sachdev
- Lazy loading content with useInView hook and IntersectionObserver (screencast)
- The cost of Javascript in 2018
- BundlePhobia
- Speed up your Gatsby site with 1 line of code 🤯
- gatsby-plugin-preact on Gatsbyjs.org
- Gatsby recipe to implement gatsby-plugin-preact automatically
- Should I Use a Carousel
- Creating a simple slideshow / carousel app with React hooks 🥑
- The unseen performance costs of modern CSS-in-JS libraries in React apps
- Introducing the React Profiler
- Compiled CSS-in-JS
- CSS-in-JS evolution
- Stylis v4
- Theme UI
- styled-component v5 achievements
- Smart atomic CSS generation with new libraries such as FB’s stylex (not yet released, see this video, minute 28)
- Exploring the new age of CSS-in-JS by Annamalai Saravanan
- Gatsby's content duplication issues
Oh, and if you have 3 minutes to spare, you can help by giving some feedback, this was my first talk ever 😊