How we got a store to a perfect Lighthouse score

Kiln’s old shop scored 61 on mobile. Pages felt heavy, images popped in late, and the product grid jumped around while fonts loaded. None of it was dramatic on a fast laptop. On a mid-range phone on a train, it was painful.

Here is what moved the needle, roughly in order of impact.

1. Ship less JavaScript

The old theme loaded a slider library, a lightbox and an analytics bundle on every page. We moved the site to Astro, which renders to plain HTML and only ships JavaScript for the parts that need it. The product page went from 410 KB of script to under 3 KB.

2. Size images for the screen

Most images were 2400 pixels wide everywhere. Astro’s <Picture> component generates modern formats and a sensible set of widths, and the browser picks the right one:

---
import { Picture } from 'astro:assets';
import vase from '../assets/vase.jpg';
---
<Picture src={vase} formats={['avif', 'webp']} widths={[400, 800, 1200]} sizes="(min-width: 960px) 600px, 92vw" alt="Speckled stoneware vase" />

3. Load one font, properly

We kept the brand typeface but switched to a single variable font file, self-hosted and preloaded. A fallback with matched metrics means text no longer shifts when the real font arrives:

// astro.config.mjs
fonts: [{
  provider: fontProviders.local(),
  name: 'Brand Sans',
  cssVariable: '--font-brand',
  options: { variants: [{ src: ['./src/fonts/brand.woff2'], weight: '300 800' }] },
}],

4. Reserve space for everything

Every image got a width and height, and every embed got an aspect ratio. Layout shift dropped to zero.

The result

Metric	Before	After
Performance	61	100
Largest Contentful Paint	4.8 s	1.1 s
Total Blocking Time	690 ms	0 ms
Cumulative Layout Shift	0.21	0

The best part: orders from mobile went up 22% in the following month. Speed is a feature people feel, even if they never name it.