Mastering Web Performance: From Novice to Expert

Name: Mastering Web Performance: From Novice to Expert
Rating: 3.9 (154 reviews)

Enhance your web app’s performance by writing optimized code and leveraging Chrome DevTools

Created byRakia Ben Sassi

Last updated 5/2026

English

English [Auto],

What you'll learn

You'll learn how to effectively track web performance down with chrome DevTools.
A brief history of web performance.
The difference in the performance requirements between MPA (Multiple Page Application) and SPA (Single Page Application)
The difference between runtime performance and other kind of web performance.
Learn the signs that your web app is leaking memory.
Learn programming patterns that cause JavaScript memory leaks.

Course content

13 sections • 59 lectures • 3h 22m total length

Introduction0:29
A Little Story0:47
About Me1:07
Meet Raja, a freelance senior software engineer and software architect, a Google developer expert in Angular and Women Techmakers ambassador, sharing web performance optimization insights and foundations for modern architectures.
3 Pillars of Web Performance1:06
Explore the three pillars of web performance: load performance, runtime performance, and random performance, and learn how they together deliver faster, more responsive web experiences.
What Is Rendering?1:03
Master rendering by turning HTML, CSS, and JavaScript into visible interactive experiences through parsing, constructing the DOM, calculating layout, and painting pixels.
Visualization of the Rendering Process3:04
Web Rendering Types3:07
Poor Rendering Symptomes2:51
Identify poor rendering by examining layout shifts and sluggish interactivity on the order confirmation page, then measure layout shifts using Chrome DevTools performance panel, memory select box, and garbage collection.
Poor Rendering Causes0:34
Optimization Techniques1:12
Real World Case Study18:48
Rendering Performance (Issues in the Real-World Case Study)

What's a memory leak?0:31
Introduction2:30
Identify and fix memory leaks in web apps by diagnosing root causes, tracking leaks, and recognizing patterns in source code, while optimizing end-user device resources.
A brief history of web performance and JS memory leaks4:47
Types of web performance problems1:42
Signs that your web app is leaking memory0:55
recognize memory leaks in web apps by watching for production slowdowns after long sessions, as the UI becomes sluggish and memory usage rises with increasing node size and listeners.

Case Study 1: Managing Event Listeners in Form Arrays8:02
Case Study 2: A Web App with a Machine Learning Model to Track Hand Gestures18:26
Case study reveals a web app using a TensorFlow hand-gesture model, showing a memory leak from repeated loading that slows performance and inflates memory.
Case Study 3: A ToDo App with Event Listeners to Changes in a From Array's Field12:16
Build a Registration Form with Accessibility & Performance in Mind4:50
JavaScript's "this": The Context Chameleon5:00
The difference between myMethod() {} and myMethod = () => {} might seem trivial, but it taps into fundamental JavaScript behavior with significant consequences for application stability and maintainability.
What could begin as a simple code cleanup exercise might become a potent reminder: never underestimate the power — and potential pitfalls — of this.

Introduction: The Era of the Dark Software Factory0:46
Mastering web performance in the era of the dark factory, this lecture exposes the five levels of AI coding and a three-layer defense to ship fast with safety.
Is AI Making You Faster? The Reality of Productivity1:44
Assess how AI coding tools impact productivity, using METR's study to reveal that 20% feel faster while tasks take 19% longer due to reviewing and steering output.
The 5 Levels of AI Coding Skills Framework5:23
Success Story: StrongDM’s Level 5 Mastery3:54
How to Apply Level 5 Safely: Behavioral Testing2:24
Learn to distinguish behavioral tests from implementation tests, focusing on outcomes over internals, and apply this in real-world scenarios like multi-pod deployments, race conditions, and user-facing behavior.
Cautionary Tale: Amazon’s AI Fire Drill2:07
The Hidden Crisis of Dark Code1:42
Uncover dark code, where functional yet incomprehensible code accumulates and debugging becomes archaeology. Apply behavioral testing to elevate safeguards and move up the levels without burning down the house.
The 3-Layer Defense: Moving Up Safely6:47
Explore the three-layer defense in the software lifecycle: spec-first development, self-describing code with documentation and observability, and the comprehension gate before shipping.
Requirements vs. Specifications4:11
The Dark Factory vs. Clean Code1:36
The New Engineering Paradigm: Organizational Design3:32
The new engineering paradigm emphasizes organizational design and disciplined ai-assisted development, starting from a spec, generating in-code docs, passing a comprehension gate, and requiring senior sign-off.

Fragmented Observability Is Killing Developers' Productivity2:52
How to Automate Bug Fixes With Multiplayer Fullstack Session Record & MCP server4:52
Automate bug fixes with multiplayer full stack session recording and the MCP server, enabling AI-powered, context-rich diagnoses linked to code, reducing debugging time and improving collaboration.
Stop Debugging Blind. Use Fullstack Recorded Session & MCP server

Requirements

No prior knowledge of web performance optimisation required.
A bit of knowledge about JavaScript/TypeScript and HTML would be helpful.

Description

Hunting web performance issues is a complex problem with fiendish edge cases, and debugging them can be a daunting task. To avoid such a problem in your app, you need awareness about it and constant vigilance.

JavaScript memory leaks are sneaky and could be challenging to localize because they can go unnoticed for some time. And even if your performance gets progressively worse, you will not see a thrown error on the browser while running the leaking app. Because it’s not an invalid code that causes such issues, but a logical flaw in it.

In this course, we’ll see how to effectively track web performance down and learn what causes them. You’ll get insights on how to respect more the end-user device’s resources. You’ll also avoid situations where you pull your hair out trying to understand what’s going on with your performance.

I designed this course to suit newcomers as well as advanced developers, and I will walk you through the topic step by step until you get your hands dirty.

At the end of the course, you’ll be able to identify, diagnose, and fix web performance issues in web apps even if you’re not the one who implemented them. You’ll be also able to catch patterns in your source code that cause them.

Who this course is for:

For people who want to optimize their runtime web performance and/or fix memory leaks in their web pages.
For frontend developers who want to know more about web development.
For people who want to have more insights on how to use chrome DevTools.

Mastering Web Performance: From Novice to Expert

What you'll learn

Explore related topics

Course content

Web Performance 10111 lectures • 34min

The Story Behind this Course2 lectures • 9min

Runtime Web Performance: JavaScript Memory Leaks5 lectures • 10min

How to identify memory leaks with chrome DevTools5 lectures • 11min

Coding patterns that leak memory in JavaScript4 lectures • 16min

Case studies5 lectures • 49min

Quiz: Memory Leaks0

The Dark Software Factory & Agentic Engineering11 lectures • 34min

Observability and Debugging2 lectures • 8min

Security and Compliance: How to Build Secure Applications2 lectures • 12min

Requirements

Description

Who this course is for: