Web Performance Fundamentals

Todd Gardner

Todd Gardner

Request Metrics
3 hours, 50 minutes CC
Web Performance Fundamentals

Course Description

Build faster websites and web applications by learning the current metrics and techniques for improving web performance. We’ll look at the psychology of web performance and how users see wait time on your site. Then learn the new core web vitals metrics like first contentful paint (FCP), largest contentful paint (LCP), and cumulative layout shift (CLS), and how to improve each metric. Finally, we’ll discuss building a performance culture in your organization to start your applications fast from the beginning!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: March 23, 2021

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 2 minutes
  • Introduction
    Todd Gardner introduces the Web Performance course which focuses on understanding web performance metrics, improving the performance of real-world applications, and how to include performance planning at the beginning of a project.

Elements of Performance

Section Duration: 35 minutes

Metrics

Section Duration: 26 minutes

Improving Performance

Section Duration: 38 minutes
  • Web Business Objectives
    Todd explains the first step for improving web performance is understanding the business objectives. Comparing the performance of competitor websites helps understand how much improvement is needed.
  • Course Example Website
    Todd explains how to install the example website that will be used throughout the rest of the course and walks through the project files.
  • Performance API
    Todd introduces the Performance API and explains how it can be used to benchmark metrics during a visitors session on a website. The getEntries method on the performance object returns different types of PerformanceEntry objects. Each object can represent a different metric like navigation, resource loading, or painting.
  • Performance API Practice
    Todd demonstrates how the Performance API can be used to capture metrics for the four web vitals. The perf.js file included in the example website is added to the index page to begin logging these metrics. A baseline Lighthouse report is also generated.
  • Performance Analytics
    Todd demonstrates how the field data gathered by the Performance API can be analyzed and correlated with business metrics. Combining performance metrics with business metrics allows for more concrete conclusions for where the improvements should be focused.

Optimizing Metrics

Section Duration: 1 hour, 22 minutes
  • Improving FCP Practice
    Todd explains how to improve the first contentful paint (FCP) metric and walks through how to simulate this improvement in the course website. Content Delivery Networks (CDNs) are an effective tool to improve FCP because they cache content on a server closer to the user's region which reduces the distance the data needs to travel.
  • Improving LCP
    Todd explains how to improve the largest contentful paint (LCP) metric. One technique is to defer or lazy load resources like JavaScript files or images if they are not needed immediately. Moving script tags to the bottom of the body tag will also prioritize them after the rest of the HTML content.
  • Defer & Lazy Load Practice
    Todd explains the loading attribute for lazy loading images is not compatible with some browsers so it's recommended to lazy load with JavaScript. The IntersectionObserver object detects when an element is within the viewport. When this occurs, the element's src attribute can be updated to trigger the loading of the resource.
  • Responsive Images Practice
    Todd explains how the srcset and sizes attributes are used to load images based on the browser window's width and adds this responsive image code to the project. The images in the project are also optimized using an optimization script to reduce their file size.
  • HTTP2, Caching, and Pre-Loading Practice
    Todd breaks down the components of a web request and discusses how to reduce the overhead. HTTP/2 allows connections to be reused which reduces the number of DNS lookups and SSL handshakes. Requests can also be cached which improves performance for returning visitors.
  • Loading Images Q&A
    Todd answers a question about loading low quality images first and replacing them with higher quality images once the page is loaded.
  • Improving CLS Practice
    Todd explains how to improve the cumulative layout shift (CLS) metric by limiting how the deferred resources affect the layout once they are loaded. Elements can be fixed to the bottom of the screen so they do not disrupt the flow of the page when they load. Setting an initial width and height on lazy loaded images allows the browser to reserver their place on the page and reduce the shift once they are loaded.
  • Improving First Input Delay
    Todd discusses how the psychology of waiting influences how to improve the first input delay (FID) metric. If a website provides a high level of value, users will tolerate a higher FID.
  • Data Beyond Spreadsheets
    Todd revisits the web business objectives to project what affect these optimizations will have on session time and bounce rate. Flame distribution charts can create a better visualization of page performance and web vital metrics.

Planning

Section Duration: 40 minutes

Wrapping Up

Section Duration: 4 minutes
Great course by Todd Gardner about web perf on Frontend Masters! My takeaway from the course:

- Know your users
- Plan your perf budget according to users e.g. how long your users can wait
- Measure the perf
- Ways to improve core web vitals.
Nikhil

Nikhil

nikhil_m6

Learned the basics web vitals and got some new input regarding performance. Bravo! 👏👏👏
Christian Rebelsky

Christian Rebelsky

crebelsky

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now