Performance & Optimization

Takumi is designed from the ground up for speed. However, as your node trees grow in complexity, following these best practices will ensure you get the most out of the engine.

The Renderer

Reuse the Renderer Instance

For both @takumi-rs/core and @takumi-rs/wasm, the Renderer is the heart of Takumi's resource management. Try to reuse the renderer instance across multiple renderings.

For ImageResponse

An internal renderer instance is managed automatically, or you can pass your own renderer instance via renderer option.

Refer to both Typography & Fonts and Persistent Images for more details.

For Cloudflare Workers

Initialize the WASM module and renderer instance out side of the fetch() handler so it won't be re-run everytime a request comes in.

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

const fetchCache = new Map();
const logoUrl = "https://yeecord.com/img/logo.png";

initSync(module); 

const renderer = new Renderer({
  fonts: [archivo],
});

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 can be a bottleneck. Register Persistent Images to avoid re-decoding.

Parallel Rendering

Always prefer @takumi-rs/core over @takumi-rs/wasm for utilizing multiple threads.

Component Design

Stack Filters in a Single Node

A composition layer with the same size as viewport has to be created in order to apply filters and blurs, which incurs additional memory usage.

Fonts

Prefer TTF over WOFF2

WOFF2 is a compressed format, which requires decompression before use. TTF is a raw format, which can be used directly.

You should only use WOFF2 if the concern of file size is more important than the concern of performance.