P1Issue #62
Reduce Unused Javascript
ā What does it mean?
ā What does it mean?
When a webpage loads JavaScript files that are not used during rendering or interaction, they unnecessarily increase page weight, slow down load times, and affect SEO.
For example, loading an entire library (like jQuery or a UI framework) but using only 10% of its features leads to unused JavaScript.
šØ Why is it important for SEO?
šØ Why is this a problem for SEO?
Slow Page Speed ā More JS = longer download & execution time.
Poor Core Web Vitals ā Heavy JS delays First Input Delay (FID) & Interaction to Next Paint (INP).
Mobile Performance Issues ā Limited device CPU struggles to parse unused JS.
Crawl Budget Waste ā Search engines may face render-blocking delays.
ā How to Fix It
ā
Best Practices to Fix
Code-split ā Load only the JS required for a page (dynamic import in Next.js/React).
Tree-shaking ā Remove unused exports from libraries during bundling.
Lazy-load components ā Load non-critical JS only when needed (e.g., modals, carousels).
Replace heavy libraries with lighter alternatives (e.g., dayjs instead of moment).
Audit bundle size with tools like Lighthouse or Webpack Bundle Analyzer.
Use async/defer attributes to avoid blocking rendering.
ā Bad Example
š Example
ā Bad (Loads Entire jQuery Library, but only uses one function):
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
document.getElementById("btn").addEventListener("click", function() {
alert("Hello");
});
});
</script>
š Here, 90 KB of jQuery is loaded just to add a click event.
ā Good Example
ā
Good (Vanilla JS ā No Extra Library):
<script>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("btn").addEventListener("click", () => {
alert("Hello");
});
});
</script>
š Only 1 KB of JS instead of 90 KB, making the page faster.
ā” Result
ā” SEO & UX Impact of Fixing
Faster loading ā Better Core Web Vitals (FID, INP, LCP).
Improved rankings ā Google rewards faster, lighter pages.
Lower bounce rates ā Visitors stay longer on fast, responsive pages.
Better mobile UX ā Less CPU + battery usage on devices.
š Rule of thumb:
Keep JS payload under 170 KB (compressed) for optimal SEO.
Always check for dead code & unused dependencies before deploying.