About this Course

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 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.

Play Trailer Play Trailer
Website Performance Optimization
Course Cost
Free
Timeline
Approx. 1 week
Skill Level
Intermediate
Included in Course
  • Icon course 01 3edf6b45629a2e8f1b490e1fb1516899e98b3b30db721466e83b1a1c16e237b1 Rich Learning Content

  • Icon course 04 2edd94a12ef9e5f0ebe04f6c9f6ae2c89e5efba5fd0b703c60f65837f8b54430 Interactive Quizzes

  • Icon course 02 2d90171a3a467a7d4613c7c615f15093d7402c66f2cf9a5ab4bcf11a4958aa33 Taught by Industry Pros

  • Icon course 05 237542f88ede3178ac4845d4bebf431ddd36d9c3c35aedfbd92e148c1c7361c6 Self-Paced Learning

  • Icon course 03 142f0532acf4fa030d680f5cb3babed8007e9ac853d0a3bf731fa30a7869db3a Student Support Community

Join the Path to Greatness

This free course is your first step towards a new career with the Front-End Web Developer Nanodegree Program.

Free Course

Website Performance Optimization

by Google

Enhance your skill set and boost your hirability through innovative, independent learning.

Icon steps 54aa753742d05d598baf005f2bb1b5bb6339a7d544b84089a1eee6acd5a8543d

Course Leads

  • Cameron Pittman
    Cameron Pittman

    Instructor

  • Ilya Grigorik
    Ilya Grigorik

    Instructor

What You Will Learn

Lesson 1

Introduction

  • Intro to Chrome Developer Tools.
  • How to measure the performance of mobile and desktop websites.
Lesson 1

Introduction

  • Intro to Chrome Developer Tools.
  • How to measure the performance of mobile and desktop websites.
Lesson 2

Critical Rendering Path

  • How are browsers and websites built.
  • HTML, CSS and JavaScript and the conversions to DOM and CSSOM.
  • Measuring performance via the Timeline view in Chrome Developer Tools.
Lesson 2

Critical Rendering Path

  • How are browsers and websites built.
  • HTML, CSS and JavaScript and the conversions to DOM and CSSOM.
  • Measuring performance via the Timeline view in Chrome Developer Tools.
Lesson 3

Easy HTML, CSS and JavaScript optimizations.

  • Adding powerful attributes to HTML tags.
  • Diagnose opportunities for optimization.
  • Key metrics to triangulate potential performance bottlenecks.
Lesson 3

Easy HTML, CSS and JavaScript optimizations.

  • Adding powerful attributes to HTML tags.
  • Diagnose opportunities for optimization.
  • Key metrics to triangulate potential performance bottlenecks.

Prerequisites and Requirements

This course is for any and all web developers, whether you started learning about HTML, CSS and JavaScript recently or have been building websites since the nineties!

Most importantly, you should be able to explain the overall purpose of HTML, CSS and JavaScript with respect to website structure. In addition, you should be comfortable reading and writing HTML documents and modifying JavaScript files.

This course is taught with Google Chrome and Google Chrome Canary.

See the Technology Requirements for using Udacity.

Why Take This Course

From Ilya Grigorik's 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.

What do I get?
  • Instructor videos
  • Learn by doing exercises
  • Taught by industry professionals
Icon globe e82eae5d45465aba4fbe4bb746905ce55dc3324f310b79c60e4a20089057d347

Udacity 现已提供中文版本! A Udacity tem uma página em português para você! There's a local version of Udacity for you!

前往优达学城中文网站 Ir para a página brasileira Go to Indian Site or continue to Global Site