---
title: Reduce the JavaScript your app sends to browsers
description: Trim client JavaScript on one Next.js route, measure the difference, and preserve the interactions your users need.
url: "https://vercel.com/kb/prompts/reduce-client-javascript"
last_updated: 2026-11-07
related_resources:
  "[Analyze Next.js bundles](https://nextjs.org/docs/app/guides/package-bundling)": "Find large client dependencies and trace the imports that include them."
  "[Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components)": "Choose component boundaries that preserve interactivity and keep server code on the server."
---

# Reduce the JavaScript your app sends to browsers

Trim client JavaScript on one Next.js route, measure the difference, and preserve the interactions your users need.

Reduce the JavaScript downloaded for one route in your Next.js app. Use this prompt when a page loads more client code than its interactions need.

Open or import the existing project in your coding agent and identify the route to investigate. The handoff includes this prompt, so provide repository access and any local setup separately.

Your agent will record a baseline, make a focused change, and compare the result using the same build conditions. Expect a patch and measurements, with any unverified behavior called out.

## Agent prompt

```text
Reduce the initial client JavaScript for one route in my existing Next.js app while preserving its behavior.

If the project is unavailable, ask me to open or import it before changing anything. Read repository instructions, inspect the installed Next.js version and router, and reuse the package manager, components, and test tools. Ask which route to target if I have not named one. Keep the work focused on that route and its shared dependencies.

Establish a baseline from a production build using an analyzer supported by the installed bundler and framework version. Record the route, build settings, relevant client chunks, and a reproducible size metric. Distinguish downloaded JavaScript from the size of a module in an analyzer. If build credentials or services are unavailable, use documented local fixtures where possible and identify which measurements remain blocked.

Trace the largest relevant imports to their callers. Make the smallest supported change that removes unnecessary initial code. Consider narrower imports, a smaller client boundary in the App Router, or deferring a feature that users do not immediately need. Keep required interactions in Client Components. Do not migrate routers, remove functionality, change authorization, or expose server data to reduce a bundle number. Preserve loading and error states, reserve space for deferred UI, and check whether the change adds requests or delays first interaction.

Rebuild with the same conditions and compare before and after. Use the existing browser checks to verify direct loading, client navigation, keyboard interaction, and the affected feature after hydration. Inspect hydration errors and exercise deferred loading or failure when relevant. Confirm private data stays server-side. If no measurable reduction is possible without a larger tradeoff, report the evidence instead of claiming an improvement.

Run the focused tests, lint, and type checks that apply. Do not deploy or enable paid services without my approval. Finish with the patch scope, measurement method and results, commands actually run, local reproduction steps, required configuration, and remaining limitations.
```

## Related resources

- [Analyze Next.js bundles](https://nextjs.org/docs/app/guides/package-bundling): Find large client dependencies and trace the imports that include them.

- [Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components): Choose component boundaries that preserve interactivity and keep server code on the server.

## Try other prompts

- [Add regression tests for a critical user flow](/kb/prompts/add-critical-flow-regression-tests): Protect a key Next.js user journey with isolated tests for visible outcomes, failure recovery, and relevant access boundaries.

- [Improve your app’s accessibility](/kb/prompts/improve-app-accessibility): Find and fix reproducible accessibility barriers in a key user journey, combining automated checks with keyboard and focus testing.

## Reference Architecture

Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build.

- [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows.
- [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches.
- [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work.

[Browse all stacks](/kb/architecture)