- [Instructor] Web performance optimization is a setof practices to improve perceptionof how fast the website, or the app, is being loaded.Increasing perception will increase conversion,so it will make more money for the company,it will make more visitors, more page views,or whatever conversion means for that particular site.In the last few years, new user-centric metricsand new goals have appeared, that now,we need to achieve.For example, we have first meaningful paintthat the current goal is from one to three seconds,meaning that we should show something meaningfulto the user within the first three seconds.

Then, we have first interactive,that is typically two to four seconds.That means, we don't want to see something only.We want that something to work, to actually work,and for that, it should be interactive.Sometimes you see a page on the screen,but it's not working, you try to click,you try to scroll, and nothing happens.So, that's because first interactive didn't happen yet.So, typically, when we are doing web performance,we are developing the app, we measure performance,and then we say, oh, let's apply some techniques here,and then we develop that, measure, apply techniques,and so on, that's basically how,typically, web performance works.

At one point, we say, okay, we are ready to deploy.We deploy, and we go to the user.So then, the user will get that optimized website.So, what's the problem, then, with this?We are thinking that web performance is something static,that after we have applied techniques, we are done.The problem is that the real web performance out thereis based on users' contexts.For example, the user may be on an iPhone Xon a Wi-Fi connection, or it can be a laptop using 3G,there are laptops with cellular connections.

We can be a Moto G, an Android device, 4th generation,so let's say two to three years old,and it's currently on a bad LTE connection, so it's a 4G,but it's not working properly with that connection,because the user can be on a bath.It can be a Google Pixel 3, so a very modernAndroid device, but it's on roaming,and it's on 2G, or it can be an Android Go,so, low CPU, low memory, but on 4G.So, different contexts, and we stillneed to achieve all our goals,but it's not possible within a static analysisto get and achieve the same goals on every context.

So, we need something different.We need to think about an approachthat after we have deployed the website,we can measure directly on user devices,and make some decisions there, and change the experience.Most of those measurements can change how we applytechniques later, statically, for a future version.So, we need real user metrics, and for that,we're going to use client side JavaScript APIs.

Resume Transcript Auto-Scroll

Author

Released

10/30/2018

With the Performance APIs built into modern browsers, you can measure the performance of your websites and applications and make "live" changes to the content, page navigation, and more. This allows you to create a faster and better experience for all your users: for the desktop user on high-speed Wi-Fi or the mobile user with a weak signal. This course shows how to collect real metrics from real devices with the four most useful APIs: Performance Timeline, Navigation Timing, User Timing, and Resource Timing. Instructor Maximiliano Firtman shows how to access and apply the APIs with vanilla JavaScript, and use reactive programming techniques—such as beacons and multithreading—to optimize code so it executes as efficiently as possible.