PageSpeed Insights Overview

This is a Next.js application built in Firebase Studio that provides a dashboard to visualize and analyze Google PageSpeed Insights (Lighthouse) reports. It offers an aggregated view of performance scores and actionable recommendations from JSON report files stored locally.

Features

• Aggregated Dashboard: View key performance metrics from multiple Lighthouse reports in a single, easy-to-read table.
• Dynamic Sorting & Filtering: Sort reports by any metric (e.g., Performance, SEO, LCP) and filter them by name or report type.
• Actionable Recommendations: Click on any report to open a dialog with a list of prioritized opportunities to improve your site's scores, including estimated savings.
• Responsive Design: The interface is designed to work seamlessly across desktop and mobile devices.
• Local Report Processing: Simply place your Lighthouse JSON reports in the reports directory, and the app will automatically process them.

How It Works

The application scans a designated reports directory for JSON files generated by Lighthouse. It expects a directory structure like ./reports/[TYPE]/[NAME].json.

• [TYPE] represents the category of the report (e.g., mobile, desktop).
• [NAME].json is the actual Lighthouse report file.

The parser extracts key information, including performance scores, core web vitals (FCP, LCP, Speed Index), and detailed audit opportunities. This data is then displayed in an interactive table.

Running Locally

To run this project on your local machine, follow these steps:

1. Install dependencies:

   npm install

2. Add Reports: Create a reports directory in the project root. Inside it, create subdirectories for your report types (e.g., desktop, mobile) and place your Lighthouse .json files there.

   Example structure:

   /reports
   ├── /desktop
   │   └── my-project.json
   └── /mobile
       └── my-project.json
   

3. Run the development server:

   npm run dev

The application will be available at http://localhost:9002.