Table of Contents
Introduction
Introduction
Maximiliano Firtman begins a course with a summary of the topics covered. After understanding the problems with poor performance and tools for measuring performance, the course will work through basic optimizations, advanced performance techniques, and the Performance APIs available in web browsers.
Performance Problems
Max demonstrates the average website load time and begins discussing performance-related problems. Slow-loading websites are directly related to traffic loss and reduced conversion rates.
State of the Mobile Web
Max discusses the implications performance has on the mobile web. Mobile usage statistics are shared, and markets worldwide are compared. Analyzing a website's audience helps developers and stakeholders understand the implications performance optimizations will have on creating successful conversions.
Metrics & Tools
Metrics
Max walks through the standard metrics for measuring performance. These include time to first byte, first paint, page load, first interactive, time to interactive, and largest contentful paint. Some metrics are browser-centric, while others are user-centric metrics. Prioritizing user-centric metrics will have a more significant impact on the perceived performance of a website.
Core Web Vitals
Max introduces the Core Web Vitals. These metrics aggregate real user metrics across the 75th percentile over mobile and desktop web usage. The metrics are the largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS).
Audit Real-World Performance with PageSpeed Insights
Max demonstrates how to measure real-world performance using Google's PageSpeed Insights tool. LCP, FID, and CLS goals are discussed, and the Chrome UX Report website is introduced.
Waterfall Chart in Chrome Dev Tools
Max explains why the waterfall chart is one of the most powerful tools for optimizing website performance. The chart visualizes how a website's assets are loaded and the duration of each step in the loading process. The performance tab in the Chrome Dev Tools is also demonstrated in this lesson.
WebPageTest Performance Audit
Max demonstrates WebPageTest, a free cloud-based performance tool for auditing site performance. The desired metrics and test environment can be configured. The resulting interactive report allows developers to analyze the performance with a similar set of tools as the Chrome Dev Tools performance tab.
Most Performance is Front-End
Max explains that most performance optimizations occur on the front end. Optimizing the back end has less impact and is not as easy as front-end optimizations.
Project Setup & Lighthouse Report
Max walks through the project setup and runs an initial Lighthouse report. The project uses a simple Express server to which helps simulate some real-world network conditions. The performance issues of the website will be addressed throughout the rest of the course.
Basic Optimizations
Browsing the Web
Max explains the entire data roundtrip from when a user enters a domain name in the browser to the content rendered on the screen. Understanding all the steps in a network request helps identify where performance bottlenecks can arise.
Evolution of HTTP
Max shares a brief history of HTTP, HTTP/2, and HTTP/3. Understanding the fundamentals of requests and responses helps developers recognize network performance pitfalls.
Browser Cache
Max explains the client-side caching options available when a browser requests a resource. When the browser finds a requested resource in the cache, it will check to see if it's expired. Expired resources will be loaded if the cache header indicates they are unmodified. Otherwise, a new resource will be requested.
bfcache
Max introduces Back/Forward Cache, or bfcache. Assets are cached between pages speeding up the navigation. The Page Navigation API can be used to open/restore connections or abort pending transactions between pages.
Service Workers & Cache Storage
Max explains the performance gains service workers can provide since they can intercept network requests and provide faster offline experiences for applications.
Resource Loading, Frames, & Interactivity
Max cautions about using too many render-blocking resources, which must be loaded before the page content appears and is interactive. The implications of long-executing JavaScript and animations are also discussed in this lesson.
GZIP, Cookies, & Redirects
Max covers some basic server-related performance techniques that developers should verify are in place. Checking response headers for text-based files will indicate GZIP is enabled. Leveraging cookieless domains and reducing redirects will also increase performance.
Optimizing CSS, JavaScript, & Images
Max wraps up the basic optimization recommendations by demonstrating how blocking CSS can reduce page performance, and JavaScript should be deferred as long as possible. A few tips for optimizing images and web fonts are also discussed in this lesson.
Advanced Optimizations
Optimizing First Load
Max explains why optimizing the first load has a significant perceived performance gain. The quicker a user sees content, the faster a site feels. One strategy for this is inlining CSS and JS code required for above-the-fold content. HSTS preloading is also discussed in this lesson.
Preloading
Max preloads the primary image on the page to improve the First Contentful Paint metric. Preloading an asset with a link element and rel="preload" will speed up the discovery process and potentially have the asset in the browser cache by the time the application requests it.
Fetch Priority
Max introduces the fetchpriority attribute and explains how it signals high or low-priority image fetches. This can be useful when applied to <img> elements to signal images that are "important" to the user experience early in the loading process.
HTTP Early Hints
Max demonstrates HTTP Early Hints, allowing the server to return a 103 response along with any assets the browser can begin loading while waiting for the server processing to finish and the final 200 response to be returned.
Optimizing Data Transfer
Max discusses strategies for optimizing data transfer performance between the client and server. Leveraging HTTP/3 (known as QUIC) will reduce the number of requests required to load a page. Utilizing more efficient compression algorithms like Brotli can also increase performance.
Using Modern Image Formats
Max walks through the modern image formats and their performance advantages to web applications. SVG is text-based and can be easily embedded in source code, eliminating additional network requests. Formats like WebP, AVIF, and Zopfli PNG offer better compression algorithms leading to smaller final sizes for high-quality images.
Cache Control, dns-prefetch, & preconnect
Max explains the immutable Cache-Control value indicates to the browser an asset never expires. Using the dns-prefetch and preconnect options in header link elements is also explained in this lesson.
Lazy Loading Images & Fonts
Max explores the lazy loading and decoding options available with images. Lazy loading automatically defers the loading of an image, reducing its priority. The font-display CSS property indicates to the browser how text should be rendered when loading a web font.
HTTP Client Hints
Max discusses how HTTP Client Hits allow the browser to expose device information to the server by using a meta tag in the HTML. This information helps the server decide which asset to return.
Optimizing Interactions
Max suggests moving heavier tasks, like image processing or video encoding, to the WebAssembly thread, freeing up the main thread for user interaction. Removing legacy code and providing a consistent loading experience will also increase the overall perceived feel of the application.
Reviewing The Lighthouse Test
Max reviews the lighthouse score for the application now that some performance optimizations have been applied. A question about how other frameworks like Next.js defer JS execution on the initial page load is also discussed in this lesson.
Performance APIs
Performance & Navigation Timing APIs
Max introduces the Performance & Navigation Timing API. The properties and methods in this API give developers precise details about a page's performance and the metrics can be used for creating robust custom reports.
Performance Observers
Max shares the supported entry types in the PerformanceObserver API, allowing developers to access metrics like the core web vitals directly from JavaScript.
Device Memory & Save Data Flag
Max covers a few smaller but useful optimization APIs. For example, the save data flag indicates the user would like to use as little data as possible.
Animation Frames & Input Pending
Max explains why requestAnimationFrame is more performant and reliable than setTimeout or setInterval. The isInputPending property is helpful for occasionally checking if input from the browser needs to be processed during a long-running JavaScript task. If so, the thread can be released and continued later.
Request Idle Callback & Script Yielding
Max discusses use cases for the requestIdleCallback method. Developers can defer code execution until the browser has idle time or a specified time. Script yielding allows the browser to temporarily take control of the main thread and immediately execute a callback function after it has finished.
