Todd Gardner
Request Metrics
Web Performance Fundamentals, v2
5 hours, 59 minutes CC
Course Description
Speed up your websites and web apps by mastering the latest performance metrics and web optimization techniques. Improve key Core Web Vitals metrics like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Use tools such as Lighthouse, WebPageTest, and Real User Monitoring to gain visibility and debug performance issues to make your websites lightning-fast!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: October 22, 2024
Topics
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
Table of Contents
Introduction
Section Duration: 6 minutes
Todd Gardner introduces the course by providing an outline and explaining why it is important for websites to be fast. He also discusses the different metrics used to measure web performance and the tools and techniques used for testing and improving performance.
Todd introduces an example e-commerce site called Developer Stickers Online to demonstrate the issues that can make a website feel slow, such as slow-loading images, unpredictable layout changes, and delayed responses to user actions.
Importance of Web Performance
Section Duration: 31 minutes
Todd explains that web performance is important for three main reasons: user experience, search engine optimization (SEO), and online advertising. He dives into the user experience aspect, explaining that users have certain expectations for how fast a website should load and provides statistics on user behavior related to website speed.
Todd discusses how a fast-loading website can improve search engine rankings and increase traffic. He also demonstrates how improving web performance can reduce bounce rates and increase conversion rates, leading to higher revenue for online businesses.
Todd introduces the concept of a waterfall chart, which is a visual representation of the loading process of a web page, and how different elements such as HTML, style sheets, JavaScript, and images are loaded and processed.
Todd explains two legacy metrics used to measure web performance: DOM content loaded and the load event. DOM content loaded refers to when the HTML document has fully downloaded and any JavaScript in it has been executed, while the load event signifies when all known resources, including images, have been downloaded and rendered.
Todd discusses the evolution of performance metrics for websites and explains how traditional metrics like DOM content load and load events became less meaningful with the rise of client-side rendering.
Core Web Vitals & Other Performance Metrics
Section Duration: 1 hour, 2 minutes
Todd introduces Google's Core Web Vitals and discusses largest contentful paint (LCP), which measures how fast the most important element on the site loads. He explains the rules and considerations for determining the largest element and provides examples and code samples for calculating LCP. He also discusses the importance of meeting the LCP target time and the potential penalties for falling behind.
Todd discusses the second Core Web Vital, cumulative layout shift (CLS). He explains what CLS measures and provides examples of layout shifts that can occur on a webpage. He then explains how CLS is calculated and how it applies to both height and width shifts.
Todd answers student questions including why the header wasn't included in the impact fraction, if scrolling affects CLS, and if server-side rendering removes layout shifts.
Todd introduces flame charts and explains how they are used to measure the performance of JavaScript in web applications. He demonstrates how flame charts represent the execution of tasks and functions over time, and how different colors indicate different types of tasks.
Todd explains what an interaction is in the context of web performance. He discusses how interactions such as clicks, drags, touches, and key presses are measured and how they impact the user experience. Todd also introduces the concept of Input Delay and explains the sequence of events that occur when a user interacts with a web page. Todd also discusses the factors that can affect the INP score, such as device capability, and the desired thresholds for a good and bad INP score.
Todd discusses the first input delay (FID), which used to be one of the Core Web Vitals but has been replaced with interaction to NextPaint (INP). Todd explains that FID measured the time it took for the first user interaction on a webpage and was used to determine if excessive JavaScript and other resources were causing delays. However, FID was not an effective measure for all user interactions, so it was retired and replaced with INP.
Todd explains that the time to first byte (TTFB) measures how quickly a host responds to a request and is not related to client-side code. He goes into detail about the various steps involved in the TTFB process, including redirects, DNS lookup, establishing a TCP connection, and receiving the first byte of the response.
Todd discusses the metric of First Contentful Paint (FCP) and its importance in measuring the user experience. FCP represents the first time the browser window shows any visual content to the user after they click on a link or perform an action. Todd explains how FCP is related to other metrics like Time to First Byte (TTFB) and Largest Contentful Paint (LCP), and provides examples of how these metrics can vary depending on the website's structure and resource loading time.
Capturing Performance Metrics
Section Duration: 20 minutes
Todd explains how to capture performance metrics programmatically using the Performance and PerformanceObserver APIs. He also discusses the key features of the Performance API, such as the .now() method for getting a current timestamp, the ability to get entries that provide information about network timings, and the ability to mark and measure specific events for capturing custom performance metrics.
Todd explains the problem with the Performance API and the observer effect. He introduces the PerformanceObserver as a tool to gather information about the performance of a web page when the browser is idle. He also provides an example of how to observe layout shifts using the PerformanceObserver and discusses the importance of the "buffered" property.
Todd discusses browser support and how different browser engines support various metrics. He also explains that while legacy metrics are generally supported across all browser engines, there are limitations when it comes to Core Web Vitals such as LCP, CLS, and INP.
Testing & Tools
Section Duration: 1 hour, 2 minutes
Todd introduces testing methods and tools for measuring web performance metrics. He explains the different approaches to testing performance, including lab data, synthetic data, and field data.
Todd discusses the drawbacks of using performance averages and why they can be misleading when analyzing web performance data. He also discusses the benefits of using percentiles to measure performance and explains how they can provide a more accurate representation of user experiences.
Todd discusses different tools available in Google Chrome for web performance testing. He demonstrate how to use Lighthouse, a tool that generates performance scores and provides insights into various performance metrics. Todd also explains how to simulate real user conditions by adjusting screen size, network throttling, and CPU throttling settings.
Todd walks through how to navigate and interpret the data in the Lighthouse generated waterfall and the flame charts. He also mentions the memory tab in Chrome's performance panel, but notes that it is not widely used for diagnosing memory leaks in real user scenarios.
Todd demonstrates how to use the Web Vitals extension, which is a tool for diagnosing performance problems on web pages. He show how to install the extension, enable console logging, and use it to view the Core Web Vital scores for a page. He also explain how the extension provides real-time information about page performance and even shows field data from other users.
Todd explains the Chrome User Experience Report (CrUX) and how it is used by Google to determine website performance and ranking. He also demonstrates how to access CrUX data using tools like SpeedCheck and PageSpeed Insights.
Todd discusses the tool webpagetest.org, which allows users to have more control over their website performance testing compared to other tools like PageSpeed Insights. He demonstrates how to use webpagetest.org to run tests from different locations, with different connection types, and using different browsers.
Todd discusses the importance of using Real User Monitoring tools to collect performance data from real users. He also provides examples of different RUM tools available, including enterprise-level tools like Akamai mPulse and project-based tools like Request Metrics.
Todd discusses the benefits of using a RUM tool, specifically focusing on the features and capabilities of the tool called Request Metrics. He explains how RUM tools provide more detailed and actionable data compared to high-level views like CrUX. He demonstrates how RUM tools allow users to filter and analyze data based on specific criteria, such as geographical location and connection type.
Setting Performance Goals
Section Duration: 16 minutes
Todd explains that the perception of speed is subjective and varies depending on the user group and the importance of the task. He also highlights the psychological factors that influence how users perceive wait times, such as boredom, anxiety, understanding of the wait, and uncertainty.
Todd explains that there are three factors that determine how fast a website needs to be: user experience, competitors, and SEO page rank. Competitors also play a role, as users generally need a 20% faster experience to notice a difference between two websites.
Todd discusses the importance of understanding your website's user base to effectively test and optimize the website for a better user experience. He provides statistics on device type, screen sizes, operating system, and network speed to highlight the diversity of users and their preferences.
Improving Time to First Byte
Section Duration: 37 minutes
Todd discusses the importance of setting performance goals based on real user data and focusing on the worst metric first. He also encourages prioritizing the easiest fixes and finding ways to do fewer things in between the two things you're trying to measure.
Todd demonstrates how to measure TTFB using Chrome tools and explains how it is a contributing factor to other performance metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Todd also mentions the significance of TTFB in relation to user experience and provides Google targets for optimal TTFB.
Todd explains how compression reduces the size of plain text files such as HTML, CSS, and JavaScript, and demonstrates the use of compression algorithms like gzip and Brotli. Todd also shows how to enable compression in a local development environment and discusses the benefits and considerations of using different compression algorithms.
Todd discusses the protocols used in web communication, specifically HTTP 1.1, HTTP 2, and HTTP 3. He explains how HTTP 2 and HTTP 3 aim to improve efficiency by streaming requests and responses over a single TCP connection or a UDP protocol called QUIC, respectively.
Todd demonstrates how the website makes an initial request using HTTP/2 over HTTPS, but switches to HTTP/3 for the remaining connections, which are streamed over a UDP connection. The impact of using HTTP/3 is demonstrated by comparing the performance of the website before and after enabling compression and using HTTP/3.
Todd discusses the importance of right-sizing the host for the workload and demonstrates how to reduce delay in the system. He also explains the concept of content delivery networks (CDNs) and how they can help improve performance by reducing the latency between the host and the user.
Improving First Contentful Paint
Section Duration: 32 minutes
Todd discusses strategies to improve First Contentful Paint (FCP) and its relationship with Time to First Bite (TTFB) and Largest Contentful Paint (LCP). He also demonstrates the baseline FCP of a website and introduces three tactics to improve FCP: removing sequence chains, preloading resources, and lazy loading resources.
Todd explains the concept of collapsing dependencies in web development. He discusses how the sequential loading of CSS and fonts can block rendering and delay the First Contentful Paint (FCP) of a webpage. He also demonstrates how to remove these dependency chains by using a bundler to prepackage the CSS and JavaScript files, resulting in faster FCP.
Todd discusses the concept of preloading resources to improve website performance. He specifically focuses on preloading Google Fonts, explaining how to use the preconnect and preload attributes to start fetching the font files earlier.
Todd demonstrates how to add the "defer" attribute to script tags in an HTML file and shows the impact on FCP performance. He also mentions other tactics for improving FCP, such as removing sequence chains and preloading critical resources.
Improving Largest Contentful Paint
Section Duration: 53 minutes
Todd discusses the concept of improving LCP (largest contentful paint), which is a core web vital metric that affects SEO. He explain the different components of LCP, including resource delay, resource duration, and render delay. Todd also mentions tactics to improve LCP, such as lazy loading, eager loading, and optimizing images.
Todd explains the concept of lazy loading and how it can be used to optimize web performance. He demonstrates how to decorate non-LCP images with "loading=lazy" to tell the browser to load them lazily. Todd also discusses the importance of prioritizing images based on their relevance and location on the page.
Todd discusses the concept of eager loading to improve the loading speed of the LCP element. He explains that by using the "fetchPriority" attribute or preloading the image, the browser can be instructed to prioritize the important image and start downloading it earlier. Todd demonstrates how to implement both methods and shows the impact on the performance profile.
Todd discusses optimizing image loading by sending fewer bytes. He explains that HTTP compression is not effective for images as they are already compressed formats. Todd introduces different image formats, such as JPEG, PNG, WebP, and AVIF, and explains their differences in terms of file size.
Todd explains how to optimize and improve the Largest Contentful Paint (LCP) metric of a website. He discusses various tactics such as lazy loading, eager loading, and image optimization to make the LCP faster.
Todd demonstrates the use of the picture element in HTML to create responsive images. He also provides code examples and a step-by-step walkthrough of the optimization process.
Todd discusses the concept of caching and its importance in improving the return user experience. He explains server caching and browser response caching, and how caching headers and cache control and expires headers can be used to optimize the caching process.
Todd explains how to enable caching headers to improve website performance. He demonstrates how to enable the 304 caching headers, which include the ETag and last-modified headers for static content. By enabling these headers, the browser can cache the content and retrieve it quickly without making a new request to the server, resulting in faster loading times for returning users.
Improving CLS & INP
Section Duration: 28 minutes
Todd discusses how CLS can affect the smoothness and predictability of elements loading on a webpage. He also demonstrates how to improve CLS by giving layout size hints and specifying the height and width of images, as well as providing examples of different approaches to solving CLS issues caused by late-rendered content.
Todd focuses on improving Interaction to Next Paint (INP), which measures how quickly users can interact with a website. He also introduces two techniques, setTimeout and requestAnimationFrame, for optimizing INP by yielding to the main thread and controlling the timing between the main thread and paint events.
Todd demonstrates yielding to the main thread by modifying an async click event handler. He uses requestAnimationFrame to pause processing until the browser is ready to paint a frame, then perform some tasks such as changing the content of a button and disabling it. He also uses setTimeout to defer other tasks like updating analytics and adding items to the cart.
Wrapping Up
Section Duration: 7 minutes
Todd wraps up the course by discussing the importance of web performance and its impact on user experience, SEO, and online advertising. He reviews the core web vitals metrics and how they affect page rank and emphasizes the need to analyze real user data and prioritize improvements based on the worst-performing metrics.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops