From 0fdc2c80b28e4cf335720422a41e928909128f52 Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Wed, 4 Mar 2020 13:05:26 -0500 Subject: [PATCH 1/6] Draft challenge 10 of 100daysofgatsby --- docs/blog/100days/performance/index.md | 45 ++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 docs/blog/100days/performance/index.md diff --git a/docs/blog/100days/performance/index.md b/docs/blog/100days/performance/index.md new file mode 100644 index 0000000000000..e863a9ce8fa07 --- /dev/null +++ b/docs/blog/100days/performance/index.md @@ -0,0 +1,45 @@ +--- +title: Challenge 8 - Keep Your Gatsby Site Blazing Fast +date: 2020-03-05 +author: "Hashim Warren" +excerpt: "Learn how to audit your site for performance issues and provide common fixes" +tags: ["learning-to-code", "contest", "100-Days-of-Gatsby", "accessibility"] +--- + +_Gatsby was named the [#1 new technology to learn in 2020](https://www.cnbc.com/2019/12/02/10-hottest-tech-skills-that-could-pay-off-most-in-2020-says-new-report.html)!_ + +_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](/docs/themes/building-themes/)._ + +_Learn more about [#100DaysOfGatsby here](/blog/100days)!_ + +## 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 invite you to add to your site can have a positive impact on your site’s rankings in search engines, and the ability of everyone to consume your content. + +If you embrace and master all of the resources we have shared about SEO, accessibility, and performance 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](/docs/audit-with-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](https://gatsbyjs.com/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](docs/optimizing-site-performance-with-guessjs/), and install [the Gatsby plugin](/packages/gatsby-plugin-guess-js). + +#### C. CDN for Media Assets + +Rich media like images can have a negative impact on your build times. Consider offloading the processing and hosting of your images to a specialized CDN, like Cloudinary. Experiment with their [two new Gatsby plugins](/blog/2020-01-12-faster-sites-with-optimized-media-assets/) to see if it has a positive impact on your dev workflow and the browsing experience for your visitors + +#### JavaScript Concerns + +We believe [a Gatsby site is better with JavaScript](/blog/2020-01-30-why-gatsby-is-better-with-javascript/#performance) because it enables performance features like intelligent preloading, like we mentioned above. However, if you’d like to experiment changing the React runtime to alternative smaller runtimes like Preact, then [there’s a plugin for that](/packages/gatsby-plugin-preact/). +#### What to Do If You Need Help + +If you get stuck during the challenge, you can ask for help from the [Gatsby community](/contributing/community/) and the [AskGatsbyJS](https://twitter.com/AskGatsbyJS) Twitter account. You can find fellow Gatsby Developers on [Discord](https://discordapp.com/invite/gatsby), [Reddit](https://www.reddit.com/r/gatsbyjs/), [Spectrum](https://spectrum.chat/gatsby-js), and [Dev](https://dev.to/t/gatsby). + +The subreddits for [React](https://www.reddit.com/r/reactjs/) and [Web Development](https://www.reddit.com/r/webdev/) are also good resources to discover and share web performance best practices. From 567fad588cf4be8db71dbc891830cb7cc0679672 Mon Sep 17 00:00:00 2001 From: gatsbybot Date: Wed, 4 Mar 2020 18:08:15 +0000 Subject: [PATCH 2/6] chore: format --- docs/blog/100days/performance/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/blog/100days/performance/index.md b/docs/blog/100days/performance/index.md index e863a9ce8fa07..e5eedf657b3db 100644 --- a/docs/blog/100days/performance/index.md +++ b/docs/blog/100days/performance/index.md @@ -23,9 +23,10 @@ Let’s get started! ### Site Performance Resources #### A. Monitor Site Performance -[Learn about Lighthouse](/docs/audit-with-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](https://gatsbyjs.com/cloud). +[Learn about Lighthouse](/docs/audit-with-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](https://gatsbyjs.com/cloud). #### B. Intelligent Preloading @@ -37,7 +38,8 @@ Rich media like images can have a negative impact on your build times. Consider #### JavaScript Concerns -We believe [a Gatsby site is better with JavaScript](/blog/2020-01-30-why-gatsby-is-better-with-javascript/#performance) because it enables performance features like intelligent preloading, like we mentioned above. However, if you’d like to experiment changing the React runtime to alternative smaller runtimes like Preact, then [there’s a plugin for that](/packages/gatsby-plugin-preact/). +We believe [a Gatsby site is better with JavaScript](/blog/2020-01-30-why-gatsby-is-better-with-javascript/#performance) because it enables performance features like intelligent preloading, like we mentioned above. However, if you’d like to experiment changing the React runtime to alternative smaller runtimes like Preact, then [there’s a plugin for that](/packages/gatsby-plugin-preact/). + #### What to Do If You Need Help If you get stuck during the challenge, you can ask for help from the [Gatsby community](/contributing/community/) and the [AskGatsbyJS](https://twitter.com/AskGatsbyJS) Twitter account. You can find fellow Gatsby Developers on [Discord](https://discordapp.com/invite/gatsby), [Reddit](https://www.reddit.com/r/gatsbyjs/), [Spectrum](https://spectrum.chat/gatsby-js), and [Dev](https://dev.to/t/gatsby). From ac96a580ca2c5a83e6a4af3cf0d3587ccb180e2b Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Wed, 4 Mar 2020 13:14:09 -0500 Subject: [PATCH 3/6] Fix challenge number --- docs/blog/100days/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/100days/performance/index.md b/docs/blog/100days/performance/index.md index e5eedf657b3db..e37f82fab544c 100644 --- a/docs/blog/100days/performance/index.md +++ b/docs/blog/100days/performance/index.md @@ -1,5 +1,5 @@ --- -title: Challenge 8 - Keep Your Gatsby Site Blazing Fast +title: Challenge 10 - Keep Your Gatsby Site Blazing Fast date: 2020-03-05 author: "Hashim Warren" excerpt: "Learn how to audit your site for performance issues and provide common fixes" From b9e703805a3b706d2ad2e3bce79024a39f13319a Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Wed, 4 Mar 2020 17:16:26 -0500 Subject: [PATCH 4/6] Fix typos and add addititional links. --- docs/blog/100days/performance/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/blog/100days/performance/index.md b/docs/blog/100days/performance/index.md index e37f82fab544c..8992c539a26a0 100644 --- a/docs/blog/100days/performance/index.md +++ b/docs/blog/100days/performance/index.md @@ -14,9 +14,9 @@ _Learn more about [#100DaysOfGatsby here](/blog/100days)!_ ## 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 invite you to add to your site can have a positive impact on your site’s rankings in search engines, and the ability of everyone to consume your content. +Over the last few weeks we’ve helped you get your site production-ready by focusing on [SEO](/blog/100days/seo/) and [accessibility](/blog/100days/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 about SEO, accessibility, and performance you’ll create web projects that are noticeably faster, more usable, and will help your clients reach their business goals! +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! @@ -34,11 +34,11 @@ By leveraging Google Analytics data and machine learning, Guess.js is able to de #### C. CDN for Media Assets -Rich media like images can have a negative impact on your build times. Consider offloading the processing and hosting of your images to a specialized CDN, like Cloudinary. Experiment with their [two new Gatsby plugins](/blog/2020-01-12-faster-sites-with-optimized-media-assets/) to see if it has a positive impact on your dev workflow and the browsing experience for your visitors +Rich media, like images can have a negative impact on your build times. Consider offloading the processing and hosting of your images to a specialized CDN, like Cloudinary. Experiment with their [two new Gatsby plugins](/blog/2020-01-12-faster-sites-with-optimized-media-assets/) to see if it has a positive impact on your dev workflow and the browsing experience for your visitors -#### JavaScript Concerns +#### D. JavaScript Concerns -We believe [a Gatsby site is better with JavaScript](/blog/2020-01-30-why-gatsby-is-better-with-javascript/#performance) because it enables performance features like intelligent preloading, like we mentioned above. However, if you’d like to experiment changing the React runtime to alternative smaller runtimes like Preact, then [there’s a plugin for that](/packages/gatsby-plugin-preact/). +We believe [a Gatsby site is better with JavaScript](/blog/2020-01-30-why-gatsby-is-better-with-javascript/#performance) because it enables performance features like intelligent preloading, like we 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](/packages/gatsby-plugin-preact/). #### What to Do If You Need Help From b879f7425c04da2c060bed9f0fca140c08fe7e30 Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Thu, 5 Mar 2020 06:42:52 -0500 Subject: [PATCH 5/6] Update docs/blog/100days/performance/index.md Co-Authored-By: Obinna Ekwuno --- docs/blog/100days/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/100days/performance/index.md b/docs/blog/100days/performance/index.md index 8992c539a26a0..b30d35989a7ac 100644 --- a/docs/blog/100days/performance/index.md +++ b/docs/blog/100days/performance/index.md @@ -34,7 +34,7 @@ By leveraging Google Analytics data and machine learning, Guess.js is able to de #### C. CDN for Media Assets -Rich media, like images can have a negative impact on your build times. Consider offloading the processing and hosting of your images to a specialized CDN, like Cloudinary. Experiment with their [two new Gatsby plugins](/blog/2020-01-12-faster-sites-with-optimized-media-assets/) to see if it has a positive impact on your dev workflow and the browsing experience for your visitors +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](https://cloudinary.com/). Experiment with their [two new Gatsby plugins](/blog/2020-01-12-faster-sites-with-optimized-media-assets/) to see if it has a positive impact on your dev workflow and the browsing experience for your visitors #### D. JavaScript Concerns From 52b1df5703dc55be1f13ad8194cef44ee3fc98ab Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Thu, 5 Mar 2020 10:57:02 -0500 Subject: [PATCH 6/6] Remove "first person" as per style guide --- docs/blog/100days/performance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/100days/performance/index.md b/docs/blog/100days/performance/index.md index b30d35989a7ac..507d22316d48e 100644 --- a/docs/blog/100days/performance/index.md +++ b/docs/blog/100days/performance/index.md @@ -38,7 +38,7 @@ Rich media like images, can have a negative impact on your build times when not #### D. JavaScript Concerns -We believe [a Gatsby site is better with JavaScript](/blog/2020-01-30-why-gatsby-is-better-with-javascript/#performance) because it enables performance features like intelligent preloading, like we 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](/packages/gatsby-plugin-preact/). +[A Gatsby site is better with JavaScript](/blog/2020-01-30-why-gatsby-is-better-with-javascript/#performance) 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](/packages/gatsby-plugin-preact/). #### What to Do If You Need Help