Vanilla JavaScript: Web Performance Optimization APIs
1h 43mAdvanced2018-10-30
Authors
Maximiliano Firtman
Mobile and Web Developer, Trainer, Speaker, Writer
Course details
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.
Learning objectives
Understanding the Performance APIs
Navigation Timing
Calculate milestones in the Performance Timeline
Measuring the timing of navigation, resources, servers, and more
Reading network and device information
Optimizing code
Learning objectives
Understanding the Performance APIs
Navigation Timing
Calculate milestones in the Performance Timeline
Measuring the timing of navigation, resources, servers, and more
Reading network and device information
Optimizing code
Skills covered
JavaScriptOracleProgramming LanguagesSoftware DevelopmentDeep Dive (X:Y)
Concepts
Introduction
- Optimize APIs with JavaScript
- What you should know
Reactive Web Performance
- The need for web performance APIs
- Summary of what we can do
- Real user monitoring (RUM) and reactive web performance
- Measure time
- High-resolution timings
Performance Basics
- Navigation Timing Level 1
- Understand timings available
- Calculate milestones in the timeline
- The Performance Timeline interface
- Navigation Timing Level 2
Measure Performance
- Measuring our websites
- Add the Navigation Timing API
- Use the Resource Timing API
- Create custom user timing
- Get paint timing
- Detect long tasks
- Detect frame rate drops
- Add server timing information
Decision-Making Helpers
- Read network information
- Read device memory
- Save data for your users
- Receive client hints on the server
Execute Code More Efficiently
- Send low-priority requests with beacons
- Understand frame rate execution
- Execute animation control code
- Execute background tasks
- Efficient script yielding
Conclusion
- Next steps