Sketchnotes for Web Performance Fundamentals

🗓 February 17, 2023

I’ve recently been inspired to sketchnote again, and have learned some new techniques (more to come about that). I’m excited to put them to use by watching Todd Gardner’s workshop "Web Performance Fundamentals" on Frontend Masters.

It was a great workshop with easy-to-follow illustrations (bonus for me!) and practical strategies to improve performance on websites. I especially enjoyed learning about how to use the Performance API, and Todd’s examples for measuring and improving core web vitals using Lighthouse.

I can tell I’m a bit rusty with organizing information in my sketchnotes, and some sections felt very messy to me while I experimented with pens and colors. Heavily inspired by a recent sketchnoting workshop taught by Eva-Lotta Lamm, I used more figures and icons in my notes that I have before, and I’m pleased with the results. Digitizing my sketchnotes remains a challenge, and I plan to experiment a bit more to refine my process. Taking notes for this course was very fun, though, and I’m looking forward to doing more sketchnotes as I learn more subject matter and think of technical topics that might be fun to illustrate!

Sketchnotes for "Why is Performance Important?" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Measuring Web Performance" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Where to Measure Performance" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Interpreting Field Data" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Improving Performance" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Improving First Contentful Paint (FCP)" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Improving Largest Contentful Paint (LCP) part 1" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Improving Largest Contentful Paint (LCP) part 2" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Improving Largest Contentful Paint (LCP) part 3" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Improving Cumulative Layout Shift (CLS)" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Improving First Input Delay (FID)" -- Web Performance Fundamentals, by Todd Gardner
Sketchnotes for "Planning Performance" -- Web Performance Fundamentals, by Todd Gardner