How we shipped a 0.3s storefront on the edge

Ceramic came to us with a storefront that looked great and felt slow. On a mid-range phone over 4G, the hero took well over a second to paint, and every 100ms of that was costing them checkouts. The brief was simple to state and hard to do: keep the design, make it disappear from the loading bar.

We rebuilt the front end on Astro, moved rendering to the edge, and rethought the image pipeline from scratch. Here's how each piece contributed.

Render at the edge, not the origin

The single biggest win was moving HTML generation off a single-region origin and onto edge functions that run within milliseconds of the visitor. Time to first byte dropped from ~320ms to under 40ms for most of their traffic.

            // astro.config.mjs: deploy the whole site to the edge
export default defineConfig({
  output: 'server',
  adapter: edge({ regions: 'all' }),
});
          

Because product pages change rarely, we cache the rendered HTML at the edge and revalidate in the background. Shoppers get a static-fast response; merchandisers still see updates within seconds.

The fastest request is the one you never make. The second fastest is the one you cache.

An image pipeline that defaults to fast

Images were 70% of the page weight. We made the right thing automatic: every image passes through a transform that serves AVIF with a WebP fallback, sizes to the actual layout, and lazy-loads everything below the fold. No one on the content team has to think about it.

• AVIF with WebP fallback, chosen per request
• Responsive srcset generated from the layout, not guessed
• Priority hint on the LCP image; lazy on the rest

The result

LCP dropped from 1.2s to 0.3s at the 75th percentile, Lighthouse went to 100 on mobile, and, the number that actually mattered to Ceramic, conversion rose 41% in the first month. Same design, same content. Just faster.

If your site looks right but feels slow, the fix is rarely a redesign. It's usually the pipeline underneath. That's the part we love.