Sanity website slow? How to find the cause and what a fix costs

If your Sanity website is running slowly, there's a good chance the problem lies in the way front-end code requests and displays content. To diagnose this issue, it's essential to understand where the delay occurs: server time, asset weight, or browser work. Focus on three primary causes of slowness and their corresponding solutions.

First, GROQ waterfalls often lead to high TTFB (time to first byte) on pages featuring related content, such as posts with an author, category, and related posts. To identify this issue, log the timing around each fetch or look for several awaits in a row within the page component. The recommended fix involves modifying the GROQ query to resolve references in a single query.

Second, uncached fetches can cause every page view to be slow, and high API usage may indicate this problem. Confirm an uncached fetch by checking if the route is rendered dynamically on every request. Typical triggers include reading cookies or headers in a shared layout, leaving draft-mode logic active for all visitors, or fetching without any cache strategy. The solution is to decide per route what can be cached, tag fetches by document type, and revalidate from a Sanity webhook to ensure editors see changes quickly.

Third, oversized or unmanaged images can degrade performance. High TTFB indicates the server is functioning correctly, but poor LCP (largest contentful paint) may suggest oversized images. Confirm this by checking network tabs for image sizes and dimensions. The fix includes using real width, height, and sizes in next/image, utilizing Sanity's image metadata instead of guessing, and prioritizing only the true hero image.

Fourth, client-side rendering may be unnecessary for some pages, leading to poor INP (interactive visual stability) and large JavaScript transfers, especially on mobile devices. Look for the presence of client-side rendering components and verify if real text appears in the source code. If client components are required for interactive elements like filters or menus, reserve them for such purposes and keep the main content in server components.

Lastly, bloated JavaScript bundles can also contribute to slowdowns. Large client chunks and dependencies in client components can negatively impact INP. Confirm this by analyzing the Next.js bundle and identifying unnecessary dependencies. Solutions involve analyzing and cutting down on Next.js chunk bloat, as well as lazy-loading Portable Text renderers.

In conclusion, most slow Sanity websites have two or three of these issues at once. Addressing them can lead to improved conversion rates, better search engine rankings, and reduced hosting costs. To tackle the problem, measure performance using field data and lab traces, then apply the appropriate fixes for the specific cause identified.