Web App Performance

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
5 hours, 17 minutes CC
Web App Performance

Course Description

Learn to identify and resolve performance issues in your web apps! You’ll get an overview of Web Vitals and how to identify and monitor poor performance. Optimize loading CSS, JavaScript, and images with lazy loading, and dive into the basics of HTTP, browser cache, and service workers. Learn advanced techniques like preloading, fetch priority, HTTP Early Hints, and browser performance APIs like Performance & Navigation Timing API and PerformanceObserver API.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: July 30, 2023

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 33 minutes
  • 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

Section Duration: 1 hour, 12 minutes
  • 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

Section Duration: 1 hour, 14 minutes

Advanced Optimizations

Section Duration: 1 hour, 34 minutes
  • 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

Section Duration: 31 minutes

Wrapping Up

Section Duration: 10 minutes
  • Wrapping Up
    Max wraps up the course by summarizing the topics covered and sharing additional advice for optimizing performance in web applications. Tips for creating a performance-focused culture within a company are also shared in this lesson.
I've been binging Max Firtman's courses on Frontend Masters, Basics of Go, Vanilla JS and Web App Performance. Such amazing content, thank you!
Sam Kling

Sam Kling

samklingdev

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now