 JavaScript is essential to the modern web, but JavaScript does take time to load, parse, and execute, and this can make your site slow. Let's see why. When the browser sees this script tag, it asks your server for a script named magic.js. Your server sends magic.js to the browser. The browser then needs to analyze the code. That's called parsing. Once the code has been parsed, the browser runs it. That's called executing. All of this loading, parsing, and executing takes time, and if your scripts are large or if you use a lot of them, that time adds up fast. Meanwhile, the browser is dealing with all that JavaScript instead of displaying content for the user. Let's see how to avoid this problem. Here are three levels of goodness. Good. Don't let scripts block content. As in, don't make the browser load, parse, and execute scripts before visible content loads. Better. When you can, load those scripts while visible content is loading and tell the browser it's OK to parse and execute them later. Extreme. When you can, make it so most scripts don't even start to load until visible content is complete. First, the first level of goodness. Don't let scripts block content. When the browser receives a script tag, normally it won't do anything else until it loads, parses, and executes that script. When that script tag is in the head, this happens before it loads or shows anything in the body. In other words, before it shows any visible content. The process the browser uses to display visible content is called rendering. When a script blocks rendering, we say it's render blocking. Let's look for render blocking scripts in our site. We open up DevTools, and then load up the site. We click on Elements. Right near the top is the head. We click on the head to expand it. And look at that. We've got five scripts right in the head. In the Network tab, you can see that these scripts are render blocking. Look at those five orange bars in the waterfall. Those are scripts. Notice that they load fully before images even start to load. Now, some scripts need to load in the head. Sometimes jQuery does, but most scripts don't. Index.js is really small, and it looks to me like it should execute early. So let's copy its JavaScript right into the HTML. That saves a request. Let's leave jQuery where it is, too, though it should be minified. But do we really need to load that chat JavaScript before a visible content or this tracking script? I don't think so. So next, we'll take these other large scripts out of the head and put them in the body. Where should they go? Well, why not put them at the bottom? Wouldn't they load last? The bottom is good, but unfortunately, even if you put scripts at the bottom, browsers will tend to load them early anyway. So let's go to our second level of goodness, using the async and defer attributes. Async tells the browser that the script can be executed asynchronously. This means, while the script is being fetched, keep on looking at the rest of the HTML. Once the script loads, stop everything and execute it. The defer attribute does even more. Not only does the browser keep on looking at HTML while loading the script, but it waits to execute the script until after the document's been parsed. I've just added defer to every script on our site. This helps. But neither defer nor async changes the time when our scripts get loaded. You can see that they're loading concurrently with visible content delaying it. If you truly want to load scripts as late as possible, use our third extreme level of goodness. When the browser has finished loading the resources on a page, it fires the load event. Now we're going to tell the browser to wait to load scripts until that happens. Here's how to do that with jQuery. The first line binds an event handler to the load event. That event handler simply creates a new script and appends it to the DOM. It's also not hard to do without jQuery. This is the same thing. We bind an event handler to the load event. That event handler creates a new script and appends that to the DOM. Look now at how much faster our content displays. That's because most of our scripts load after visible content. Thanks for watching. See you next time. And check out our other videos for more tips to make your website even faster.