How I structure a marketing site so it loads in under 1.5 seconds on a mid-range phone on a 4G connection — every decision, every trade-off, with real numbers from real shipped sites.
Why 1.5 seconds? Because Google's Largest Contentful Paint threshold for "Good" is 2.5 seconds. Because the median mobile user is on a 4G connection with 100 ms of round-trip latency. Because the page should be readable before they get bored and bounce back to Twitter.
1.5 is not a vanity metric. It's the ceiling at which a real user, on a real phone, in a real place, decides whether to stay.
This playbook focuses on marketing sites — landing pages, portfolios, brochures. Application UIs have different priorities.
Most teams measure performance after the design is final. By then the hero animation is shipped, the font stack is locked, and the only thing left to optimize is compression. That's like trying to make a building lighter by changing the paint.
The fix: write a performance budget into the proposal. Add a CI check that fails the deploy if any page violates it. I include this as the first deliverable on every project.
For marketing sites, static-site generation wins. Astro and 11ty are my defaults. The HTML is prerendered, the JS is opt-in, the deploys are atomic. Compare to Next.js, which is brilliant for apps but ships a runtime by default — runtime you have to negotiate down for marketing work.
The hero image is almost always the LCP element. If it's over 200 KB, you've lost. Fix:
<picture> and srcset<link rel="preload" as="image"> in <head>width and height attributes to prevent CLS… more chapters in the full version. Get in touch if you want the working file. I send PDFs on request.
The playbook is free. The implementation is what I sell. See packages or send a brief.