How We Reduced Unused JavaScript by 49KB with Smart Dynamic Imports

Struggling with bloated JavaScript in your WordPress site powered by Next.js? We were too — until we optimised our site with dynamic imports and cut down 49KB of unused code.

This article shows you exactly how we did it, what changed, and how you can do the same to speed up your site and improve Core Web Vitals.

Why Unused JavaScript Is a Problem for WordPress Performance

Large bundles of unused JavaScript often come from third-party tools, search libraries, or visual components. In a WordPress + Next.js hybrid site, anything added globally — like search tools or forms — may end up in the _app.js file and load on every page. This slows down initial load times, especially on mobile, and bloats your Time to Interactive (TTI).

We discovered this when running a build analysis of meshwithus.com.au, our Gold Coast-based web development agency site. The results were eye-opening:

• First Load JS: 309KB
• _app.js bundle: 194KB
• Algolia InstantSearch code included on non-blog pages

Tools We Used to Audit JavaScript Bundle Size

To identify what was bloating our bundles, we enabled the official Next.js Bundle Analyzer plugin:

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  trailingSlash: true,
  reactStrictMode: true,
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        hostname: require('@faustwp/core').getWpHostname(),
      },
    ],
  },
});

We then triggered a build with analysis turned on:

$env:NEXT_FORCE_WEBPACK="true"; $env:ANALYZE="true"; pnpm build

This generated a client.html visual report and revealed that components like Algolia, SearchBox, and our FAQAccordion were bundled into _app.js.

What We Moved to Dynamic Imports

The two biggest components we dynamically split were:

• RelatedInsights (Algolia InstantSearch)
• FAQAccordion (Only used on some pages)

Here’s how we changed the import:

import dynamic from 'next/dynamic';

const RelatedInsights = dynamic(() => import('components/RelatedInsights'), {
  ssr: false,
  loading: () => <div>Loading related insights…</div>,
});

const FAQAccordion = dynamic(() => import('components/FAQAccordion'), {
  ssr: false,
  loading: () => <div>Loading FAQs…</div>,
});

How We Controlled When It Loads

We only render <RelatedInsights /> on blog pages using this conditional check in Singular.tsx:

const isBlogPost = router.asPath.startsWith('/blog/');

{isBlogPost && (
  <RelatedInsights objectID={`\${page.databaseId}-0`} />
)}

This prevents unnecessary scripts and search logic from loading on all service or project pages — especially beneficial for mobile users and SEO speed scores.

Before and After: Measurable Performance Gains

Metric	Before	After	Change
_app.js size	194 KB	146 KB	▼ 48 KB
First Load JS	309 KB	260 KB	▼ 49 KB
Non-blog pages	Loaded Algolia	Algolia deferred	✅
FAQAccordion	Bundled globally	Dynamically loaded	✅

Best Practices for Dynamic Imports in Next.js

• Use dynamic() for components that are route-specific
• Disable SSR (ssr: false) for client-only tools
• Use loading props to maintain UX while the chunk loads
• Move large search libraries and FAQ builders out of the shared bundle

Want to see another example of how we optimise code delivery? Check out our article on Shopify site speed optimisation.

Do You Really Need Algolia on Every Page?

If your search bar is only used in a specific section of the site, don’t load it globally. The same goes for animations, charts, or visual libraries. Only load them when needed and allow the rest of the page to render cleanly.

Need Help with WordPress Performance?

If you’re working on a WordPress site built with React, headless frameworks, or anything beyond a standard theme, performance can get tricky. We’re a Gold Coast-based development team specialising in WordPress speed optimisation and advanced builds using Next.js and custom APIs.

We also offer full WordPress maintenance and monitoring services so your optimisations don’t get lost in future updates.

Frequently Asked Questions

Let’s Boost Your Site Speed Today

If your WordPress or Shopify site is carrying extra baggage, let’s clean it up. We’ll help you reduce unused JavaScript, speed up page loads, and get those Lighthouse scores where they should be.

Request a performance audit today.