Lesson 5
Performance & Lighthouse
Build a practical mental model for performance & lighthouse and use it in working JavaScript.
By the end, you will be able to…
- Explain performance & lighthouse in your own words
- Use performance & lighthouse in a small program
- Recognize and debug a common failure mode
Build the mental model
Performance work starts with measurement, not guessing — tools like Lighthouse quantify load time, interactivity, and visual stability so you can target the biggest real bottleneck instead of optimizing whatever feels slow.
Syntax and working example
Read the code from inputs to output. Predict what it prints, then run it and change one value.
Why this matters
Slow pages measurably lose users and, for public sites, search ranking; performance is a feature, not an afterthought.
Real-world example
An e-commerce site lazy-loading below-the-fold product images to improve its Lighthouse score is a direct application of this lesson.
Common mistakes
- Optimizing based on a feeling instead of measuring with a real tool first
- Shipping large third-party libraries for a small feature
- Loading every image at full resolution regardless of display size
Try it yourself
Challenge
Write estimatePayloadKb(assets) summing an array of asset sizes, flagging if it's over a budget.
Knowledge check
What should come before optimizing a page's performance?
Summary
Measure first with a tool like Lighthouse, then target the biggest real bottleneck instead of guessing.