unused-javascript
•
Savings: 250 KB - 1.2 MB uncompressed code
How to Reduce Unused JavaScript & Split Heavy Bundles
Unused JavaScript refers to functions, third-party libraries, and polyfills loaded on a page that are never invoked during user interaction, burning CPU cycles and memory.
Technical Breakdown: What Causes This Issue?
Many sites ship bloated monolithic JavaScript bundles exceeding 1.5MB. While desktop CPUs with 16 cores can parse and compile this code in 100ms, mid-tier mobile processors (like Snapdragon 680 or Helio G85) freeze for 2 to 4 seconds, destroying Total Blocking Time (TBT) and Interaction to Next Paint (INP).
How to detect if your page is affected:
- Chrome DevTools Coverage tab shows over 40% red (unused) code in JS bundles.
- Lighthouse reports high potential savings under "Reduce unused JavaScript".
- Total Blocking Time (TBT) exceeds 300ms on 4G mobile emulation.
Step-by-Step Resolution Workflows
Use Perfmatters Script Manager or Asset CleanUp to disable plugins conditionally. For example, unload Contact Form 7 or WooCommerce cart scripts on non-shop blog posts. Delay third-party marketing tags (Meta Pixel, Google Tag Manager) until user interaction.
add_filter('script_loader_tag', function($tag, $handle) {
if (is_admin()) return $tag;
if (strpos($tag, 'defer') !== false) return $tag;
return str_replace(' src=', ' defer src=', $tag);
}, 10, 2);
Review installed apps in Shopify Admin. Uninstall old apps that left orphaned JavaScript snippets in theme.liquid. Delay customer support live chat widgets (Gorgias, Tidio, Zendesk) until 5 seconds after DOM load or upon button click.
<script src="{{ 'theme.js' | asset_url }}" defer></script>
// Dynamically import heavy modules only when needed
document.getElementById('openModalBtn').addEventListener('click', async () => {
const { initInteractiveModal } = await import('./modal-bundle.js');
initInteractiveModal();
});Frequently Asked Questions
What is delay JavaScript vs defer JavaScript?
Defer downloads scripts in parallel and executes them after HTML parsing. Delay completely stops downloading the script until the user touches the screen, moves mouse, or scrolls.
Does delaying Google Analytics affect conversion tracking?
Standard pageview tracking is delayed by 1-2 seconds, but purchase and click events are safely captured as soon as the user touches the UI.
How do I know which scripts are unused?
Open Chrome DevTools > Press Ctrl+Shift+P > Type "Coverage" > Click reload to see exact byte percentages of unused code per file.
Audit Your Live Website
Test if your domain passes this audit with sub-2s mobile loading:
Want guaranteed 90+ score without breaking anything?
Our senior performance engineers optimize your assets, configure server-level caching, and fix unused-javascript with a 100% money-back guarantee in 48 hours.
Fix on WhatsApp (₹8,999)