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)

Optimizing any website’s performance requires a strong understanding of how browsers build websites from HTML, CSS and javascript. You’ll start by breaking down the Critical Rendering Path - the steps the browser has to take to render a page. You’ll get an understanding of how:

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)

You’ll explore easy HTML, CSS and javascript optimizations with significant performance implications, some of which are as simple as adding a single attribute to an HTML tag! Along the way, you’ll be developing the skills to help you diagnose opportunities for optimizations, including:

building quick and dirty diagrams of the Critical Rendering Path.
identifying three key metrics to triangulate potential performance bottlenecks.

Download Links :