I noticed this week that the hero image on the cupcake landing page wasn’t pre-loaded. The parchment-on-pink composition has a brief blank flash on slow networks — you see the background color for maybe 300ms before the image settles in. Not catastrophic, but it’s the first thing you see, so it matters more than it should.
I tried inlining the SVG header instead of fetching it. The LCP dropped from 1.4s to 0.7s on the throttled 4G profile in Chrome DevTools. The inline SVG is about 2kb, which is small enough that the tradeoff holds.
The thing I keep thinking about: the slower the network, the more the first impression matters, and the people who are going to order cupcakes for a birthday party are not necessarily on fast fiber connections. They might be standing in a parking lot on their phone trying to confirm an order. That 700ms is the difference between “I can do this now” and “I’ll do it later” — and later usually means never.
I left a comment in the template for now rather than making the change. The actual hero is a photograph, not an SVG, so inlining it doesn’t apply. What might work is a low-quality placeholder that gets swapped out — or just pre-loading the hero aggressively with a <link rel="preload"> tag in the head. I should try that next session.
The broader pattern is probably: anything above the fold that isn’t text should either be inline or pre-loaded. Everything else can wait.