I’m having an issue running a Lighthouse test on a page I’m testing. I think I’ve found the root of the problem – but I don’t fully understand why it is causing a problem at the exact same script works and allows a test on another page I have.
I think the Javascript in Question is this small bit I have to fade the page in when it’s loaded. Where script is located just after the opening <body> to apply a class. Then in an external main.js file an addEventListener runs.
.html file
<script>document.body.className = 'hidden';</script>
External main.js file
window.addEventListener('DOMContentLoaded', function() {
document.body.className = 'visible';
});
Removing this seems to fix the issue but I have the EXACT same code on another site and there is no issue. Is there an obvious reason for this?
There are scripts at the bottom of the page before the closing </body> which I thought might be clashing in someway. But I’ve removed all the other scripts just to be sure, just leaving the above and I still get the issue.
Really, I guess I don’t need this. I could just use a ‘fake’ CSS only fade-in on load. But I don’t understand how the same code isn’t a problem elsewhere. Does it come down to the content of the page? But there’s nothing major on either other than text + images.
Here’s the screenshot of the Lighthouse error for reference. Hope someone can clear things up for me, thanks! 🙂