Performance
FloatMessage landing pages hit 95+ Lighthouse scores (Performance, Accessibility, Best Practices, SEO) out of the box. This page is a reference of every technique we apply so you can trust what you're shipping - and know what not to break when you customize.
Image optimization
- WebP everywhere. AI-generated images and user uploads are both transcoded to WebP automatically - typically 25–35% smaller than JPEG at the same perceived quality.
- Right-sized per slot. Hero at 16:9 / 2K, feature icons at 1:1 / 1K, CTA background at 16:9 / 2K, OG card at 16:9 / 2K. No oversized hero gallery file served for a 48×48 feature icon.
- Prompt-hash dedupe. Identical prompts reuse the existing R2 object. Editors regenerating the same section don't re-bill Gemini or duplicate storage.
- 1-year immutable cache.
Cache-Control: public, max-age=31536000, immutableon/api/images/…. Images travel once from R2 to the edge, then live in browser cache forever. - Hero image preload.
<link rel="preload" as="image">is emitted in<head>before the CSS parse finishes so the LCP asset starts downloading in parallel. - Intrinsic width/height on every img. Prevents cumulative layout shift (CLS) - the browser reserves exact pixels before the bytes arrive.
- Lazy loading below the fold. Feature icons and any non-hero image use
loading="lazy"; the hero usesfetchpriority="high"to claim early bandwidth.
CSS & JavaScript
- Inline critical CSS. The full page stylesheet is embedded in the HTML - zero stylesheet fetches, no render-blocking resource. Compiled once at publish time.
- Zero client JavaScript on the page itself. The only script that ships is the FloatMessage embed, and that's
deferred so it never blocks first paint. - System fonts. The stylesheet uses
system-ui, -apple-system, ...— no Google Fonts, no web-font flash or blocking fetch. - Native form submission. Lead forms submit with a plain
<form method="POST">and a server-side 303 redirect. No JS, no SPA, no hydration cost.
Rendering path
HTML is pre-compiled when you hit Publish. The public route (/p/[slug]) fetches the row, emits the compiled HTML + CSS strings directly, and never iterates the section JSON at request time. Rendering is essentially "concat three strings and send".
Pages are served from a global edge network - time-to-first-byte is typically under 100ms worldwide.
Lighthouse targets
| Metric | Target |
|---|---|
| Performance | ≥ 95 |
| Accessibility | ≥ 95 |
| Best Practices | ≥ 95 |
| SEO | 100 |
| LCP (Largest Contentful Paint) | < 2.0s on mobile |
| CLS (Cumulative Layout Shift) | < 0.05 |
| INP (Interaction to Next Paint) | < 100ms |
What you can do to keep it fast
- If you upload your own hero image, keep it under 500 KB. The in-app upload already compresses to WebP at 1920px max - you're fine if you use that path.
- Don't add third-party tracking scripts to your landing page's content - FloatMessage doesn't expose a way to inject them, but if you paste raw HTML into future custom blocks, every extra
<script>is measurable. - Keep feature sections to 4–6 items. More creates visual clutter and adds image payload.