Performance · Nuxt OG Image · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

**OG Image v6** is here! Looking for an older version? [View v5 docs](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

[User Guides](https://nuxtseo.com/docs/og-image/getting-started/introduction)

[API](https://nuxtseo.com/docs/og-image/api/define-og-image)

[Releases](https://nuxtseo.com/docs/og-image/releases/v6)

OG Image

- [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)
- [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

### Core Concepts

- [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime)
- [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp)
- [Performance](https://nuxtseo.com/docs/og-image/guides/performance)
- [CLI](https://nuxtseo.com/docs/og-image/guides/cli)
- [Security](https://nuxtseo.com/docs/og-image/guides/security)
- [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare)
- [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs)
- [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages)

### Overview

- [Overview](https://nuxtseo.com/docs/og-image/renderers)
- [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi)
- [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori)
- [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser)

### Integrations

- [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content)
- [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode)
- [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n)

Core Concepts

# Performance

[Copy for LLMs](https://nuxtseo.com/docs/og-image/guides/performance.md)

A first render takes 400-3500ms depending on renderer, but a cached render drops to 5-30ms - a 10-50x speedup. Caching is the single biggest win.

## [Caching](#caching)

The module enables in-memory SWR caching by default with a 72-hour TTL:

- **First render**: 400-1500ms (Satori), 600-2500ms (Takumi), 1000-3500ms (Browser)
- **Cached render**: 5-30ms

The default memory cache is **lost on server restart**. For production, use a persistent storage driver like [Redis](https://redis.io) or Cloudflare KV. Append `?purge` to any OG image URL to manually invalidate its cache entry.

[](https://nuxtseo.com/docs/og-image/guides/cache)See the [Caching guide](https://nuxtseo.com/docs/og-image/guides/cache) for storage drivers, build cache, cache keys, and TTL options.

## [Reduce URL Size](#reduce-url-size)

Runtime URLs encode all options in the path. Passing many props produces long URLs, adding HTML bloat to every page. To keep URLs short:

- **Pass minimal props**: send a slug or ID and `$fetch` the full data inside your component
- **Use [module defaults](https://nuxtseo.com/docs/og-image/api/config#defaults)**: options in `ogImage.defaults` are excluded from URLs
- **Use [route rules](https://nuxtseo.com/docs/og-image/guides/route-rules)**: options resolved server-side, never encoded in the URL

```
// ❌ All data as props — long URL
defineOgImage('BlogPost', {
  title: post.title,
  description: post.description,
  author: post.author.name,
  category: post.category,
})

// ✅ Just a slug — short URL
defineOgImage('BlogPost', { slug: post.slug })
```

Then fetch the data inside the component:

components/OgImage/BlogPost.takumi.vue

```
<script setup lang="ts">
const { slug } = defineProps<{ slug: string }>()
const post = await $fetch(\`/api/posts/${slug}\`)
</script>

<template>
  <div class="w-full h-full flex flex-col justify-center p-12 bg-white">
    <h1 class="text-6xl font-bold">
      {{ post.title }}
    </h1>
    <p class="text-2xl text-gray-600 mt-4">
      {{ post.description }}
    </p>
  </div>
</template>
```

**Prerendered images are unaffected.** The module automatically switches to short hash-based URLs (`/_og/s/o_1whacq.png`) for any path exceeding 200 characters.

## [Optimise Components](#optimise-components)

- **Avoid dynamic images**: use static, statically-analysable image sources where possible. Dynamic image URLs trigger runtime fetches (100-500ms each) and dimension detection. The build step can resolve static sources ahead of time.
- **Keep font sets static**: each unique font combination forces Satori to re-parse font binaries (~2x throughput hit). Use a consistent set across components.
- **Use local emoji packages**: default emoji rendering fetches from a remote API each render. See the [Emojis guide](https://nuxtseo.com/docs/og-image/guides/emojis).

## [Prerender](#prerender)

Images generated at build time have zero runtime cost.

nuxt.config.ts

```
export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { prerender: true }
  }
})
```

- **Short URLs**: hash mode keeps URLs compact regardless of prop count
- **Build cache**: persists across deploys ([Caching guide](https://nuxtseo.com/docs/og-image/guides/cache#build-cache-ci-persistence))
- **Zero Runtime**: removes all renderer code from production (81% smaller). See [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime).

Even if you can't prerender everything, consider it for high-traffic pages.

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/3.guides/11.performance.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/guides/performance.md)

Did this page help you?

[WhatsApp & Multiple Images Generate multiple OG images per page for different platforms like WhatsApp.](https://nuxtseo.com/docs/og-image/guides/whatsapp) [CLI Use the nuxt-og-image CLI to scaffold, manage, and migrate OG image components.](https://nuxtseo.com/docs/og-image/guides/cli)

On this page

- [Caching](#caching)
- [Reduce URL Size](#reduce-url-size)
- [Optimise Components](#optimise-components)
- [Prerender](#prerender)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)