Running a Performance Report
- Enter the target website URL in the search bar on the Homepage.
- Click the Analyze button to request diagnostic reports.
- Wait for the analysis to complete. The app will fetch real-time Lighthouse audits.
- Toggle between the report categories at the bottom of the overview card: Performance, Accessibility, Best Practices, and SEO.
Understanding Performance Scores
Lighthouse category scores range from 0 to 100. They are colored according to the following thresholds:
- Green (90 - 100): Good. The page is optimized and conforms to industry performance guidelines.
- Orange (50 - 89): Average. The page is functional but contains room for optimization.
- Red (0 - 49): Poor. The page has major speed regressions or structural issues requiring immediate developer attention.
Opportunities & Diagnostics
The core report sections pinpoint exactly what is delaying page renders:
- Opportunities: These identify areas where you can reduce resource weights or timings (e.g. "Reduce unused JavaScript" or "Serve images in next-gen formats"). Estimated savings in milliseconds are shown next to each item.
- Diagnostics: These provide technical data about the page's execution limits (e.g. main thread execution delays, excessive DOM tree depths, or render-blocking network requests).
- Passed Audits: Display a list of successful performance indicators that the page satisfies.
Exporting Reports (Download PDF)
When viewing a generated report, you can click the Download PDF button at the top of the results card. This formats a print-friendly document utilizing standard media queries:
- Exposes all four audit categories simultaneously in the PDF layout.
- Applies page break optimizations to prevent content cards or list items from splitting awkwardly across sheets.
- Suppresses interactive UI elements (search bars, tab selectors, loading frames) to maintain clean margins.