General Assembly logo

Lab 11: Auditing for Speed and Inclusion

Introduction

In this lab, you’ll evaluate your website’s performance and accessibility using built-in browser tools, then work with AI to create and implement a concrete optimization plan. You’ll run audits, interpret diagnostic results, make targeted improvements, and validate measurable change.

This hands-on lab teaches you how to spot and fix issues that affect real users—especially users on low-bandwidth networks, older devices, or with assistive technology needs.

Learning Objectives

By the end of this lab, you will be able to:

  • Run a Lighthouse audit for performance, accessibility, and best practices
  • Interpret performance metrics (LCP, CLS, TBT, Time to Interactive)
  • Identify accessibility barriers using automated checks and manual inspection
  • Use an AI assistant to generate an improvement plan based on audit results
  • Implement at least three measurable improvements
  • Re-run audits to verify improvements
  • Explain how performance and accessibility changes support inclusive design

Getting Started

Prerequisites

Before starting this lab, ensure you have:

  • A working project or tutorial website to test (HTML/CSS/JS)
  • Basic understanding of HTML structure and CSS selectors
  • Familiarity with DevTools (Elements, Network, Sources)
  • A modern browser (Chrome/Edge recommended for Lighthouse)

Setup Instructions

You do not need to install anything. You will use:

  • Chrome DevTools → Lighthouse + Performance + Accessibility panels
  • A local project (opened with Live Server or a simple HTTP server)
  • An AI assistant (such as ChatGPT) to generate your optimization plan

If you need a server, run one of these in your project root:

# Python 3
python3 -m http.server

or

# Node.js
npx http-server

Open your site in the browser before beginning.

Lab Structure

This lab contains the following components:

  • README.md – Overview and instructions

Exercise Overview

In this lab, you will:

  1. Run a baseline performance and accessibility audit
  2. Document current scores and critical issues
  3. Ask an AI assistant to create an optimization plan
  4. Implement at least three changes, such as:
    • compressing images
    • reducing unused CSS
    • adding aria-labels
    • fixing color contrast
    • deferring render-blocking scripts
  5. Re-run the audits to measure improvement
  6. Reflect on how performance and accessibility affect real users

The goal of this lab is to understand measurable change via before/after scores for your metrics.

How to Work Through the Lab

  1. Open DevTools Right-click → Inspect → Lighthouse / Performance / Accessibility.

  2. Complete the tasks sequentially in the exercise document.

  3. Use AI purposefully:

    • Share your audit results (paste text or screenshot descriptions)
    • Ask for prioritized recommendations
    • Ask follow-up questions as needed

  4. Make improvements manually in your own code.

  5. Re-test after each change or group of changes. Watch for changes in:

    • Performance Score
    • Largest Contentful Paint
    • CLS
    • Accessibility Score

  6. Write a short reflection on what changed and why.

Exercise Breakdown

⏱Part 1 - Baseline Audit

  1. Open your site in Chrome.
  2. Open DevTools → Lighthouse → select:
    • Performance
    • Accessibility
    • Best Practices
  3. Run the test in Mobile mode.
  4. Record your results in a table:
Category Score
Performance
Accessibility
Best Practices
  1. Identify the top three critical issues listed in:
    • Performance → “Opportunities”
    • Accessibility → “Failing audits”

⏱Part 2 - AI Optimization Plan

Send the following prompt to your AI assistant:

Prompt: “Here are my Lighthouse results for performance and accessibility: [paste your issues] Please create a prioritized, step-by-step plan that can be completed in under one hour. Include code examples when applicable.”

Save the plan into your notes.

⏱Part 3 - Implement Improvements

Choose at least three improvements from the AI plan, such as:

Performance Examples

  • Convert large PNG/JPG images to WebP
  • Add loading="lazy" to non-critical images
  • Inline critical CSS; defer larger CSS files
  • Move render-blocking JS to defer or async
  • Remove unused CSS or JS
  • Optimize font loading (e.g., font-display: swap)

Accessibility Examples

  • Add aria-labels to ambiguous buttons/links
  • Ensure heading hierarchy (h1 → h2 → h3...)
  • Increase color contrast to meet WCAG AA
  • Add meaningful alt text to images
  • Ensure interactive components are keyboard-focusable

Make and save your changes.

⏱Part 4 - Re-Audit and Compare

Re-run Lighthouse.

Update your table:

Category Before After Change
Performance
Accessibility
Best Practices

List the top measurable wins (e.g., “LCP improved from 3.8s to 2.2s”).

Reflection Questions

Answer these in 5–7 sentences:

  1. Which change produced the biggest performance improvement?
  2. Which accessibility issue was most surprising or educational?
  3. How does performance relate to inclusion and equity?
  4. If you had another hour, what would you prioritize next?

Tips for Success

  • Run audits in Incognito to avoid extensions interfering
  • Test both Mobile and Desktop
  • Many small changes often outperform one big change
  • Always retest after modifying images or scripts
  • If a metric doesn’t change, verify the fix actually shipped (no cached files!)

Common Issues and Troubleshooting

Issue: Audit score doesn’t improve

  • Clear cache or use Ctrl+Shift+R
  • Confirm changes affect the audited page
  • Verify image compression actually reduced file size

Issue: LCP image still large

  • Use WebP or AVIF
  • Preload the LCP image
  • Remove over-large hero images

Issue: Accessibility score stuck

  • Some issues are manual checks (keyboard navigation, semantics)
  • Use Chrome’s “Elements → Accessibility” panel

Issue: CLS still high

  • Ensure images have dimensions
  • Avoid layout-shifting elements
  • Preload fonts