Integrating Lighthouse Reporting in Next.js with Puppeteer and Render
Tags: nextjs, performance, a11y, seo
Published: 2024-06-03 11:28:06

---
title: Integrating Lighthouse Reporting in Next.js with Puppeteer and Render
published: true
description: Integrated Lighthouse reporting into a Next.js application using Puppeteer and deployed it on Render.com. The performance score might be lower when testing on the local server, but it improves in the production environment.
tags: nextjs, performance, accessibility, seo
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-05-16 07:18 +0000
---
## Introduction

In this article, I'll walk you through a project where I integrated Lighthouse reporting into a Next.js application using Puppeteer and deployed it on Render.com. The performance score might be lower when testing on the local server, but it improves in the production environment.

![Understanding Website Performance](https://labs.systec.dev/blog/understanding-website-performance.png)

## Overview

This project involves a Next.js component that makes a request to an API route. The API route connects to a service that generates the Lighthouse report. The implementation uses Puppeteer and Lighthouse running a Chrome instance on a remote server.

![Lighthouse Reporting](https://labs.systec.dev/_next/image?url=%2Fblog%2Funderstanding-lighthouse-image1.png&w=828&q=75)

## Project Setup

Here is a brief overview of the setup and deployment process:

### GitHub Repository

You can find the source code for the project on GitHub: [GitHub - alcance/lighthouse-reporter](https://github.com/alcance/lighthouse-reporter)

### API Deployment

I deployed the API on Render.com. Although it took some effort, I managed to get it running with Puppeteer and Lighthouse. You can explore the API on RapidAPI: [Lighthouse AutoReporter on RapidAPI](https://rapidapi.com/alcance-o0F_JAYX0/api/lighthouse-autoreporter)

### Current Features

- **JSON Report:** Generates a Lighthouse report in JSON format.
- **PDF Report:** Generates and sends a Lighthouse report in PDF format via email.
- **Email Functionality:** The service can send the generated PDF report to the user's email.

## Challenges and Solutions

### Performance Issues

Running the service on a machine with limited resources (0.5 CPUs and 512MB RAM) affects the performance score. For instance, a website like https://labs.systec.dev usually scores 80-90 on performance, but on the Render machine, it scored around 35. Upgrading to 2 CPUs and 2GB RAM can significantly improve the performance.

### Handling CORS

I encountered CORS issues, which I resolved by correctly setting the headers. Additionally, I opted for the Pro plan on Render.com ($85/month) for better resource allocation (4GB RAM, 2 CPUs).

### Rate Limiting and Abuse Prevention

To prevent abuse, I plan to integrate browser fingerprinting and set a limit on the number of requests per client. The [FingerprintJS](https://github.com/fingerprintjs/fingerprintjs) library can generate a visitor ID to track and limit requests.

### Caching

Initially, I considered using Vercel functions for caching but decided against it due to complexity. Instead, a simple table-based cache was sufficient for my needs.

## Future Improvements

Here are some ideas for further enhancing the service:

- **User Management:** Implement a robust system for handling users and their requests.
- **Enhanced Reporting:** Add more detailed audit content to the PDF reports.
- **Integration with Gemini API:** Connect to the Gemini API to interpret report results and allow users to ask questions about their performance.

## Conclusion

This project demonstrates how to integrate Lighthouse reporting into a Next.js application using Puppeteer and Render. The setup, although challenging at times, provides a valuable service for generating on-the-fly Lighthouse reports. Feel free to explore the [GitHub repository](https://github.com/alcance/lighthouse-reporter) and [RapidAPI](https://rapidapi.com/alcance-o0F_JAYX0/api/lighthouse-autoreporter) to see the project in action.

Happy coding!