�ݺ�ߣ

Editor's Notes

1. I’m excited to talk about a key reason why people love Gatsby: fast sites. "In fifteen minutes, I'm going to share with you enough information to get started with a performance audit, we've done dozens of these at Gatsby."
2. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
3. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
4. What Addy’s saying is that performance work without organizational basis in place will feel like this. “[After] improving performance, metrics often rapidly regress once [teams] return to feature development.” -- Addy Osmani, Web Performance Lead, Google “When companies put in the work to improve performance, perf metrics will often rapidly regress once they return to feature development.”
5. Okay, so a couple things about this talk. Also, this talk is accompanied by a new piece of documentation in the Performance section. If you’re curious to dive deeper into any of the topics I’ll be covering, that doc is a great place to star So let’s talk about what a performance process looks like. The good news is that it’s simpler than you might think.
6. Third, watch the numbers. Performance gains -- and regressions -- are sometimes unexpectedly large. You could improve performance 10 points by eliminating one script; or reduce it 10 points by accidentally pulling in extra JavaScript. Quantify so you know what moves the needle.
7. So let’s talk about what a performance process looks like. The good news is that it’s simpler than you might think.
8. First, choose a testing tools. These are both great choices.Lighthouse tends to be seen as more "canonical". Webpagetest tends to be seen as more precise.
9. Second, monitor performance on a per-commit, per-PR basis to flag regressions. Gatsby Cloud has Lighthouse performance reports built into its CI/CD. Alternately, use a third-party service -- there are tons of great options.
10. Third, watch the numbers. Performance gains -- and regressions -- are sometimes unexpectedly large. You could improve performance 10 points by eliminating one script; or reduce it 10 points by accidentally pulling in extra JavaScript. Quantify so you know what moves the needle.
11. Okay, so you’ve got your performance process in place. Now time to get down to improving performance.
12. Gatsby makes your sites fast by default. But there are lots of things you can do that will still make it less fast than it could be. We’re going to talk today about how to improve performance by finding and fixing those issues.This is a great quote by Kyle.
13. This is one way to think about performance. All performance work is telling your user’s browser how to do less work
14. Fundamentally there are five things that your browser is doing, after it reads the initial HTML. “These are the main that we’ve seen from Gatsby sites” ← use this language to frame things. Gatsby does a ton of things to optimize -- both inherent in the framework as well as a number of plugins -- Each thing the browser does is something you can optimize.
15. Typically you’re going to get the most impact from tackling the first three. But we’re going to
16. Typically you’re going to get the most impact from tackling the first three. But you won’t know for sure until you run a report.But which one of them is most important? That’s where you run your audit report. Let’s dive into a audit quickly.
17. Let’s talk about addressing third-party scripts.
18. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
19. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
20. 3rd party scripts are a black box for most developers. To improve things, you have to look into the box.
21. The first thing you should do is understand what’s going on.
22. After you have a sense for the impact of each script and all scripts, you have a number of options to explore. Maybe there’s a high-cost script that you can cleverly eliminate by using a system you already use to send the data marketing needs. Maybe one script was only being left by someone who left last last month, and you can get rid of it.
23. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
24. This is the plugin output for one of our builds on gatsbyjs.com. Seeing something like this can be a bit intimidating, so I’ll break it down here.
25. Looking at the naming structure, you can identify several “application” level chunks shared between all pages(Note: This is a pretty healthy bundle)
26. You can also see chunks that are specific to the particular “template” used to generate this page(Note: This is a pretty healthy bundle)
27. Once you’ve done
28. Laurie just gave a great talk on Gatsby image, so this is most of it! Go watch her talk and implement Gatsby image if you haven’t already!
29. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
30. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
31. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
32. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
33. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
34. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
35. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
36. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
37. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
38. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
39. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
40. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.