Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

Introduction to Front End Performance Optimization Course (How To)

via Treehouse

Overview

People want to use websites that load quickly, and every second counts. If a website takes more than 3 seconds to load, you can lose 40% of your audience. Every additional second in page response can result in a 7% reduction in conversions. In these lessons, we're going to take a slow website and make it load faster using front end performance optimization. By the end, you'll know many practical techniques that can speed up any website.

What you'll learn

  • Performance measurement
  • Reduce HTTP requests
  • CSS and JavaScript minification

Syllabus

Planning for Performance

Websites can load slowly for a number of reasons, but often, performance problems due to poorly optimized HTML, CSS, and JavaScript. In these lessons we'll define front end performance optimization and learn how to set a performance budget.

Chevron 4 steps
  • What is Front End Performance Optimization?

    1:53

  • What is Front End Performance Optimization?

    3 questions

  • Setting a Performance Budget

    3:05

  • Setting a Performance Budget

    3 questions

  • Extra Credit

    If you're currently building a website, try creating a performance budget. Then, measure the performance of your site to see if it's within the appropriate bounds. If not, try using some of the optimization techniques covered in these lessons to bring it closer to your performance budget.

Measuring Performance

One of the most important aspects of performance is measurement. By using software tools to measure the speed of a website, you can determine if your optimizations are actually helping, or hurting, front end performance. Measurement will also help you determine if you're meeting the goals outlined in your performance budget.

Chevron 4 steps
  • Chrome DevTools

    6:01

  • Chrome DevTools

    3 questions

  • Google PageSpeed

    4:05

  • Google PageSpeed

    2 questions

  • Extra Credit

    Using Google PageSpeed Insights, try to eliminate two performance problems on one of your web projects.

Optimize Assets

Images, CSS, JavaScripts, and other assets all add up, both in file size and in the total number of HTTP requests. By combining assets together, removing assets that are not being used, and using a few other techniques, we can improve page load times.

Chevron 6 steps
  • HTTP Requests

    4:36

  • HTTP Requests

    4 questions

  • Optimize Images

    10:35

  • Optimize Images

    4 questions

  • Optimize CSS

    5:55

  • Optimize CSS

    3 questions

  • Extra Credit

    If you're starting a new web project or working on an existing one, try using SVGs where appropriate. They're typically smaller in file size and they look great on high resolution screens.

Combine and Minify Assets

One way to reduce HTTP requests is to combine assets together. This can be done with SVGs as well as other types of images. CSS and JavaScript files can often be combined together as well. In addition, CSS and JavaScript can go through a process called minification, where comments, whitespace, and other unnecessary characters are stripped out.

Chevron 6 steps
  • Create a Sprite Map

    13:04

  • Create a Sprite Map

    3 questions

  • Optimize JavaScript

    6:14

  • Optimize JavaScript

    4 questions

  • Minify Assets

    8:37

  • Minify Assets

    3 questions

  • Extra Credit

    Try going a step further and use a tool like Grunt or Gulp to automate the build process. This takes more setup and knowledge, but it's better than copying and pasting from minification services.

Reviews

Start your review of Introduction to Front End Performance Optimization Course (How To)

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.