From the course: Vanilla JavaScript: Web Performance Optimization APIs

Measuring our websites - JavaScript Tutorial

From the course: Vanilla JavaScript: Web Performance Optimization APIs

Start my 1-month free trial

Measuring our websites

“

- [Instructor] It's time to use the performance APIs in our project. So if you have a website, you can add the usage of these APIs, measure, monitor from your server, and create real user metrics. And to see this in action, we are going to open this in a server. I'm going to use a Node.js-based server, but any server will work. In this case, I already have Node.js installed. I'm in a Mac, so I'm going to request root permission. If you are in Windows, you don't need to add sudo, npm install -g serve. This is going to install a very simple web server. Now that it's done, I'm going to type serve, dot, that's the current folder. And it will open then my current project in localhost:5000. And this is our project. It's Explore California, it's a website. It has some API calls here. So if I re-load, you can see that the weather is coming through some AJAX code through a web service. And we're going to our web performance API support for this. So I'm going to the code now. I'm going to open app.js, that is currently empty. So here, we are going to add some logic so we can start doing some logs on performance data. So I'm going to create a function. Let's call this function perf. That we receive information that we will later send to the server. Right now we are going to just log the information in the console. We're going to see the type of measurement that we are receiving, the name and some data that we want to show. Later, we are going to send the data to a server. That's not the purpose of this course. We are going to learn the API, first. So for now we are just going to do a console.log. I'm going to use a special version of console.log that will let us have several colors. So I'm going to use a template script with a backtick ES6. And I'm going to say percentage c. That means here I'm going to apply one string with one css style. So I'm going to take the type, the type that we are receiving as an argument. Then we can add the color here, another percentage c, so another css declaration for that, the name, and then we are going to select, for example, a pipe and another variable here that is going to be the data. And I need to set three css declarations. So for example, we can say that I want the color to be red; for the second one I want the color to be green; and for the fourth one, the color will be silver. This is just a special console.log so we can see three different values in three different colors in one line. And now to see if this is working, we can start listening to the onload event. And just to see if this is working, we are going to call our perf function, and we are going to say this is the onload, event, no data. Also for the data, we can make it optional. So if there is no data that we want to show here, we can verify the data is there, if not, we are going to use just an empty string, like that. Let's see this in action. We're going to refresh. And we're going to open the Tools in the console. If you are using Chrome, it's in the menu, More Tools, Developer Tools. On different browsers, it's in a similar place. And here, we can see that our logger is currently working. Now it's time to add more information here. So for example, we are going to start working with the navigation timing API.

Contents