ヘッドレス CMS が速い理由を実測する: 検索と絞り込みを Contentful 側に任せる

npm init -y
npm i contentful-management dotenv
npm i -D tsx typescript @types/node

CF_SPACE_ID=xxxxx
CF_ENV=master
CF_LOCALE=en-US

CF_MANAGEMENT_TOKEN=xxxxx
CF_CONTENT_TYPE=blogPost

CF_TOTAL=100
CF_FROM=1
CF_HIT_COUNT=50

CF_KEYWORD=NEEDLE
CF_BODY_CHARS=20000

import "dotenv/config";
import { createClient } from "contentful-management";

const {
  CF_SPACE_ID,
  CF_ENV = "master",
  CF_LOCALE = "en-US",
  CF_MANAGEMENT_TOKEN,
  CF_CONTENT_TYPE = "blogPost",
  CF_TOTAL = "100",
  CF_FROM = "1",
  CF_HIT_COUNT = "50",
  CF_KEYWORD = "NEEDLE",
  CF_BODY_CHARS = "20000",
} = process.env;

if (!CF_SPACE_ID || !CF_MANAGEMENT_TOKEN) {
  throw new Error("CF_SPACE_ID and CF_MANAGEMENT_TOKEN are required");
}

const TOTAL = Number(CF_TOTAL);
const FROM = Number(CF_FROM);
const HIT_COUNT = Number(CF_HIT_COUNT);
const BODY_CHARS = Number(CF_BODY_CHARS);

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

function makeBody(n: number): string {
  const chunk = "Lorem ipsum dolor sit amet. ";
  let s = "";
  while (s.length < n) s += chunk;
  return s.slice(0, n);
}

async function main(): Promise<void> {
  const client = createClient({ accessToken: CF_MANAGEMENT_TOKEN });
  const space = await client.getSpace(CF_SPACE_ID);
  const env = await space.getEnvironment(CF_ENV);

  const body = makeBody(BODY_CHARS);

  for (let i = FROM; i <= TOTAL; i++) {
    const slug = `post-${String(i).padStart(4, "0")}`;

    // `fields.title[match]` は全文検索であり、厳密な部分一致ではありません。
    // 本検証ではヒットを安定させるため、キーワードを title の先頭に置きます。
    const title = i <= HIT_COUNT ? `${CF_KEYWORD} post ${i}` : `post ${i}`;

    const entry = await env.createEntry(CF_CONTENT_TYPE, {
      fields: {
        title: { [CF_LOCALE]: title },
        slug: { [CF_LOCALE]: slug },
        body: { [CF_LOCALE]: body },
      },
    });

    await entry.publish();

    // 制限を回避するための待機です。
    await sleep(200);
    process.stdout.write(".");
  }

  process.stdout.write("\nDone.\n");
}

main().catch((e) => {
  console.error(e);
  process.exitCode = 1;
});

npx tsx seed.ts

....................................................................................................
Done.

CF_DELIVERY_TOKEN=xxxxx
CF_RUNS=5

CF_LIMIT=100
CF_PAGE_SIZE=100

import "dotenv/config";
import { performance } from "node:perf_hooks";

type EntryLike = {
  fields?: {
    title?: string;
    slug?: string;
  };
};

const {
  CF_SPACE_ID,
  CF_ENV = "master",
  CF_DELIVERY_TOKEN,
  CF_CONTENT_TYPE = "blogPost",
  CF_KEYWORD = "NEEDLE",
  CF_RUNS = "5",
  CF_LIMIT = "100",
  CF_PAGE_SIZE = "100",
} = process.env;

if (!CF_SPACE_ID || !CF_DELIVERY_TOKEN) {
  throw new Error("CF_SPACE_ID and CF_DELIVERY_TOKEN are required");
}

const RUNS = Number(CF_RUNS);
const LIMIT = Number(CF_LIMIT);
const PAGE_SIZE = Number(CF_PAGE_SIZE);

const baseUrl = `https://cdn.contentful.com/spaces/${CF_SPACE_ID}/environments/${CF_ENV}/entries`;
const authHeader = { Authorization: `Bearer ${CF_DELIVERY_TOKEN}` };

async function fetchJson(url: string): Promise<any> {
  const res = await fetch(url, { headers: authHeader });
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`);
  return res.json();
}

function urlWith(params: Record<string, string | number>): string {
  const u = new URL(baseUrl);
  for (const [k, v] of Object.entries(params)) u.searchParams.set(k, String(v));
  return u.toString();
}

function median(values: number[]): number {
  const a = [...values].sort((x, y) => x - y);
  const mid = Math.floor(a.length / 2);
  return a.length % 2 ? a[mid] : (a[mid - 1] + a[mid]) / 2;
}

async function runA(): Promise<{ ms: number; hits: number }> {
  const t0 = performance.now();

  const itemsAll: EntryLike[] = [];

  for (let skip = 0; skip < LIMIT; skip += PAGE_SIZE) {
    const limit = Math.min(PAGE_SIZE, LIMIT - skip);

    const url = urlWith({
      content_type: CF_CONTENT_TYPE!,
      limit,
      skip,
      order: "sys.createdAt",
    });

    const data = await fetchJson(url);
    const items = (data.items ?? []) as EntryLike[];
    itemsAll.push(...items);
  }

  const hits = itemsAll.filter((e) => (e.fields?.title ?? "").includes(CF_KEYWORD!)).length;

  const t1 = performance.now();
  return { ms: t1 - t0, hits };
}

async function runB(): Promise<{ ms: number; hits: number }> {
  const url = urlWith({
    content_type: CF_CONTENT_TYPE!,
    limit: LIMIT,
    "fields.title[match]": CF_KEYWORD!,
    select: "sys.id,fields.title,fields.slug",
  });

  const t0 = performance.now();
  const data = await fetchJson(url);

  const items = (data.items ?? []) as EntryLike[];
  const t1 = performance.now();

  return { ms: t1 - t0, hits: items.length };
}

async function bench(
  name: string,
  fn: () => Promise<{ ms: number; hits: number }>,
): Promise<void> {
  const times: number[] = [];
  let hits = 0;

  for (let i = 0; i < RUNS; i++) {
    const r = await fn();
    times.push(r.ms);
    hits = r.hits;
  }

  console.log(`- ${name}`);
  console.log(`  - median: ${Math.round(median(times))} ms`);
  console.log(`  - runs: ${times.map((t) => Math.round(t)).join(", ")} ms`);
  console.log(`  - hits: ${hits}`);
}

async function main(): Promise<void> {
  console.log("# Results (ms)");
  await bench("A: 全件取得してアプリ側でフィルタリング", runA);
  await bench("B: ヘッドレス CMS 側でフィルタリング + select", runB);
}

main().catch((e) => {
  console.error(e);
  process.exitCode = 1;
});

npx tsx bench.ts

# Results (ms)
- A: 全件取得してアプリ側でフィルタリング
  - median: 28 ms
  - runs: 495, 30, 28, 28, 20 ms
  - hits: 50
- B: ヘッドレス CMS 側でフィルタリング + select
  - median: 10 ms
  - runs: 295, 11, 9, 10, 9 ms
  - hits: 50

CF_TOTAL=1000
CF_FROM=101
CF_HIT_COUNT=50

npx tsx seed.ts

CF_LIMIT=500
CF_PAGE_SIZE=100

npx tsx bench.ts

# Results (ms)
- A: 全件取得してアプリ側でフィルタリング
  - median: 146 ms
  - runs: 2126, 125, 122, 158, 146 ms
  - hits: 50
- B: ヘッドレス CMS 側でフィルタリング + select
  - median: 10 ms
  - runs: 240, 10, 9, 11, 10 ms
  - hits: 50

CF_LIMIT=1000
CF_PAGE_SIZE=100

npx tsx bench.ts

# Results (ms)
- A: 全件取得してアプリ側でフィルタリング
  - median: 225 ms
  - runs: 2460, 242, 225, 224, 215 ms
  - hits: 50
- B: ヘッドレス CMS 側でフィルタリング + select
  - median: 10 ms
  - runs: 555, 12, 10, 8, 9 ms
  - hits: 50