It has been detected that the URL in question carries 'unused JavaScript' which is surplus to requirements for page rendering.
Why is this important?
Non-asynchronous JavaScript forces browsers to halt and execute several steps – download, parsing, compiling, and execution – before page rendering can continue. Such scripts are known as 'render-blocking' due to their impact on the rendering process. The existence of 'unused JavaScript' indicates that browsers expend time and resources processing unnecessary code, thus prolonging the rendering period.
In cases where JavaScript is asynchronous, the downloading process still contends for bandwidth with other resources, adversely affecting overall performance. Moreover, unnecessary code transmission can be particularly inefficient for mobile users with limited data plans.
What does the Optimization check?
The Optimization will be activated for any internal URL that incorporates JavaScript resources exceeding 20 KiB of unutilized code.
How do you resolve this issue?
Addressing the 'removal of unused JavaScript' is more intricate than it seems. Third-party tools like Sitebulb and Lighthouse are constrained by what insights they can provide regarding redundant JavaScript code.
As an illustrative point, Lighthouse can identify surplus code on a per-page basis, but it lacks visibility across other pages. Conversely, Sitebulb offers a 'Code Coverage' report showing unused code distribution site-wide:
<!-- Here would be an example or image of the "Code Coverage" in action -->
But caution is advised - one can never be certain that JavaScript serves no purpose:
Tools may not replicate user interactions fully and thus fail to assess all state permutations of a page.
Validating whether code performs ancillary functions, like tracking, is challenging.
Rather than heedlessly removing code due to automated suggestions, it is prudent to involve a developer intimately acquainted with the code. Their task would then be to incrementally refine the code base.