dApp Performance Optimization: RPC, Caching, Bundle Size

Our dApp optimization service focuses on RPC optimization using multicall and TanStack Query for data caching, code splitting for bundle size reduction, and React rendering improvements. We optimize wagmi configuration for EVM batching and ensure fast load times. As per the multicall3 contract specification, it reduces latency by consolidating calls. Multicall is 10x better than individual RPC requests for latency reduction. Code splitting is 2x more effective than static imports. We guarantee measurable improvements: TTI drop by 30%, bundle size cut by 40%, or we refine until you're satisfied. Our team brings seven years of Web3 experience (since 2017) and has audited over 10 projects.

Optimizing a dApp often hits one problem: each UI component executes its own RPC request with no coordination. Ten components produce ten parallel calls to a provider (Infura, Alchemy) with 100–300 ms latency. The user sees gradual UI appearance with endless spinners. The main goal is to batch these requests and cache responses. Our experience: over 10 projects accelerating dApps, we have worked with Web3 since 2017. Practice shows that without intervention, a typical DeFi page makes 50+ RPC requests per minute, of which 70% can be combined into one. In one project (liquidity aggregator), after configuring multicall the number of requests dropped 8x, and TTI fell from 8 to 3 seconds. Infrastructure cost savings exceeded $3000 per year. Typical savings range from $2,000 to $5,000 per year.

Problems We Solve

• Excessive RPC requests. Each call adds 100–300 ms latency. Without batching, the app makes 10x more requests than needed.
• Suboptimal bundle size. Randomly importing the whole ethers instead of viem adds 200 KB gzipped.
• Excessive React re-renders. Components re-render on any account change, even if only the address is needed.

How multicall Solves Latency

multicall3 is a contract deployed on most EVM chains at address 0xcA11bde05977b3631167028862bE2a173976CA11. It executes N view calls in a single RPC request. Multicall improves performance 10x compared to individual calls because latency is combined. Example usage with wagmi v2:

import { useReadContracts } from 'wagmi' const { data } = useReadContracts({ contracts: [ { address: tokenA, abi: erc20Abi, functionName: 'balanceOf', args: [userAddress] }, { address: tokenB, abi: erc20Abi, functionName: 'balanceOf', args: [userAddress] }, { address: tokenC, abi: erc20Abi, functionName: 'balanceOf', args: [userAddress] }, ], }) 

wagmi v2 automatically batches calls through multicall3 if the option batch: { multicall: true } is enabled. Check that it is active — during debugging it is often disabled and forgotten. The configuration takes a minute and reduces request count by 5–10x.

Why Code Splitting Matters for dApps

Components that interact with the wallet (WalletModal, Web3ReactManager) access window.ethereum on initialization — they cannot be loaded on the server. Dynamic import with ssr: false solves the problem:

const WalletModal = dynamic(() => import('@/components/WalletModal'), { ssr: false, loading: () => <Skeleton className="h-10 w-32" />, }) 

This reduces the initial bundle by 30–50% and improves LCP. For comparison, code splitting saves up to 40% traffic in large dApps.

Caching with TanStack Query

wagmi is built on top of TanStack Query. staleTime and gcTime directly affect the number of RPC requests. The default configuration is often suboptimal:

const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 12_000, // 12 seconds – for balance data gcTime: 5 * 60_000, // cache lives 5 minutes retry: 2, retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30_000), }, }, }) 

For static token metadata, set staleTime: Infinity. Savings: up to 80% requests without losing freshness.

Performance Comparison Before and After

Work Process

1. Audit — profile React (React DevTools), analyze bundle (Vite/Next.js analyzer), measure RPC load via Network tab.
2. Multicall & batching setup — enable batch: { multicall: true }, refactor calls to useReadContracts.
3. Caching — set staleTime for each data type.
4. Code splitting — replace static imports with dynamic where needed.
5. Profiling — check re-render budget, add useMemo and select.
6. Documentation & training — hand over configs and best practices.

What's Included

• Performance audit with report.
• Multicall, TanStack Query, code splitting configuration.
• React rendering optimization (selectors, memoization).
• Profiling and final measurements.
• Change documentation and maintenance recommendations.
• Team training (up to 2 hours).

Timeline and Cost

The work takes 3 to 5 days. Cost is calculated individually — we estimate after the audit. Contact us for a consultation.

Typical Optimizations in One Case

Project A: DeFi aggregator with 12 screens. After multicall configuration, RPC requests dropped 8x, TTI fell from 8 to 3 seconds, bundle decreased by 40%. The team received documentation and monitoring scripts. Infrastructure cost savings reached 70% (over $3000 per year).

Get a consultation on optimizing your dApp. Our engineers are ready to conduct an audit and suggest specific improvements. Leave a request for a free analysis — we will show which metrics can be improved.