A JavaScript snippet that sets all Lighthouse scores to 100%
Metrics. Metrics is something that we all use to measure (flex) the success of our websites. One of the ways to benchmark the success of a website, these days, is to use Lighthouse, a tool that helps us to audit the performance of our websites.
It benchmarks the overall performance based on four main metrics: Performance, Accessibility, Best Practices, and SEO. If your website can score 100 in all four metrics, it’s a good sign that your website is performing well. But if it isn’t, it’s time to look at what’s going wrong.
It’s a long road to fix even if the score is at around 70-80. You’d need to tweak a lot of things to align the Lighthouse scores to 100%.
But you know what? Some guys were able to put together a JavaScript snippet that fakes all Lighthouse scores to 100% in a cinch.
The code goes like this.
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: (string, sink) => string
});
}
$$('.lh-gauge__wrapper').forEach((wrapper, i) => {
const percentage = wrapper.querySelector('.lh-gauge__percentage');
let clone = percentage.cloneNode();
clone.innerHTML = 100;
wrapper.style.color = 'var(--color-pass-secondary)';
wrapper.style.fill = wrapper.style.stroke = 'var(--color-pass)';
wrapper.removeChild(percentage);
wrapper.appendChild(clone);
wrapper.querySelector('.lh-gauge-arc').style.strokeDasharray = '351.858,351.858';
});
I’m not going deeper into how this code works. But you can refer this ChatGPT response that explains it in detail.
Anyway, the way this works is you would first need to open up the DevTools on your website, open the Lighthouse tab, and start the analysis. This will show the “real” Lighthouse score of your website.
The fun part starts now. You will need to undock the DevTools, press Command + Option + i (Ctrl + Shift + i on Windows) for this window. This will open the DevTools on the DevTools. Open the console tab there and paste the code above.
Now go back to your website and open DevTools again. You should see the Lighthouse scores all turned to green with 100% scores.
This is pretty unethical and shady but still, some people contemplate doing this. Fool’s paradise, you know?
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
