Fix LCP in Contentful

type ContentfulAsset = {
  url: string;             // //images.ctfassets.net/space/asset/file.jpg
  details: { image: { width: number; height: number } };
};

// Bad: raw asset URL, full resolution, original format
// const heroSrc = `https:${asset.url}`;

// Good: explicit width, AVIF, quality 78, progressive
export function heroImage(asset: ContentfulAsset, width = 1500) {
  const base = `https:${asset.url}`;
  const params = new URLSearchParams({
    w: String(width),
    fm: 'avif',
    q: '78',
    fit: 'fill',
    fl: 'progressive',
  });
  return `${base}?${params.toString()}`;
}

// Responsive srcset across breakpoints
export function heroSrcset(asset: ContentfulAsset) {
  return [400, 800, 1200, 1500]
    .map(w => `${heroImage(asset, w)} ${w}w`)
    .join(', ');
}

# Bad: REST CDA with include=10 returns the entire linked graph
# GET /spaces/SPACE/entries?content_type=post&fields.slug=$slug&include=10

# Good: GraphQL projection, only what the page renders
query PostBySlug($slug: String!) {
  postCollection(where: { slug: $slug }, limit: 1) {
    items {
      sys { id }
      title
      slug
      publishedAt: sys { publishedAt }
      excerpt
      hero {
        title
        description
        url
        width
        height
      }
      author { name slug }
    }
  }
}

import { heroImage, heroSrcset } from '@/lib/contentful-image';
import { contentfulFetch } from '@/lib/contentful-client';
import { POST_BY_SLUG } from '@/queries/post-by-slug';

export default async function PostPage({ params }: { params: { slug: string } }) {
  const data = await contentfulFetch(POST_BY_SLUG, { slug: params.slug }, {
    next: { tags: [`post:${params.slug}`] }
  });
  const post = data.postCollection.items[0];

  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 secret = req.headers.get('x-contentful-webhook-secret');
  if (secret !== process.env.CONTENTFUL_WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  const body = await req.json();
  // Contentful webhook payload includes sys.id and sys.contentType.sys.id
  const contentType = body.sys?.contentType?.sys?.id;
  const slug = body.fields?.slug?.['en-US'];
  if (contentType === 'post' && slug) {
    revalidateTag(`post:${slug}`);
  }
  return Response.json({ revalidated: true });
}

// Configure the Contentful webhook (Settings > Webhooks):
// URL:        https://your-site.com/api/revalidate
// Triggers:   Publish, Unpublish
// Filters:    sys.environment.sys.id == "master"
//             sys.contentType.sys.id in ["post"]
// Headers:    X-Contentful-Webhook-Secret: $CONTENTFUL_WEBHOOK_SECRET

import Image, { ImageLoader } from 'next/image';

const contentfulLoader: ImageLoader = ({ src, width, quality }) => {
  const params = new URLSearchParams({
    w: String(width),
    fm: 'avif',
    q: String(quality ?? 78),
    fit: 'fill',
  });
  return `${src}?${params.toString()}`;
};

type Props = {
  hero: { url: string; width: number; height: number; title: string };
};

export function HeroImage({ hero }: Props) {
  return (
    <Image
      loader={contentfulLoader}
      src={`https:${hero.url}`}
      alt={hero.title}
      width={hero.width}
      height={hero.height}
      sizes="(max-width: 768px) 100vw, 1200px"
      priority           // sets fetchpriority=high, skips lazy
      placeholder="empty" // never LQIP the LCP element
      quality={78}
    />
  );
}