Challenge - 5 Problems
Lighthouse Performance Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate1:30remaining
Understanding Lighthouse Performance Score
You run a Lighthouse audit on an Astro site. The performance score is 45. What does this score mean for your site?
Attempts:
2 left
💡 Hint
Performance scores below 50 usually indicate slow loading times.
✗ Incorrect
A low Lighthouse performance score means the site loads slowly or inefficiently. It suggests you should optimize images, scripts, or server response times.
📝 Syntax
intermediate1:30remaining
Correct Lighthouse CLI Command for Astro Project
Which command correctly runs a Lighthouse audit on a local Astro site running at http://localhost:3000?
Attempts:
2 left
💡 Hint
Check the official Lighthouse CLI syntax for URL and output options.
✗ Incorrect
The correct Lighthouse CLI command uses the URL directly followed by output flags like --output and --output-path.
🔧 Debug
advanced2:00remaining
Why Does Lighthouse Report 'First Contentful Paint' as Slow?
You see this Lighthouse audit snippet for your Astro site:
First Contentful Paint: 5.2s (slow)
Which of these is the MOST likely cause?
Attempts:
2 left
💡 Hint
First Contentful Paint measures how fast the first visible content appears.
✗ Incorrect
Large JavaScript bundles delay rendering, causing slow First Contentful Paint. Accessibility or SEO issues don't affect this metric directly.
🧠 Conceptual
advanced2:00remaining
How Does Lighthouse Measure 'Time to Interactive'?
Which best describes how Lighthouse calculates the 'Time to Interactive' metric for an Astro site?
Attempts:
2 left
💡 Hint
Think about when a user can actually interact with the page without delay.
✗ Incorrect
Time to Interactive is when the page looks ready and responds quickly to user actions, not just when resources finish loading.
❓ state_output
expert2:30remaining
Interpreting Lighthouse JSON Report for Astro Site
Given this partial Lighthouse JSON report snippet for an Astro site:
{
"categories": {
"performance": {"score": 0.92},
"accessibility": {"score": 0.85}
},
"audits": {
"first-contentful-paint": {"numericValue": 1200},
"total-blocking-time": {"numericValue": 300}
}
}
What does the numericValue 300 for 'total-blocking-time' represent?
Attempts:
2 left
💡 Hint
Total Blocking Time relates to delays in responsiveness caused by long tasks.
✗ Incorrect
Total Blocking Time measures how long the main thread was busy and unable to respond to user input, affecting interactivity.