Web Performance Fundamentals
Table of Contents
IntroductionTodd 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
Why Care About Web PerformanceTodd 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 ExerciseStudents 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 SolutionTodd discusses the solution to the Perceived Performance exercise.
Psychology of WaitingTodd 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.
LighthouseTodd 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 ExerciseStudents are instructed to generate a Lighthouse report for each website in the Performance Comparison worksheet and record the FCP, LCP and CLS values.
Lighthouse SolutionTodd demonstrates the solution to the Lighthouse exercise.
Where to Measure PerformanceTodd 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 ExerciseStudents 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 SolutionTodd demonstrates the solution to the Chrome User Experience exercise.
Interpreting Field DataTodd 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&ATodd answers questions about Blink vs Chromium, how Lighthouse handles different browser window sizes, and how to get field data for a website.
Web Business ObjectivesTodd 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 WebsiteTodd explains how to install the example website that will be used throughout the rest of the course and walks through the project files.
Performance APITodd 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 PracticeTodd 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 AnalyticsTodd 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.
Improving FCP PracticeTodd 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.
Responsive Images PracticeTodd 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 PracticeTodd 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&ATodd answers a question about loading low quality images first and replacing them with higher quality images once the page is loaded.
Improving CLS PracticeTodd 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 DelayTodd 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 SpreadsheetsTodd 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.
Performance Panel Q&ATodd answers questions about the performance panel. The time to interactivity metric is also discussed in this segment.
Performance CultureTodd 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.
Performance ScenariosTodd 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.