Check out a free preview of the full Web Performance with Webpack course

The "Top Performance Issues" Lesson is part of the full, Web Performance with Webpack course featured in this preview video. Here's what you'd learn in this lesson:

Sean identifies the main cause of slow web page loading as the amount of JavaScript, CSS, and network requests on initial download.

Preview
Close

Transcript from the "Top Performance Issues" Lesson

[00:00:00]
>> Sean: What are the main top three causes of web performance issues? Now for me, when I talk about web performance, I am not talking about scroll jink, I am not talking about platform performance. At Microsoft, for the web platform team, we have program managers like Noel and Lawson who are specifically responsible for identifying areas where the platform has bugs and it needs to be faster.

[00:00:32]
But this is more in regards of what can we do to optimize our code base and so the things I'm gonna be tracking are, how long does it take your app to load? How quickly can it be interactive? I think a lot of times you will hear teams like the Chrome teams say time to interactive is a really, really, really important metric.

[00:00:53]
But the top three causes of page load performance or page load issues are the amount of Javascript that you have to download in total for your initial download. So that means any JavaScript that you're shipping for your initial page experience, the number one cause of page speed issues is that right there.

[00:01:18]
It's JavaScript, it is the most expensive resource to load on a website. The second is gonna be the amount of CSS in the same kind of way. So the total amount of CSS that you're shipping for your initial download for your initial experience to load the page, that is the number two most costly.

[00:01:39]
And then, a very distant third is gonna be the amount of concurrent network requests that you have that you're shipping. So this is gonna be based on whether or not you're using H2, HTTP/2, who's familiar with HTTP/2? So you understand that it enables you to have many more concurrent network requests.

[00:02:00]
So with H2, you get more flexibility to ship more resources. But it does not mean, for example, if you're still shipping two megabytes of JavaScript, even if you just split them out into, I don't know, 200 chunks. You're still downloading two megabytes of JavaScript and so you're not doing anything special by splitting up those network calls, besides optimizing how fast it gets to the browser.

[00:02:28]
>> Sean: So the distant third would be the amount of network requests.

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