Your AI-built site looks snappy on a MacBook. PageSpeed still says 40.

PageSpeed mixes a lab simulation with field data from real Chrome users when enough traffic exists. Optimise for the field numbers. Track Largest Contentful Paint (aim under 2.5s), Interaction to Next Paint (under 200ms), and Cumulative Layout Shift (under 0.1). Capture today’s values so every change has a scoreboard.

The heaviest tax on vibe-coded marketing sites is usually the JS payload. Assistants happily add a date package, a full icon set for six glyphs, animation libraries, and chart code on pages with no charts. Parsing and hydrating that stack blocks interactivity on phones.

Run a bundle analyser, delete libraries replaceable with a few native lines, tree-shake icons, and code-split by route. Prefer server-rendered HTML so content appears before scripts finish. A sane marketing budget is well under 100 KB of compressed JavaScript.

Synchronous scripts, CDN CSS frameworks, and remote font stylesheets each add round trips before the first pixel. On mobile that queues up fast.

Ship one compiled CSS file from your build. Defer non-critical scripts. Self-host WOFF2 fonts, preload the primary face, and use font-display: swap so text shows immediately.

Oversized PNGs, missing dimensions, and lazy-loading the hero are classic AI output. Convert to WebP/AVIF, size to the largest display width, use srcset, and always declare width/height or aspect-ratio. Lazy-load below the fold only — mark the LCP image with high fetch priority instead.

Tag managers, chat widgets, cookie banners, and pixels often outweigh your own code. Keep what pays for itself; load the rest after interaction or interactivity. Prefer server-side analytics when you can avoid a page script entirely.

CLS is almost always a specific offender: late images, injected banners, font swaps, or embeds without reserved space. Reserve space up front, never shove content in above existing content after load, and pick fallback fonts with similar metrics.

INP suffers when hydration monopolises the main thread or handlers do too much work. Less JS helps most. Break long tasks, defer heavy work, and skip full-framework hydration on pages that only need a menu and a form.

One origin in one region feels slow everywhere else. Use a CDN/edge host, long-cache hashed assets, sensible HTML caching, and Brotli or gzip. Confirm your host actually enables them.

Blur filters on large moving layers, backdrop-filter over scrolling content, and animating layout properties look polished in demos and janky on phones. Stick to transform and opacity, soften with gradients instead of blur, and honour prefers-reduced-motion.

Write limits into the repo so the next human — or AI agent — cannot quietly break them: marketing JS under ~100 KB compressed, one CSS file under ~30 KB, two self-hosted fonts or fewer, no unpaid third-party scripts on landing pages, every image sized and declared, and monthly field-vital checks.