Bird
Raised Fist0
Astroframework~8 mins

Performance auditing with Lighthouse in Astro - Performance & Optimization

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Performance: Performance auditing with Lighthouse
HIGH IMPACT
This affects the overall page load speed, interactivity, and visual stability by identifying performance bottlenecks and opportunities for improvement.
Checking and improving page performance in an Astro project
Astro
Run Lighthouse audit via Chrome DevTools or CLI to get detailed performance reports and actionable fixes.
Automated, reliable detection of performance bottlenecks with clear guidance on improvements.
📈 Performance GainImproves LCP, INP, and CLS by targeting real issues; reduces load and interaction delays.
Checking and improving page performance in an Astro project
Astro
No performance audit is run; developers rely on manual checks or guesswork.
Without automated audits, performance issues remain hidden, causing slow load times and poor user experience.
📉 Performance CostLeads to slow LCP and high INP, negatively impacting Core Web Vitals.
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
No audit or manual checksUnknown, possibly highUnknown, possibly manyUnknown, possibly high[X] Bad
Using Lighthouse auditMeasured and optimizedMinimized by fixesReduced by optimizations[OK] Good
Rendering Pipeline
Lighthouse analyzes the critical rendering path by simulating page load and interaction, measuring how resources and code affect style calculation, layout, paint, and composite stages.
→Style Calculation
→Layout
→Paint
→Composite
⚠️ BottleneckLayout and Paint stages often cause the biggest delays detected by Lighthouse.
Core Web Vital Affected
LCP, INP, CLS
This affects the overall page load speed, interactivity, and visual stability by identifying performance bottlenecks and opportunities for improvement.
Optimization Tips
1Run Lighthouse audits early and often to catch performance issues.
2Focus on improving LCP, INP, and CLS scores for better user experience.
3Use Lighthouse recommendations to optimize CSS, JavaScript, and resource loading.
Performance Quiz - 3 Questions
Test your performance knowledge
What Core Web Vital does Lighthouse help improve by reducing the time it takes for the main content to appear?
ACumulative Layout Shift (CLS)
BInteraction to Next Paint (INP)
CLargest Contentful Paint (LCP)
DFirst Input Delay (FID)
DevTools: Lighthouse panel in Chrome DevTools
How to check: Open Chrome DevTools, go to Lighthouse tab, select performance categories, run audit, and review the report.
What to look for: Look for LCP, INP, and CLS scores, and check opportunities and diagnostics sections for actionable advice.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard