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

The "Performance Goals" 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 reviews goals that should be met in order to meet a high-performance application that loads fast on desktop & mobile as well as emerging markets.

Preview
Close

Transcript from the "Performance Goals" Lesson

[00:00:00]
>> Sean Larkin: So here our goals. Now, don't want you all to feel intimidated. I don't want you to think like, my gosh, I can't do this, this is such a high bar. But this is, what I've found in my research in the real-world examples today. If you want a high performance web application that not only can be fast loading on a computer.

[00:00:27]
But fast loading on a mobile device, even fast loading in emerging markets. If you're catering your product or you're trying to reach consumers in Africa, in India. In even places in China and Japan, you need to be able to have an extremely small amount of JavaScript that you shipping on your initial experience.

[00:00:51]
And from the most case I found that really, it's only about 200-300 kilobytes uncompressed to get your initial experience loaded. So, 200 KB total from all the JavaScript that you shipping, should be what you're targeting, right? And then 100 KB, uncompressed of CSS. And so those are really the really small numbers.

[00:01:16]
And I really wanna stress, do not feel intimidated. One of the things that I've talked about is that you can take and start like, let's say 500 kilobytes as you're goal. But I want you to keep these numbers in mind as we're looking. We're understanding what we can do to reduce the amount of initial resources that our app has to download.

[00:01:39]
And then, finally for H2 and Http, 6 for H1 I guess I could say. Six is the average, six to eight, depending on the browser. And then for H2 around 20 to 35 sometimes 50 depending on your server infrastructure. And then finally, one of the most important statistics.

[00:02:02]
Which I think, people miss more than anything is this code coverage. And there really is today only one tool that can measure it and it's in Chrome dev tools. And so that's why, you know, like, John why you loading Chrome if your work for the Edge team? And it's like, this is actually why, because this specific tool I use for web performance auditing.

[00:02:26]
And so, when I say 90% code coverage, that means. When you download your initial experience 90% of that code that you're shipping is actually used, right? Super important to think about.

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