Speed up your Gatsby app in a day (Byteconf React 2020 talk)
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 😊
Written by Henrique Doro