Performance Troubleshooting: Keeping Your Page Props Lean and Fast

When you’re working with Sitecore and Next.js, performance tuning often comes down to a handful of small but high-impact habits. One of the easiest wins—yet commonly overlooked—is managing the size of your Page Props.

If you’ve ever opened your browser’s network tab and discovered that your page-data.json or serialized component props are massive, you know the feeling. Everything still works, but your TTFB grows, navigation feels heavier, and data hydration slows down. The culprit is usually the same: we’re shipping too much data to the client.

Let’s take a step back and look at why keeping Page Props lightweight matters—and how to do it effectively.

Why Page Props Should Stay Under 128KB

A good rule of thumb is to keep your Page Props under 128 KB, which is the recommended max size for optimal performance. When you exceed this threshold, several issues start creeping in:

• Slower data hydration because React on the client needs to parse more JSON.
• Increased memory consumption, especially noticeable on mobile devices.
• Longer server responses, which can reduce throughput under load.
• Bottlenecks during static generation, hurting build times in SSG scenarios.

Lightweight props mean a more responsive experience across the entire pipeline—from your backend to your users’ browsers.

Use the Right Tools: Next.js Explorer

One tool I always recommend is Next.js Explorer
(Chrome Extension: Next.js Explorer – NextJS App & Pages Router).

It gives you a visual breakdown of your Page Props, helping you quickly spot bloated fields or unnecessary data. This kind of visibility takes the guesswork out of optimization and makes it clear where to focus your cleanup efforts.

With it, you can identify:

• Unused or unmapped Sitecore fields
• Large media objects being sent unnecessarily
• Deep, nested structures being serialized for no reason
• Pages where props drastically differ in size

The tool essentially helps bridge the gap between backend content modeling and frontend data usage.

Map Only the Fields You Actually Use

This feels obvious—but you’d be surprised how many JSS or Next.js applications pull full Sitecore items only to use a fraction of the fields. Every field you map, even if ignored later, adds weight to your Page Props.

A few healthy habits:

• Trim your GraphQL queries to just the fields your component needs.
• Avoid mapping entire children arrays when only one or two fields matter.
• Don’t pass whole media objects if you only use the URL.
• Review your rendering params—they often get overlooked.

Think of your Page Props as a package you’re shipping to the client. Every extra field is added “shipping weight”.

Improving performance in Sitecore + Next.js applications rarely comes from a single change. Instead, it’s a collection of small optimizations and Page Props size is one of the easiest places to score quick wins.

By keeping your props under 128 KB, using tools like Next.js Explorer, and mapping only what your view actually needs, you’ll deliver faster, smoother, and more scalable experiences for users.

If you’ve been ignoring Page Props size until now, this is the perfect time to start paying attention. Your users (and your future self) will thank you.