Understanding LLM Inference Bottlenecks

Each article lives in its own folder under posts/. The folder contains a README.md and may contain a local cover or other article media:

posts/
└── understanding-llm-inference-bottlenecks/
    ├── README.md
    ├── cover.svg
    ├── inference-step.svg
    └── memory-signal.svg

The folder name creates the stable route: /blog/understanding-llm-inference-bottlenecks. An explicit lowercase slug can be added to frontmatter when a route must remain independent of the folder name.

Frontmatter is the article contract

Every README.md begins with validated YAML metadata. Dates use YYYY-MM-DD, category is one of work, personal, or passion, and tags use lowercase slugs.

The validator rejects impossible dates, duplicate tags or slugs, unknown categories, missing local media, and covers without descriptive alternative text.

Prose and structure

Articles support GitHub-flavored Markdown and MDX where it adds real value. That includes emphasis, external links to primary research, inline code, and stable heading anchors.

Lists can express both hierarchy and progress:

1. Separate the two inference phases.
   • Prefill processes the prompt in parallel.
   • Decode produces one new token per sequence step.
2. Measure the constrained resource.
   • Compute-bound work rewards more arithmetic throughput.
   • Memory-bound work rewards moving model state efficiently.

• Define the claim
• Support it with a compact example
• Replace the illustrative measurements with experiment data in a future technical article

Tables remain horizontally contained on narrow screens:

Code examples

Fenced code is highlighted by the site build, receives responsive overflow behavior, and can carry a descriptive title. Inline formulas that do not need a math renderer can remain code, such as bandwidth = bytes / seconds.

// Fictional values keep the format demo reproducible.
double bandwidth_gb_s(double bytes, double seconds) {
  return bytes / seconds / 1'000'000'000.0;
}

const double observed = bandwidth_gb_s(90'000'000'000.0, 0.12);

Terminal snippets use an exact language too:

pnpm validate -- --content-dir ../blogs/posts

Static SVG illustrations

Article-specific vector diagrams live beside the Markdown source. The following SVG uses its own light, dark, and forced-color palettes, so it remains a portable asset as well as a responsive blog illustration.

Reduced-motion-safe animation

Motion can clarify how state crosses a bottleneck, but the explanation must survive without it. This local SVG plays once, finishes in a meaningful state, and immediately shows that final state when the reader prefers reduced motion. Its replay control reloads the isolated SVG document, so the finite animation can be inspected again without adding an article-level animation runtime.

Mermaid diagrams

Mermaid is useful when relationships matter more than custom illustration. The source stays readable in Markdown, while the portfolio renders light and dark SVG variants during the static build.

Images, disclosure, and references

Normal Markdown images must have alternative text that conveys their purpose. Longer supporting detail can stay tucked into native disclosure markup without requiring a custom component.

Footnotes keep citations near the claim without interrupting the main explanation.¹

Publishing workflow

1. Create a named folder with README.md.
2. Add and validate frontmatter.
3. Write the article and keep media beside it.
4. Open a pull request and pass the compatibility workflow.
5. Preview through the portfolio and set draft: false when it is ready.
6. Update the portfolio submodule pointer and create a portfolio release tag.

Reading time, category and tag data, related posts, previous/next navigation, RSS metadata, and the article URL are derived at build time.¹