Lighthouse Hands-On 2

Back

This site will help you understand the capabilities of the Lighthouse tool by showing examples of poor practices.

Lighthouse Tool Practice

Lighthouse is an open-source automated tool for improving the quality of web pages. It can audit performance, accessibility, progressive web apps, SEO, and more.

How to Access Lighthouse

  1. Open Chrome DevTools by pressing F12 or Ctrl+Shift+I (or Cmd+Option+I on Mac)
  2. Click on the "Lighthouse" tab in the DevTools panel
  3. Alternatively, you can access it through Chrome's menu: More Tools → Developer Tools → Lighthouse

Exercises

  1. Run a Lighthouse audit on this page with default settings
  2. Review the report and identify potential improvements
  3. Try running the audit in both mobile and desktop device modes

Performance Issues

This section demonstrates performance problems that Lighthouse will detect.

Accessibility Problems

Here are some elements with accessibility issues:

This text has poor contrast

Best Practices Issues

Elements that violate best practices:

Insecure image Deprecated font tag Moving text is outdated

SEO Problems

Issues that hurt search engine optimization:

Another H1 in the page

Click here Read more
1 2

PWA Failures

Missing elements required for Progressive Web Apps:

Layout Shift Demonstration

Watch how elements shift after loading:

Content that will shift

Instructor Notes

To use Lighthouse effectively:

  1. Open Chrome DevTools (F12 or right-click → Inspect)
  2. Navigate to the Lighthouse tab
  3. Select categories to audit (Performance, Accessibility, Best Practices, SEO, PWA)
  4. Choose device emulation (Mobile or Desktop)
  5. Click "Generate report" and analyze the results

Have students identify at least 3 issues from each category and propose solutions.