JavaScript Optimization

Why optimise JavaScript

Unoptimised JavaScript can block page rendering, increase Time to Interactive (TTI), and negatively impact INP. In modern web, JS bundle sizes often exceed several megabytes, which is especially critical for mobile devices and slow connections.

Main JavaScript optimisation techniques

• Minification – remove spaces, comments, rename variables (tools: Terser, UglifyJS).
• Code splitting – break code into chunks loaded on demand (Webpack, Rollup).
• Tree shaking – remove unused code from the bundle (requires modular architecture).
• Defer / async – non‑blocking script loading.
• Compression (gzip / brotli) – reduce data transfer size.
• Caching – Cache-Control headers for repeat visits.

Defer vs Async: what is the difference

<!-- Defer: loads in parallel, executes after HTML -->
<script src="app.js" defer></script>

<!-- Async: loads in parallel, executes immediately after loading -->
<script src="analytics.js" async></script>

• No attribute – blocks HTML parsing, executes immediately (for critical scripts).
• defer – loads in parallel, executes after HTML is fully loaded (for main JS).
• async – loads in parallel, executes as soon as loaded (for independent scripts like analytics).

Third‑party script optimisation

Third‑party scripts (chat widgets, trackers, embedded widgets) are a common cause of performance issues.

• Google Analytics / GTM – use deferred loading via defer or load on user interaction.
• Facebook Pixel – load after user action (e.g., scroll or click).
• Chat widgets – show a static icon and load the script on click.
• Maps (Google Maps) – show a static image placeholder and load JavaScript on click.