P0Issue #4
Reduce Unused JS
ā What does it mean?
What does it mean?
Unused JavaScript refers to JS code that is downloaded but never executed (or not needed on the current page).
Examples include:
Loading a large UI library but using only a small part of it.
Shipping debugging scripts in production.
Including third-party widgets (e.g., chat, analytics) that are not immediately required.
This extra JS increases file size, delays parsing & execution, and slows down page rendering.
šØ Why is it important for SEO?
Why is it important for SEO?
Page Speed Impact ā Large JS files delay First Contentful Paint (FCP) and Interaction to Next Paint (INP).
Mobile Performance ā Slower devices take longer to parse JS, hurting user experience.
Core Web Vitals ā Excess JS increases Total Blocking Time (TBT) and Time to Interactive (TTI).
SEO Ranking Factor ā Google rewards faster, responsive pages with better visibility.
ā How to Fix It
ā
How to Fix It
Audit JS usage ā Use Chrome DevTools ā Coverage Tab to see unused code.
Code splitting ā Load only the JavaScript needed for each page (tree-shaking).
Remove unnecessary libraries ā Replace large frameworks with lighter alternatives.
Defer or async non-critical JS ā Avoid blocking rendering.
Lazy load third-party scripts ā e.g., chatbots, analytics, ads only after interaction.
ā Bad Example
š Example
ā Bad (Lots of unused JS):
<head>
<!-- Loads entire jQuery (90KB) just to use one function -->
<script src="https://cdn.com/jquery.min.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<button onclick="$('#msg').hide()">Hide Message</button>
</body>
Loads 90KB jQuery, but only uses .hide().
Adds unnecessary parsing & execution time.
ā Good Example
ā
Good (Optimized JS):
<head>
<!-- Inline only the needed function -->
<script defer>
function hideMsg() {
document.getElementById('msg').style.display = 'none';
}
</script>
</head>
<body>
<button onclick="hideMsg()">Hide Message</button>
<p id="msg">Hello World!</p>
</body>
JS reduced from 90KB ā 1KB.
Page loads faster and interaction is immediate.
ā” Result
ā” Result
Faster FCP, TTI & INP
Lower JavaScript payload ā especially beneficial on mobile
Improved Core Web Vitals & SEO rankings