Fix LCP in Sanity

import imageUrlBuilder from '@sanity/image-url';
import { sanityClient } from './sanity-client';

const builder = imageUrlBuilder(sanityClient);

// Bad: raw asset URL, full resolution, no auto-format
// const heroSrc = post.hero.asset.url;

// Good: explicit width, auto-format, quality 78
export function heroImage(image: SanityImage) {
  return builder
    .image(image)
    .width(1500)
    .height(844)        // explicit aspect ratio prevents CLS too
    .fit('crop')
    .auto('format')     // AVIF or WebP based on Accept header
    .quality(78)
    .url();
}

// For responsive srcset, generate multiple widths:
export function heroSrcset(image: SanityImage) {
  return [400, 800, 1200, 1500]
    .map(w => `${builder.image(image).width(w).auto('format').quality(78).url()} ${w}w`)
    .join(', ');
}

// Bad: pulls every field and every reference
export const POST_FAT = `*[_type == "post" && slug.current == $slug][0]`;

// Good: tight projection, only what the page renders
export const POST_LEAN = `*[_type == "post" && slug.current == $slug][0]{
  _id,
  title,
  "slug": slug.current,
  publishedAt,
  excerpt,
  "hero": hero{
    "alt": alt,
    asset->{
      _id,
      "url": url,
      "lqip": metadata.lqip,
      "dimensions": metadata.dimensions
    }
  },
  "author": author->{ name, "slug": slug.current },
  "body": body[]{ ..., _type == "image" => { ..., asset->{ url, metadata } } }
}`;

import { heroImage, heroSrcset } from '@/lib/sanity-image';
import { sanityClient } from '@/lib/sanity-client';
import { POST_LEAN } from '@/queries/post-by-slug';

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await sanityClient.fetch(POST_LEAN, { slug: params.slug }, {
    next: { tags: [`post:${params.slug}`] }
  });

  const heroSrc = heroImage(post.hero);
  const heroSet = heroSrcset(post.hero);

  return (
    <>
      {/* Preload the hero before any layout work happens */}
      <link
        rel="preload"
        as="image"
        href={heroSrc}
        imageSrcSet={heroSet}
        imageSizes="(max-width: 768px) 100vw, 1200px"
        fetchPriority="high"
      />
      <article>
        <h1>{post.title}</h1>
        {/* hero image rendered with framework component below */}
      </article>
    </>
  );
}

import { revalidateTag } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(req: NextRequest) {
  const body = await req.json();
  const secret = req.headers.get('x-sanity-webhook-secret');
  if (secret !== process.env.SANITY_WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  // Sanity sends { _id, _type, slug } per the webhook projection
  if (body._type === 'post' && body.slug?.current) {
    revalidateTag(`post:${body.slug.current}`);
  }
  return Response.json({ revalidated: true });
}

// Configure the Sanity webhook (Settings > API > Webhooks):
// URL:        https://your-site.com/api/revalidate
// Trigger:    On Create, On Update, On Delete
// Filter:     _type == "post"
// Projection: { _id, _type, slug }

import Image from 'next/image';
import { heroImage } from '@/lib/sanity-image';

type Props = { hero: SanityImage; alt: string };

export function HeroImage({ hero, alt }: Props) {
  const src = heroImage(hero);
  const { width, height } = hero.asset.dimensions;

  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      sizes="(max-width: 768px) 100vw, 1200px"
      priority           // sets fetchpriority=high, skips lazy
      placeholder="empty" // disable LQIP for LCP element
      quality={78}
    />
  );
}