Performance auditing with Lighthouse in Astro - Mini Project: Build & Apply

Performance Auditing with Lighthouse in Astro

📖 Scenario: You are building a simple Astro website for a local bakery. You want to make sure the site loads fast and performs well on all devices. To do this, you will set up a basic Astro page and then learn how to audit its performance using Lighthouse, a tool built into modern browsers.

🎯 Goal: Create a basic Astro page with bakery information, configure a Lighthouse performance audit, and understand how to interpret the audit results to improve your site.

📋 What You'll Learn

Create an Astro page with bakery details

Add a configuration variable for Lighthouse audit settings

Run Lighthouse audit programmatically or via browser DevTools

Add final tags or attributes to improve performance based on audit

💡 Why This Matters

🌍 Real World

Performance audits help websites load faster and provide better user experience, especially important for small businesses like bakeries to attract and keep customers.

💼 Career

Knowing how to use Lighthouse and improve web performance is a key skill for frontend developers and web designers.

1

Create the initial Astro page with bakery info

Create a new Astro component file named Bakery.astro. Inside it, create a basic HTML structure with a <main> tag containing an <h1> with the text "Sunshine Bakery" and a <p> with the text "Fresh bread and pastries every day.".

Astro

Hint

Use semantic HTML tags inside the Astro component to structure your content.

2

Add Lighthouse audit configuration variable

Inside the Bakery.astro file, add a const variable named lighthouseConfig and set it to an object with a property categories set to an array containing the string "performance".

Astro

  Sunshine Bakery
  Fresh bread and pastries every day.


// Add lighthouseConfig variable here

Hint

This config will tell Lighthouse to focus on performance audits only.

3

Add script to run Lighthouse audit in browser DevTools

Add a <script> tag below the <main> tag. Inside it, write a comment // Run Lighthouse audit manually in browser DevTools for this page to remind yourself how to start the audit.

Astro

const lighthouseConfig = {
  categories: ["performance"]
};


  Sunshine Bakery
  Fresh bread and pastries every day.

Hint

Lighthouse audits are usually run from browser DevTools, so this comment helps remember that.

4

Add loading="lazy" attribute to images for better performance

Add an <img> tag inside the <main> tag with src="/bread.jpg" and alt="Fresh bread". Add the attribute loading="lazy" to this image to improve page load performance.

Astro

const lighthouseConfig = {
  categories: ["performance"]
};


  Sunshine Bakery
  Fresh bread and pastries every day.
  



  // Run Lighthouse audit manually in browser DevTools for this page

Hint

Lazy loading images helps the page load faster by loading images only when needed.

Practice

1. What is the main purpose of using Lighthouse with an Astro site?

easy

A. To check and improve the site's performance and usability

B. To write new Astro components automatically

C. To deploy the Astro site to a server

D. To convert Astro code into plain HTML

Solution

1. Step 1: Understand Lighthouse's role

   Lighthouse is a tool designed to analyze websites and provide reports on performance, accessibility, SEO, and best practices.

2. Step 2: Relate to Astro site improvement

   Using Lighthouse on an Astro site helps find ways to improve speed and usability, making the site better for users.

3. Final Answer:

   To check and improve the site's performance and usability -> Option A

4. Quick Check:

   Lighthouse purpose = Performance & usability check [OK]

Hint: Lighthouse audits site quality, not code writing or deployment [OK]

Common Mistakes:

• Thinking Lighthouse writes code
• Confusing Lighthouse with deployment tools
• Assuming Lighthouse converts code formats

2. Which command correctly runs Lighthouse from the command line for the URL https://example.com?

easy

A. start lighthouse --url https://example.com

B. run lighthouse https://example.com

C. lighthouse https://example.com

D. lighthouse run https://example.com

Solution

1. Step 1: Recall Lighthouse CLI syntax

   The basic command to run Lighthouse is simply lighthouse followed by the URL.

2. Step 2: Match the correct syntax

   lighthouse https://example.com matches the correct syntax: lighthouse https://example.com. Other options add unnecessary words or flags.

3. Final Answer:

   lighthouse https://example.com -> Option C

4. Quick Check:

   Correct CLI syntax = lighthouse URL [OK]

Hint: Use just 'lighthouse' plus URL to run audit [OK]

Common Mistakes:

• Adding extra words like 'run' or 'start'
• Using incorrect flags or options
• Confusing command order

3. After running Lighthouse on your Astro site, you see a low score in the 'Performance' category. What is the most likely cause?

medium

A. The site is missing a favicon

B. The site uses too many Astro components

C. The site has no SEO metadata

D. The site has large images and slow loading scripts

Solution

1. Step 1: Understand what affects Performance score

   Performance issues usually come from slow loading resources like large images or heavy scripts.

2. Step 2: Eliminate unrelated options

   SEO metadata and favicon affect SEO or appearance, not performance. Number of Astro components alone doesn't cause low performance.

3. Final Answer:

   The site has large images and slow loading scripts -> Option D

4. Quick Check:

   Performance issues = large images or slow scripts [OK]

Hint: Performance drops mainly due to heavy resources [OK]

Common Mistakes:

• Confusing SEO issues with performance
• Blaming Astro components count directly
• Ignoring resource sizes

4. You ran Lighthouse but the report shows no data and an error message. What is the most likely mistake?

medium

A. You ran Lighthouse without specifying a URL

B. You ran Lighthouse on a local file without a server

C. You forgot to install Astro globally

D. You used an outdated version of Node.js

Solution

1. Step 1: Identify why Lighthouse shows no data

   Lighthouse needs a live URL to audit. Running it on a local file without a server means no data can be fetched.

2. Step 2: Check other options

   Not specifying a URL would cause a command error, not a no data report. Astro installation or Node.js version do not directly cause this error.

3. Final Answer:

   You ran Lighthouse on a local file without a server -> Option B

4. Quick Check:

   Lighthouse needs live URL, not local file [OK]

Hint: Always run Lighthouse on a live server URL, not local files [OK]

Common Mistakes:

• Running Lighthouse on local files without server
• Ignoring error messages about URL
• Assuming Astro install affects Lighthouse

5. You want to improve your Astro site's Lighthouse performance score. Which combination of actions is best?

hard

A. Optimize images, lazy-load components, and reduce JavaScript size

B. Add more Astro components and increase CSS animations

C. Remove all images and use only text content

D. Disable Lighthouse caching and run audits repeatedly

Solution

1. Step 1: Identify actions that improve performance

   Optimizing images reduces load time, lazy-loading defers offscreen content, and reducing JS size speeds up scripts.

2. Step 2: Evaluate other options

   Adding components or animations can slow performance. Removing all images is impractical. Disabling caching doesn't improve site speed.

3. Final Answer:

   Optimize images, lazy-load components, and reduce JavaScript size -> Option A

4. Quick Check:

   Best performance = optimize images + lazy-load + reduce JS [OK]

Hint: Focus on image size, lazy loading, and JS reduction [OK]

Common Mistakes:

• Thinking more components always help
• Removing images entirely
• Misunderstanding caching effects