Lighthouse Hands-On 4

Back

Lighthouse Tool Practice

In this exercise, you'll learn how Lighthouse identifies performance and accessibility issues.

How to Use This Page

  1. This page intentionally contains performance, accessibility, and best practices issues
  2. Run a Lighthouse audit to identify the problems (expect low scores!)
  3. Use the buttons to fix issues one by one
  4. Re-run Lighthouse after each fix to see how scores improve

Common Issues Lighthouse Detects

Exercise 1: Image Optimization

Problems: Unoptimized image, missing dimensions, no lazy loading

Exercise 2: Font Loading

This text uses a render-blocking font

Problem: Render-blocking font loading

Exercise 3: JavaScript Performance

🎈

Problem: Inefficient JavaScript animation blocking main thread

Exercise 4: Accessibility Challenge

Click me if you can see me!

Problems: Poor color contrast, missing ARIA attributes

Exercise 5: SEO Fun

Click here for stuff

Problems: Missing alt text, non-descriptive link text

Lighthouse Tips