Performance auditing with Lighthouse in Astro - Step-by-Step Execution

Concept Flow - Performance auditing with Lighthouse

Start: Open Astro project

↓

Run Lighthouse audit

↓

Lighthouse collects data

↓

Analyze performance metrics

↓

View report with scores & suggestions

↓

Apply improvements

↓

Re-run audit to check progress

↓

End

This flow shows how Lighthouse audits an Astro project by collecting data, analyzing performance, and giving improvement suggestions.

Execution Sample

Astro

1. Open Astro project in browser
2. Open DevTools > Lighthouse tab
3. Click 'Generate report'
4. Wait for audit to finish
5. Review scores and suggestions

Steps to run a Lighthouse performance audit on an Astro project in the browser.

Execution Table

Step	Action	Lighthouse Activity	Result/Output
1	Open Astro project in browser	Browser loads Astro site	Page fully loaded
2	Open DevTools and select Lighthouse tab	Prepare audit environment	Ready to run audit
3	Click 'Generate report'	Lighthouse starts collecting data	Gathering metrics: FCP, LCP, TTI, etc.
4	Wait for audit to finish	Lighthouse runs tests and analyzes data	Performance score calculated
5	View report	Lighthouse displays scores and suggestions	Report shows scores and improvement tips
6	Apply suggested improvements	Developer updates Astro code and assets	Site optimized
7	Re-run audit	Lighthouse collects new data	Improved performance scores
8	End	Audit complete	Performance verified

💡 Audit ends after Lighthouse completes data collection and report generation

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 7	Final
Performance Score	N/A	N/A	e.g. 65	e.g. 85	Final improved score
Audit Status	Not started	Running	Completed	Completed	Completed
Suggestions	None	Collecting	List of fixes	Updated list	None after fixes

Key Moments - 3 Insights

Why does the performance score change after re-running the audit?

Because after applying improvements, Lighthouse measures the updated site, so the score reflects the new performance (see execution_table rows 6 and 7).

What does Lighthouse measure during the audit?

It collects metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Time to Interactive (TTI) to assess performance (see execution_table row 3).

Why is it important to apply suggestions from the report?

Applying suggestions improves site speed and user experience, which is confirmed by better scores on re-run audits (see execution_table rows 6 and 7).

Visual Quiz - 3 Questions

Look at the execution_table, what is the Performance Score after the first audit completes (Step 5)?

A N/A

B e.g. 65

C e.g. 85

D Final improved score

💡 Hint

Check the 'Performance Score' variable in variable_tracker after Step 5

At which step does Lighthouse start collecting performance metrics?

A Step 2

B Step 5

C Step 3

D Step 7

💡 Hint

Look at execution_table row describing 'Click Generate report'

If you skip applying improvements, what happens to the performance score on re-run?

A It stays the same or may worsen

B It improves automatically

C It resets to zero

D It becomes perfect

💡 Hint

Refer to key_moments about applying suggestions and score changes

Concept Snapshot

Performance auditing with Lighthouse in Astro:
- Open Astro site in browser
- Use DevTools Lighthouse tab
- Run audit to collect metrics
- View scores and suggestions
- Apply fixes to improve
- Re-run audit to verify gains

Full Transcript

Performance auditing with Lighthouse in Astro involves opening your Astro project in a browser, then using the browser's DevTools Lighthouse tab to run an audit. Lighthouse collects key performance metrics like First Contentful Paint and Time to Interactive. After the audit finishes, it shows scores and suggestions to improve your site. You apply these improvements in your Astro code and assets, then re-run the audit to see if your performance scores have improved. This process helps make your site faster and better for users.

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