Todd Gardner
TrackJS
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
CloseLearn 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
Table of Contents
Introduction
Section Duration: 2 minutes
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
Todd explains why it's important to focus on web performance. The biggest factor is search engine rankings. Website with poor performance are being ranked lower which results is less traffic and lower conversion rates.
Students are instructed to open an incognito or private browser window and rank four websites based on their perceived performance. Rankings can be placed in the Performance Comparison Worksheet.
Todd discusses the solution to the Perceived Performance exercise.
Todd explains why some waiting experiences feel longer than others. When users see a lack of activity or an unexplained reason for why something isn't loading the experience will feel longer.
Todd compares the ways performance was measured in the past with how it is measured now. Older metrics like page load time are unreliable since they relied on JavaScript events that could be exploited. The Web Vitals are four modern metrics that can be combined to measure a website's true performance.
Todd demonstrates how to use Lighthouse in the Chrome developer tools to profile a website's performance. It's recommended to detach the Chrome developer tools first so the browser window doesn't have to share screen space with the developer tools. The Lighthouse report is computer-specific so results will vary from user to user.
Students are instructed to generate a Lighthouse report for each website in the Performance Comparison worksheet and record the FCP, LCP and CLS values.
Todd demonstrates the solution to the Lighthouse exercise.
Metrics
Section Duration: 26 minutes
Todd explains the difference between lab data, synthetic data, and field data. Lab data does not represent real-world performance since it is gathered from a developer's computer. Field data is the most authentic since it is reported directly from real users.
Students are instructed to use the Chrome UX Report Compare Tool to record the Chrome User Experience data for each website in the Performance Comparison worksheet.
Todd demonstrates the solution to the Chrome User Experience exercise.
Todd describes the biases around browsers or types of users that should be considered when interpreting field data. Performance averages can also skew results since an average score may not accurately represent the majority of users. Percentiles like p75 or p95 can be the most helpful metrics.
Todd answers questions about Blink vs Chromium, how Lighthouse handles different browser window sizes, and how to get field data for a website.
Improving Performance
Section Duration: 38 minutes
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.
Todd explains how to install the example website that will be used throughout the rest of the course and walks through the project files.
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.
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.
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
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.
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.
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.
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.
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.
Todd answers a question about loading low quality images first and replacing them with higher quality images once the page is loaded.
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.
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.
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
Todd answers questions about the performance panel. The time to interactivity metric is also discussed in this segment.
Todd discusses how to justify performance work to stakeholders and how to design websites with performance in mind. Benchmarking performance early and often makes performance a team value and not an end-of-project task.
Todd explains how to set performance goals and a performance budget for a web website. The performance budget outlines the size of the images, JavaScript, and other assets in a project. Identifying the main users and connection speeds makes budgeting for performance easier.
Todd shares a few development scenarios and discusses how performance could be addressed. Comparing field data with the business objectives is the best way to reinforce the impact on performance a feature or project may have.
Wrapping Up
Section Duration: 4 minutes
Todd wraps up the course and shares some recommended Frontend Masters courses that focus on JavaScript performance.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops