subject
Intro

Udacity: Website Performance Optimization

 with  Ilya Grigorik
You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

In this short course, you’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible. You’ll learn how to dive into recommendations from [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/ "PageSpeed Insights") and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve immediate performance boosts!

This course is also a part of our Front-End Web Developer Nanodegree.

Why Take This Course?
From Ilya Grigorik's [High Performance Browser Networking](http://www.google.com/url?q=http%3A%2F%2Fchimera.labs.oreilly.com%2Fbooks%2F1230000000545%2Findex.html&sa=D&sntz=1&usg=AFQjCNGqIsrSJdHvrYxIgEbLW577cvRxSA "High Performance Browser Networking"):

"The emergence and the fast growth of the web performance optimization (WPO) industry within the past few years is a telltale sign of the growing importance and demand for speed and faster user experiences by the users. And this is not simply a psychological need for speed in our ever accelerating and connected world, but a requirement driven by empirical results, as measured with respect to the bottom-line performance of the many online businesses:

* Faster sites lead to better user engagement.
* Faster sites lead to better user retention.
* Faster sites lead to higher conversions.

Simply put, speed is a feature."

### Project
You will optimize an online portfolio for speed, which you can share with the world to showcase your skills!

Making a great first impression is absolutely key and an online portfolio can help you stand apart from the crowd. We’ll give you a template for a modern, mobile-friendly portfolio which you’ll be able to completely customize so that it shows off your work and your skills the way you want. But before you show it off to the world, you’ll practice your web performance skills by optimizing the portfolio to render as fast as possible.

Syllabus

### 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.
4 Student
reviews
Cost Free Online Course
Pace Self Paced
Subject Web Development
Institution Google
Provider Udacity
Language English
Hours 6 hours a week
Calendar 1 weeks long

Disclosure: To support our site, Class Central may be compensated by some course providers.

+ Add to My Courses
FAQ View All
What are MOOCs?
MOOCs stand for Massive Open Online Courses. These are free online courses from universities around the world (eg. Stanford Harvard MIT) offered to anyone with an internet connection.
How do I register?
To register for a course, click on "Go to Class" button on the course page. This will take you to the providers website where you can register for the course.
How do these MOOCs or free online courses work?
MOOCs are designed for an online audience, teaching primarily through short (5-20 min.) pre recorded video lectures, that you watch on weekly schedule when convenient for you.  They also have student discussion forums, homework/assignments, and online quizzes or exams.

4 reviews for Udacity's Website Performance Optimization

Write a review
a year ago
profile picture
Erlend Landroe completed this course.
Was this review helpful to you? YES | NO
0 out of 1 people found the following review useful
2 years ago
Chris Duncan completed this course.
Was this review helpful to you? YES | NO
a year ago
profile picture
Said Aspen completed this course.
Was this review helpful to you? YES | NO
0 out of 1 people found the following review useful
2 years ago
Tai completed this course.
Was this review helpful to you? YES | NO

Class Central

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free