Website Performance Optimization

Overview

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.This class contains an introductory lesson, two primary lessons and a final project. Before diving into optimizations, you’ll build an understanding of how browsers convert HTML, CSS and JavaScript into websites. Along the way, you’ll practice measuring performance using the same tools Google engineers use.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!##Lessons

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.