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
ā Frequently Asked Questions
What is unused JavaScript?
Unused JavaScript refers to code that is downloaded by the browser but not executed or needed on the current page.
How does unused JavaScript affect SEO?
It increases page load times, negatively impacts Core Web Vitals, and can lead to higher bounce rates, all of which can hurt SEO rankings.
How can I identify unused JavaScript on my website?
You can use tools like Chrome DevTools' Coverage Tab to analyze and identify unused JavaScript code.
What is code splitting?
Code splitting is a technique where only the necessary JavaScript for a specific page is loaded, reducing the overall payload.
How can I defer or async JavaScript?
You can add the 'defer' or 'async' attribute to your script tags to prevent them from blocking the rendering of the page.