Advanced level · Module 5: Performance, Security and Accessibility in JavaScript · Lesson 1 of 4
Measuring and Improving Performance
Measure loading and runtime performance with Lighthouse and the Performance panel, and reduce JavaScript cost.
In this lesson you will
- Measure performance with Lighthouse and the Performance panel
- Reduce JavaScript size and main-thread work
Key concepts
Core Web VitalsLighthousebundle sizemain-thread blocking
The lesson
Users on low-end phones and slow networks feel every kilobyte and every long task. Lighthouse reports metrics such as Largest Contentful Paint and Total Blocking Time; the Performance panel shows exactly what the main thread was doing.
JavaScript is the most expensive resource per byte: it must be downloaded, parsed and executed. Remove unused libraries, load rarely used code only when needed with dynamic import(), and keep work off the critical path.
Always measure before and after a change, with network and CPU throttling to simulate a typical phone, and record the results.
Step by step
- Run Lighthouse with mobile settings and record the scores.
- Record a Performance profile of a slow interaction.
- Remove or lazy-load an unnecessary dependency.
- Measure again and compare.
Practice activity
Improve one measured performance problem in the visit tracker and document the before-and-after numbers.
Expected result: A documented, measured improvement with the method used.
Check your understanding
-
Why is JavaScript costly for performance?
Show answer
It must be downloaded, parsed and executed, which blocks the main thread.
-
What does dynamic import() allow?
Show answer
Loading a module only when it is needed.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.