Dynamic OG images in NextJS - Performance & Optimization

Performance: Dynamic OG images

MEDIUM IMPACT

Dynamic OG images affect the initial page load speed and server response time because the image is generated on demand when the page is shared.

Generating Open Graph images dynamically for social sharing

NextJS

import { cache } from 'react';

const generateCachedImage = cache(async (params) => {
  return await generateImage(params);
});

export async function GET() {
  const image = await generateCachedImage({
    title: 'Dynamic OG Image',
    style: 'complex',
  });
  return new Response(image, { headers: { 'Content-Type': 'image/png' } });
}

Caches generated images in memory or on disk to serve repeated requests instantly, reducing server load and response time.

📈 Performance GainReduces server response time to under 50ms for cached images, improving LCP and user experience.

Generating Open Graph images dynamically for social sharing

NextJS

export async function GET() {
  const image = await generateImage({
    title: 'Dynamic OG Image',
    style: 'complex',
  });
  return new Response(image, { headers: { 'Content-Type': 'image/png' } });
}

Generates the image on every request without caching, causing high server load and slow response times.

📉 Performance CostBlocks server response for 300-500ms per request, increasing LCP and slowing page sharing previews.

Performance Comparison

Pattern	Server Processing	Network Transfer	Cache Usage	Verdict
Generate on every request	High (300-500ms)	Medium (image size)	None	[X] Bad
Generate once and cache	Low (<50ms after cache)	Medium (image size)	Effective caching	[OK] Good

Rendering Pipeline

When a social platform requests the OG image, the server generates or retrieves the image, then sends it back. This affects the server response phase before the browser can render the preview.

→Server Processing

→Network Transfer

→Browser Rendering

⚠️ BottleneckServer Processing (image generation time)

Core Web Vital Affected

LCP

Dynamic OG images affect the initial page load speed and server response time because the image is generated on demand when the page is shared.

Optimization Tips

1Cache dynamic OG images to avoid regenerating on every request.

2Keep image generation lightweight to reduce server processing time.

3Monitor server response times for OG image requests in DevTools Network panel.

Performance Quiz - 3 Questions

What is the main performance drawback of generating OG images dynamically on every request?

A Increased server response time delaying page preview rendering

B Increased client-side JavaScript bundle size

C Higher CSS complexity causing layout shifts

D More DOM nodes created on the page

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by image requests, and observe the response time for the OG image request.

What to look for: Look for long server response times (TTFB) on the OG image request indicating slow generation; fast responses indicate good caching.