Web Performance Optimization

Make sure to post to your cohorts forum if you have any questions!

Need help getting started?


Course Resources

Additional Reading

Downloadable Materials

Here are all of the videos from the course, zipped and saved as .mp4 files.

Critical Rendering Path Overview

Optimization Tips and Tricks

The Portfolio Project

You can find the portfolio GitHub repo here and a live version of Cameron's portfolio here.

Using GitHub

If you are not familiar with Git and GitHub, the GitHub help pages are a great place to start. In particular, check out the following guides: setup Git, fork a repo, hosting with GitHub Pages, and the references section to learn more.

Customization with Bootstrap

The portfolio was built on Twitter's Bootstrap framework. All custom styles are in dist/css/portfolio.css in the portfolio repo.

Sample Portfolios

Feeling uninspired about your portfolio? Here's a list of cool portfolios I found after a few minutes of Googling.

Course Syllabus

Lesson 0: Getting Up and Running

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: The Critical Rendering Path

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.

Lesson 2: Optimizing the CRP

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.