Hey y'all, and welcome to the ultimate guide for view performance. In this course, we're diving into performance optimization for view applications. Before we get into the specific techniques though, let's understand what performance means and why it matters. Performance in web applications covers several key aspects.
Most visibly, it's about how fast your page loads. According to the research linked in an article that I've left in the description below, E-commerce sites that load in one second or less average three times higher conversion rate than those that take three or more seconds to load. Search engines also take page load speed into account when ranking them for search engine results. That means the faster your page is, the more likely it is to rank higher.
Need proof? 65 seconds. Finally, page load speed also inversely affects bounce rate. The longer it takes to load, the more likely the users are to bounce.
In fact, the probability of bouncing increases 32% as the page load time goes from one second to three seconds. So all this to say, every second counts. But it's not only about initial page load. Performance also means how smoothly your app responds to user interactions.
Does your infinite scroll stutter? Does your search input lag? These micro delays can add up to a frustrating user experience. In this course, you'll learn strategies and solutions for optimizing the speed for both cases.
That is for the initial page load, as well as the speed of your site responding to user interactions. So, you'll learn things like smart component design patterns, that prevent unnecessary re-renders, code splitting strategies to reduce the initial bundle size, advanced techniques like lazy hydration and data caching, and we'll also use plenty of tools along the way to identify and fix performance bottlenecks. Throughout the course, I'll demonstrate each concept with practical examples. After all, there's no better way to learn this stuff than by looking at real code.
All the code for this course can be found in the description below, and it includes both a Nuxt app and a Vue application, so that when a strategy differs between these two types of projects, we'll explore the solution in both contexts. This means if you want to follow along, you'll need to run both applications. I recommend having a tab dedicated to the Nuxt app inside of Visual Studio Code, and then another tab dedicated to the Vue app. So you just CD into the particular app you want to run and then do npm run dev to start up that app's dev server.
Finally, within each of these applications, there is a page for both the beginning and the end of each lesson. Both apps have the page for both. So for our tree shaking lesson, for example, there is a to dash tree shaking begin file inside of the next directory. the next pages directory, and a corresponding end file.
Likewise, in the view application, inside of source and inside of views, there are the same files there as well. So you can follow along with each lesson directly inside of the begin files, and then inside of the end files, you'll see our official solution. In the browser, you'll be able to keep up with which app is which with this handy banner at the very top of each app. It reminds you that this is the next application when you see this purplish color.
And when you see the pinkish color, this will remind you you're looking at the view application. And finally, in both apps, there is a main navigation menu in order to move between the begin and end output for each lesson. All right, that's it. We are ready to start.
And in the next lesson, we'll dive into our first technique, tree shaking.