Phase 1: Web Fundamentals

Lighthouse audits for performance, accessibility & SEO

Beginner ~2 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Have you ever helped bake a cake or cook a meal? You don't just want it to be edible, right? You want it to taste delicious, look amazing, and be something everyone can enjoy. Making websites is pretty similar! When people build websites, they want them to be awesome, not just functional. They want them to be super fast, easy for everyone to use, and easy for people to discover when they're searching online.

That's where something called Lighthouse comes in. Imagine Lighthouse as your super-smart chef's assistant in the kitchen. You've just finished baking a beautiful cake (which is like your finished website). Your assistant doesn't just say, "Yep, it's a cake!" Instead, they carefully check everything to make sure it’s the best cake it can be. They look at the recipe, the ingredients, and how it all came together, giving you tips to make it truly shine.

Your chef's assistant checks three main things with your cake. First, Performance: "Is this cake baking super fast so no one has to wait ages for a slice? Are we using any huge, heavy ingredients that are slowing down the whole cooking process?" (That's like making sure your website loads quickly). Second, Accessibility: "Can everyone enjoy this cake? What if someone can't have gluten or nuts? Is the frosting clearly visible even for someone who might not see all colors very well?" (This means making sure your website is easy for all people to use, including those with different needs). And third, SEO (which stands for Search Engine Optimization): "Is your bakery easy to find on the map? Does the sign outside clearly tell people what kind of amazing cake you're making so they know to come in?" (This helps search engines like Google understand your website so more people can find it).

The chef's assistant then gives you a special report card for your cake, showing you exactly what's great and what you could improve, along with clear steps on how to fix it. So, when you build your next website, you can use Lighthouse like your personal baking expert to make sure your creation isn't just a website, but a truly spectacular one that everyone loves, finds easily, and can enjoy without any trouble!

Lighthouse is an open-source, automated tool built directly into your browser's Developer Tools that helps you improve the quality of your web pages. As a frontend developer, it's crucial to build not just functional, but also high-performing, accessible, and search-engine-friendly websites. Lighthouse acts like an expert auditor, evaluating your page against a set of best practices and providing you with a detailed report. Think of it as your personal assistant, pointing out exactly where your website could be better and giving you actionable advice to make it shine.

When you run a Lighthouse audit, it primarily focuses on several key areas. Performance checks how fast your page loads and becomes interactive for users, flagging issues like large images or inefficient JavaScript that slow things down. Accessibility ensures your website is usable by everyone, including people with disabilities, by checking for things like proper color contrast, keyboard navigation, and meaningful alt text for images. Finally, SEO (Search Engine Optimization) evaluates whether your page follows basic recommendations to appear higher in search results, like having a descriptive title and meta tags. Each audit provides a score and specific, actionable recommendations to fix identified problems.

To run a Lighthouse audit, simply open your browser's DevTools (usually F12 or right-click -> Inspect), navigate to the "Lighthouse" tab, select the categories you want to audit (e.g., Performance, Accessibility, SEO), and click "Generate report." The report will give you an overall score for each category, along with a list of specific opportunities to improve, diagnostics, and passed audits. By regularly running Lighthouse checks during development, you can proactively identify and fix issues, ensuring you deliver a high-quality, user-friendly, and discoverable website that meets modern web standards.

Key Takeaways

  • Lighthouse is an automated auditing tool built into browser DevTools.
  • It evaluates your web page for Performance, Accessibility, and SEO (among other things).
  • It provides a score for each category and specific, actionable recommendations.
  • Regularly using Lighthouse helps developers build higher quality, user-friendly, and discoverable websites.

Code Example

Preview

How this code works

This HTML code constructs a simple, single-page website advertising a product, specifically designed to demonstrate how Lighthouse audits identify common accessibility issues. The document begins with <!DOCTYPE html>, declaring it as an HTML5 page, contained within the <html> tag. Inside the <head>, essential setup elements include meta charset="UTF-8" to handle character encoding correctly, and meta viewport to ensure the page adapts well to various screen sizes. The <title> tag defines the text that appears in the browser tab.

The visible content of the page is housed within the <body> tag. It includes an h1 for the main heading and a p tag for a product description. The critical element for understanding Lighthouse is the img tag, which attempts to display "product-image.jpg". This image tag intentionally omits the alt attribute. This is a subtle yet significant accessibility flaw; the alt attribute provides descriptive text for screen readers, allowing visually impaired users to understand image content, and also serves as fallback text if the image fails to load. Lighthouse will pinpoint this missing alt attribute as an accessibility audit failure, highlighting the importance of providing text alternatives for all images.

Resources

Related Articles

Hand-picked reads to go deeper on browser devtools.

Back to Frontend Developer Roadmap