I'm building a blogging plugin that enables commenting on specific pages. The way it works at the moment is that you include a js script in your html page, which then triggers at load time and adds a comment box to the page.
It's all running properly, however when running Lighthouse reports I still get a "Remove unused Javascript".
I assume this is happening because the code isn't immediately used, but rather initiated once the page has fully loaded?
Any idea how I could fix this?
"Remove Unused JavaScript" isn't telling you that the script isn't used, it is telling you that within that script you have JavaScript that isn't needed for page load.
What it is encouraging you to do is "code splitting", which means you serve JS essential for the initial page content (known as above the fold content) first and then later send any other JS that is needed for ongoing usage on the site.
If you look at the report and open the entry you will see it has a value that shows how much of the code base is not needed initially.
If the script is small (less than 5kb), which I would imagine it is if all it does is create a comment box, then simply ignore this point. If it is larger (and you can't easily make it smaller) - split it into "initialisation" code and "usage" code / the rest of the code and serve the "initialisation" code early and the rest after all essential items have loaded or on intent.
It does not contribute to your score directly and is there purely to indicate best practices and highlight potential things that are slowing your site down.
From the comments the author has indicated the library is rather large at 70kb, due to the fact it has a WYSIWYG etc.
If you are trying to load a large library but also be conscious about performance the trick is to load the library either "on intent" or after critical files have loaded.
There are several ways to achieve this.
If you have a complex item to appear "above the fold" and you want high performance scores you need to make a trade-off.
One way to do this is instead of having the component initialised immediately you defer the initialisation of the library / component until someone needs to do use it.
For example you could have a button on the page that says "leave a comment" (or whatever is appropriate) that is linked to a function that only loads the library once it is clicked.
Obviously the trade-off here is that you will have a slight delay loading and initialising the library (but a simple load spinner would suffice as even a 70kb library should only take a second or so to load even on a slow connection).
You can even fetch the script once someone's mouse cursor hovers over the button, those extra few milliseconds can add up to a perceivable difference.
We obviously have the async and defer attribute.
The problem is that both mean you are downloading the library alongside critical assets, the difference is when they are executed.
What you can do instead is use a function that listens for the page load event (or listens for all critical assets being loaded if you have a way of identifying them) and then dynamically adds the script to the page.
This way it does not take up valuable network resources at a time when other items that are essential to page load need that bandwidth / network request slot.
Obviously the trade-off here is that the library will be ready slightly later than the main "above the fold" content. Yet again a simply loading spinner should be sufficient to fix this problem.
