How I migrated a large Next.js project from Tailwind CSS v3 to v4
A practical walkthrough of the Tailwind CSS v4 migration in Next.js: CSS-based config, dropped utilities, PostCSS changes, and rough edges I hit in production.
Tag
Performance
Web performance techniques for Next.js and Sanity — Core Web Vitals, LCP, INP, bundle size, and edge caching strategies.
20 posts
6 min read
How I write advanced GROQ queries with joins, coalesce, and array flattening in Sanity
Deep dive into advanced GROQ queries in Sanity: inline joins, coalesce, conditional projections, and array flattening with real payload sizes measured.
Next.js partial prerendering PPR in production: what actually works
An honest look at Next.js partial prerendering PPR in production — what it solves, where it breaks, and which page patterns benefit most.
How I use @next/bundle-analyzer to find and fix Next.js bundle size bloat
A step-by-step walkthrough of Next.js bundle size analysis and reduction: finding large imports, fixing vendor chunks, and trimming icon libraries.
How I configure Sanity image URL auto=format with next/image to serve WebP and AVIF
Using Sanity's auto=format with next/image correctly avoids double-encoding and wasted bytes. Here is the exact setup I use in production.
How I cut Next.js bundle size by analysing and reducing chunk bloat
A practical walkthrough of Next.js bundle size analysis using @next/bundle-analyzer, with before/after numbers from a real project.
How I wire Mux video into a Next.js + Sanity CMS upload workflow
Step-by-step guide to Mux video in Next.js and Sanity CMS: plugin setup, direct uploads, signed playback URLs, and poster images for fast LCP.
How I set up core web vitals monitoring with Vercel Analytics and Next.js
A practical guide to wiring up Vercel Analytics and Speed Insights for real-user Core Web Vitals monitoring in Next.js, with a workflow for catching regressions fast.
Next.js App Router tutorial guide 2026: from Pages Router to production
A practical Next.js App Router tutorial guide for 2026. Covers layouts, route groups, Server Components, data fetching, and the metadata API.
How I audit and prune unused Sanity document types to reclaim Studio performance
A step-by-step approach to identifying orphaned schemas, measuring Studio bundle impact, and safely removing dead document types without breaking production.
How I Handle Conditional GROQ Projections to Cut Query Payload by 60%
A pattern for projecting only the fields your Next.js components actually render, using GROQ coalesce and select operators to prune unused blocks.
How I Model Sanity References to Avoid N+1 Queries in Next.js RSC
A pattern for structuring Sanity references and GROQ projections that eliminates query waterfalls in server components, cutting fetch latency by 200–400 ms.
How I keep Sanity image pipelines under 50 kB using LQIP hashes and blur overlays
Cut LQIP overhead on Sanity + Next.js sites from 48 kB to under 5 kB. The production pattern, with the exact GROQ and Image component code.
How I Model Multi-Locale Navigation in Sanity Without Bloating Page Queries
A singleton pattern for i18n navigation that keeps GROQ queries fast and avoids embedding nav arrays in every document fetch.
How I Structure Sanity Schemas to Avoid Query Waterfalls in Next.js
Denormalising references and embedding common fields in Sanity schemas cuts server component render time by 40–60%. Here's the pattern I ship.
How I Ship Sub-200ms TTFB on Sanity-Powered Pages with PPR and Edge
Combining Next.js Partial Prerendering, edge runtime, and selective Sanity queries to hit sub-200ms TTFB on content-heavy pages without stale data.
How I Shaved 140 kB Off a Next.js Bundle by Lazy-Loading Sanity Portable Text
Portable Text blocks can bloat client bundles. Here's how I defer serializers with dynamic imports and RSC boundaries to keep marketing pages under 80 kB.
INP for React Apps: Profiling and Eliminating Long Tasks
INP is responsiveness. Learn how to find long tasks, profile React re-renders, reduce main-thread work, and ship fast interactions consistently.
How to Fix LCP on Image-Heavy Pages (Next.js Patterns That Work)
LCP is usually one big image. Here’s how to identify the true LCP element, reduce TTFB, ship the right image bytes, and consistently hit <2.5s on real devices.
Why Core Web Vitals Matter (and How I Improve Them)
Core Web Vitals affect rankings, conversions, and perceived quality. Here’s what each metric means, target thresholds, how to measure, and the fixes that move the needle.