Web Performance Fundamentals

Course Example Website

Web Performance Fundamentals

Check out a free preview of the full Web Performance Fundamentals course

The "Course Example Website" Lesson is part of the full, Web Performance Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Todd explains how to install the example website that will be used throughout the rest of the course and walks through the project files.

Preview
Close

Transcript from the "Course Example Website" Lesson

[00:00:00]
>> Now, I have an earlier version of our website that doesn't perform quite as well. And we're gonna use that for some of our demos and exercises today. This is the repository that I sent out as part of the prerequisites. So toddhgardner/perf-training-website It is a Node JS powered backend that just simulates our servers.

[00:00:26]
It drives a single index dot HTML file, there is not a whole lot of magic in this. In order to get it up and running, you need to download it or you know, clone it locally. Run npm install and then NPM start So here is what the structure of this app generally looks like.

[00:00:48]
This website, as I said, is just a single HTML file, all the files that are served as part of our web application. Are here in the public folder, we serve an index.html file and then a hand full of CSS images and Java script. That we'll be playing with over the course of this section.

[00:01:07]
The server, you don't really need to worry about as part of this, this is just simulating our web server in various different states. You can obviously look at it if you'd like and see how it works, but don't worry about getting mired in it if you don't want to.

[00:01:22]
The server itself is listening on port 3000, so if you open it up. And load it once you get it running, it looks like this, which obviously, is not ideal. There's all kinds of stuff that might not be great for our brand or our performance on this site right now that we're going to look at.

[00:01:42]
There's some nasty privacy banners and chat apps getting in the way. And the website itself is, it's just kind of just kind of slow to load. We're going to play with this, and take a look at what, how does this version of the app perform and what can we do to make it better?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now