Throughout the course, you’ll build a performance toolbox to help you build faster website experiences by taking advantage of PageSpeed Insights recommendations and measuring page performance on mobile and desktop with Chrome Developer Tools.
Then comes the really fun part: optimization! You’ll learn about easy-to-implement performance gains and develop a simple and powerful model for uncovering optimization opportunities.
You’ll put your newfound performance skillset to the test with the final project, where you’ll be optimizing your own online portfolio website!
Lesson 0 (20 minutes)
You can’t optimize what you can’t measure, so in this lesson you’ll learn how to open Chrome Developer Tools to measure the performance of mobile and desktop websites.
Lesson 1 (60 minutes)
- HTML is converted to the Document Object Model (DOM).
- CSS is converted to the CSS Object Model (CSSOM).
- the browser runs layout to determine the position and size of elements before painting pixels on the screen.
Throughout the lesson, you’ll learn how to take advantage of the Timeline view in Chrome Developer Tools to measure each and every step’s performance on mobile and desktop.
Lesson 2 (90 minutes)
- building quick and dirty diagrams of the Critical Rendering Path.
- identifying three key metrics to triangulate potential performance bottlenecks.