Modify HTML report - add screenshot

[alexyz41]

Hello!!

First of all I would like to thank all the people that is part of this project. You guys are doing an awesome job.

I am rather new to lighthouse, so I apologise for my ignorance.

I am using lighthouse from the Windows PowerShell with the command

lighthouse https://mywebsite.com/ --locale=es

I need to modify the HTML report that the tool generates and attach a screenshot of the webpage and the URL of the website at the top of the report.

Is that possible?

Thanks

[adamraine]

It's definitely possible, you just need to modify the HTML report manually to add the picture you want. There are some screenshots used in the timeline view under performance if that helps.

[adamraine]

Ah ok. Check out the report generator then https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report. You should be able to modify the code in that folder to suit your needs.

[alexyz41]

That is awesome!! Now I have a clear idea on where I should look for the files to modify.

My doubt now is what file should I actually modify in order to accomplish my goal, and what should I add/remove.

I know that maybe that's much to ask for, so I would really appreciate any hint or code draft.

Thanks

[adamraine]

Here is something quick and easy that you can start with:

<div style="height: 200px; background-image: var(--element-screenshot-url);"></div>

Put that element at the top of the div.lh-container that has --element-screenshot-url defined in the style attribute. Result looks like this:

[alexyz41]

I really appreciate your help adamraine. I am very close to what I want to acomplish.

I am facing a problem tough. I know that the file that I want to modify is "templates.html" inside \lighthouse\lighthouse-core\report\html.

In the HTML report generated, As you said, the section I want to insert the screenshot is before "lh-container"

But then, I go to the file "templates.html" and I am not able to find that section

Can you tell me where can I find the "lh-container" section?

Thank you so much.

[adamraine]

Not everything is in the template, some is generated by JS.

Look in https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html/renderer/report-renderer.js for how the element gets added.

[ritesh-chauhan0x1]

Yes ✅ it’s possible to customize the Lighthouse HTML report and add a screenshot + the website URL at the top.
But Lighthouse does not have a built-in flag for that — you’ll need to post-process the generated report or use Lighthouse programmatically.

Option 1: Post-process the HTML file (quick hack)
Run Lighthouse normally:
lighthouse https://mywebsite.com/ --locale=es --output html --output-path=report.html

Open report.html in a text editor (VS Code).
Right after the tag, insert something like:

URL: https://mywebsite.com/

Save → open report.html in browser.
This way, the screenshot and URL will appear above the report.

Save → open report.html in browser.
This way, the screenshot and URL will appear above the report.

Option 3: Use --output json and build a custom report
Run:
lighthouse https://mywebsite.com/ --locale=es --output json --output-path=report.json
Use Lighthouse Viewer or custom HTML generator to render JSON → HTML, and add your screenshot wherever you like.

👉 If you just want a one-time simple solution, Option 1 (manual HTML edit) is fastest.
👉 If you want to repeat this every time, go with Option 2 (Node + Puppeteer automation).