Project Setup

[00:00:00]
>> Speaker 1: Web performance, this is a word that gets thrown around a lot, and not everybody knows what it means or what exactly it means to be fast. It's the speed and efficiency with which your website loads, renders and responds to the interactions of the visitors. It's not just how fast the initial thing loads, it's a bunch of other kinda perceptible things about it.

[00:00:27]
If your website loads fast, but when the user clicks a button, it feels sluggish, the user will still think it's slow. And so there's a lot of different factors that come into this. A slow page could be the users waiting a long time for the page to feel like it's loaded, to feel like it's done, to feel like the user can interact.

[00:00:45]
Elements could jump around during that phase, and the user will feel like, this is unpredictable, and that makes them feel slow. Delays when the user clicks on something, the images or videos are slow to load or play, and laggy scrolls and animation. All of these things are factors that could mean why your website is slow.

[00:01:05]
But talking about that is one thing, let's experience it. So we're gonna jump in and I'm going to show off our application, Developer Stickers Online. We're gonna talk a lot about that today. This is a little sample e-commerce store that I built for this workshop, that sells some stickers that I've designed over the years.

[00:01:26]
It doesn't really sell them, but it's an e commerce site that looks fun. This is the GitHub repository that I had us pull down, now I'm just gonna quickly do NPM install to pull down the dependencies, make sure everything runs, everything should be cool. And NPM start.
>> Speaker 1: All right, so I just started this thing up, let's have a look at what this thing looks like.

[00:01:55]
So we're gonna go to localhost, port 3000 and load this thing up. And you can already tell this thing is gonna be a bit of a dog. There's a lot going on here, there's these images that are just crawling in place. There's stuff that kinda moves around, we're still loading and we're like seconds in, and this promo bar pops in.

[00:02:20]
There's ton of problems that we're going to solve as part of the course today. If we go and take a look at DevTools, this is gonna show us a lot of things that are happening. We're seeing some bad scores getting popped into the console, some bad performance scores.

[00:02:34]
We can see some things just dragging in the network, the finish being 17.8 seconds with 20 megs of resources. The performance panel is like crazy, it stretches from 0 seconds all the way out to 24 seconds with all kinds of warnings and alerts and chains. Now, we're gonna spend a bunch of time today, and we're gonna go through what everything here means.

[00:02:55]
You're gonna know how to use the performance panel, how to use the network panel, how to use all of these tools to really optimize the performance of your website and understand where things slow down.