Performance & Optimization

These practices keep Takumi fast as your node trees grow.

The Renderer

Reuse the Renderer Instance

The Renderer holds Takumi's caches. Reuse one instance across renders instead of constructing a new one each time.

ImageResponse manages an internal renderer, or pass your own through the renderer option. See Typography & Fonts and Load Images.

For Cloudflare Workers

Initialize the WebAssembly module and renderer outside the fetch() handler so it doesn't re-run on every request.

import { ImageResponse } from "takumi-js/response";
import { initSync, Renderer } from "takumi-js/wasm";
import module from "@takumi-rs/wasm/takumi_wasm_bg.wasm";
import font from "path-to-font.ttf";

initSync(module); 

const renderer = new Renderer();
await renderer.registerFont(font);

export default {
  fetch(request) {
    return new ImageResponse(<div />, {
      width: 1200,
      height: 630,
      renderer, 
    });
  },
};

Preload Frequently Used Images

Loading images from URLs or bytes during the rendering pass is a bottleneck. Register Load Images to avoid re-decoding.

Parallel Rendering

On the server, prefer @takumi-rs/core: it renders across multiple threads, where @takumi-rs/wasm is single-threaded.

Component Design

Stack Filters in a Single Node

Each filtered node allocates its own offscreen composition layer, sized to the element (viewport-sized only as a worst case). Stacking filters on one node reuses a single layer.

Fonts

Prefer TTF over WOFF2