Table of Contents
Introduction
Elements of Performance
Why Care About Web Performance
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.Perceived Performance Exercise
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.Perceived Performance Solution
Todd discusses the solution to the Perceived Performance exercise.Psychology of Waiting
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.Web Vitals
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.Lighthouse
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.Lighthouse Exercise
Students are instructed to generate a Lighthouse report for each website in the Performance Comparison worksheet and record the FCP, LCP and CLS values.Lighthouse Solution
Todd demonstrates the solution to the Lighthouse exercise.
Metrics
Where to Measure Performance
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.Chrome User Experience Exercise
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.Chrome User Experience Solution
Todd demonstrates the solution to the Chrome User Experience exercise.Interpreting Field Data
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.Performance Q&A
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
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
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
Performance Panel Q&A
Todd answers questions about the performance panel. The time to interactivity metric is also discussed in this segment.Performance Culture
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.Goals & Performance Budget
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.Performance Scenarios
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.