Integrating Lighthouse Reporting in Next.js with Puppeteer and Render

Iván Martínez Agüero — Mon, 03 Jun 2024 11:28:06 +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.

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.

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

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

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 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 and RapidAPI to see the project in action.

Happy coding!

DEV Community: Iván Martínez Agüero