Running Your First Audit

Welcome to your first hands-on Lighthouse audit! In this lesson, you'll learn how to run an audit on any webpage and understand its performance scores.

Lighthouse is a powerful tool built by Google to help developers improve the quality of their web pages. It checks for performance, accessibility, SEO, and more.

Google Lighthouse is built right into your Chrome browser's developer tools. You don't need to install anything extra!

• Open Chrome and navigate to any webpage.
• Right-click anywhere on the page and select "Inspect" (or use Ctrl+Shift+I / Cmd+Option+I).
• This opens the Developer Tools panel.

Once Developer Tools are open, navigate to the Lighthouse tab. You'll see options to configure your audit:

• Categories: Choose which aspects to check (e.g., Performance, Accessibility).
• Device: Select "Mobile" or "Desktop" to simulate different environments.
• Click "Analyze page load" to start!

Lighthouse audits cover several key areas to give you a complete picture of your website's health:

• Performance: How fast your page loads and responds.
• Accessibility: How usable your page is for people with disabilities.
• Best Practices: General web development recommendations.
• SEO: How well your page is optimized for search engines.
• PWA: Checks for Progressive Web App standards (if applicable).

When you click "Analyze page load," Lighthouse goes to work:

• It loads your page in a simulated, controlled environment.
• It gathers data on various metrics like load times, user interactions, and best practice adherence.
• This data is then compiled into a comprehensive report, which you'll see in the DevTools panel.

After the audit, you'll see an overall score for each category, usually from 0 to 100. Higher is better!

Each score is an average of several underlying metrics. For example, the Performance score combines metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

Lighthouse uses a color-coded system to quickly show you how your page performs:

• 0-49 (Red): Poor performance. There's significant room for improvement.
• 50-89 (Orange): Average performance. Good, but could be better.
• 90-100 (Green): Excellent performance. Your page is doing great!

Aim for green scores across all categories for the best user experience.

Imagine you audit a simple blog post. Lighthouse might give you a report like this:

• Performance: 75 (Orange)
• Accessibility: 98 (Green)
• Best Practices: 90 (Green)
• SEO: 85 (Orange)

This report tells you your blog is accessible and follows many best practices, but its performance and SEO could use some tweaks.

To get the most accurate and consistent results from Lighthouse, keep these tips in mind:

• Use Incognito Mode: This disables browser extensions that might interfere.
• Stable Network: Ensure you have a consistent internet connection.
• Close Other Tabs: Reduce background activity for clearer results.
• Run Multiple Times: Performance can vary slightly, so run a few audits and average the scores.

Let's test what you've learned about Lighthouse scoring.

Great job! You've learned how to run your first Lighthouse audit and understand its scoring system.

• You can access Lighthouse via Chrome DevTools.
• Audits cover Performance, Accessibility, Best Practices, SEO, and PWA.
• Scores are color-coded: 0-49 (red), 50-89 (orange), 90-100 (green).
• For accurate results, use Incognito mode and a stable network.

Next, we'll dive deeper into interpreting these reports and understanding the recommendations!