Gatsby was named the #1 new technology to learn in 2020!
To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.
Learn more about #100DaysOfGatsby here!
Make Your Site Faster Than The Competition’s
Over the last few weeks we’ve helped you get your site production-ready by focusing on SEO and accessibility. This week we purposely saved “performance” for last, because the features we are inviting you to add to your site can have a positive impact on your search engine rankings (SEO), and your user's ability to consume your content (accessiblity).
If you embrace and master all of the resources we have shared in the last three weeks, you’ll create web projects that are noticeably faster, more usable, and will help your clients reach their business goals!
Let’s get started!
Site Performance Resources
A. Monitor Site Performance
Learn about Lighthouse an open source tool that audits your site’s performance on mobile and desktop clients. Lighthouse is built in Chrome DevTools and can be run on demand.
You can also automatically run Lighthouse after every build if you use Gatsby Cloud.
B. Intelligent Preloading
By leveraging Google Analytics data and machine learning, Guess.js is able to determine which pages a user is most likely to navigate to from the current page and only preload those resources. Thus, there are fewer network requests which improves performance on slower networks. Learn more about Guess.js, and install the Gatsby plugin.
C. CDN for Media Assets
Rich media like images, can have a negative impact on your build times when not handled properly. Consider offloading the processing and hosting of your images to a specialized CDN, like Cloudinary. Experiment with their two new Gatsby plugins to see if it has a positive impact on your dev workflow and the browsing experience for your visitors
D. JavaScript Concerns
A Gatsby site is better with JavaScript because it enables performance features like the "intelligent preloading" that is mentioned above. However, if you’d like to experiment with changing the React runtime in your project to alternative smaller runtimes like Preact, then there’s a plugin for that.
What to Do If You Need Help
If you get stuck during the challenge, you can ask for help from the Gatsby community and the AskGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, and Dev.
The subreddits for React and Web Development are also good resources to discover and share web performance best practices.