Network Performance

In this lesson we'll learn

Interesting facts about page load time

Walmart and Amazon both observed a 1% increase in earnings for every 100 milliseconds of improved webpage speed.

Yahoo saw a 9% increase in traffic to every 400 milliseconds of webpage speed improvement.

Google loses 20% of their traffic for every additional 100 milliseconds it takes for a page to load.

Google Marketing

In this lesson, we'll learn about

The Network Waterfall

Let's talk about the life of a network request.

Network performance isn't everything!

We spend so much energy compressing and combining JavaScript into dense bundles so they travel across the network faster! But that's not the whole story.

This entire article is worth a read but the TL;DR is that parse time is a huge performance problem, especially for mobile devices.

JS parse cost

JS parse cost

Measuring real user performance

Why measure performance from real users?

First we had getTime

        const start = new Date().getTime();
        for (let i = 0; i < 100000; i++) {
          // Do nothing
        const end = new Date().getTime();
        console.log(end - start);

Then we got console.time

        for (let i = 0; i < 100000; i++) {
          // Do nothing

Now we have performance mark and measure!

        for (let i = 0; i < 1000000000; i++) {
          // Do nothing
        performance.measure("Frontend Masters Chrome Devtools", "Start", "End");

You can measure so many things using the performance API

        const resources = performance.getEntriesByType("resource");
        const paints = performance.getEntriesByType("paint");
        const navigations = performance.getEntriesByType("navigation");

Next Lesson

Now that we understand Network and page load performance, let's dive into on page performance in the next lesson