How I use Framer Motion with Next.js App Router without layout shift
Step-by-step guide to AnimatePresence page transitions in Next.js App Router, cutting CLS to 0 and lazy-loading Framer Motion to save bundle size.
Tag
Core Web Vitals
Diagnosing and fixing Core Web Vitals — LCP, CLS, INP, and TTFB — in real Next.js production builds.
8 posts
6 min read
How I derive sizes, width, and height from Sanity metadata to kill CLS
Kill CLS on Sanity images for good. Pull metadata.dimensions into next/image sizes and aspect-ratio boxes — exact GROQ and component code.
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.
How I wire next/image to Sanity hotspot focal point data for pixel-perfect crops
Stop letting next/image crop faces out of your hero. Wire Sanity hotspot + crop coordinates into next/image objectPosition — with code and the exact GROQ.
How I Eliminated Sanity Image Hot-Spot Reflows by Pre-Calculating Focal Crops
How I pre-calculate Sanity image hot-spot crops at build time to eliminate layout shift and guarantee stable LCP under 2.5s on editorial pages.
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.
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.