Back to field notes

How I got 100 on Lighthouse

A short record of the decisions that reduced JavaScript, avoided layout shift, and made this Next.js page faster.

The result

Performance didn't come from a single trick. It came from keeping the critical path small: Server Components by default, images with known dimensions, and visual effects outside the first paint.

What changed

  1. Editorial lists load only metadata on the server.
  2. MDX content compiles only on the article page.
  3. Videos and embeds use on-demand loading.

The editorial contract

FieldRole
titlePage title and card title
descriptionSummary, SEO, RSS, and archive
dateChronological ordering
tagsControlled taxonomy
const firstPaint = 'server';
const clientJavaScript = 'only when interaction exists';

Next measurement

The next step is to compare pages with real content, without turning the blog into a giant index in the browser.