Under-2-Second Landing Pages: Speed, Score, and Sales

Speed is not a developer vanity metric. It is a sales lever. When your landing page hits in under two seconds on a mid-range phone, more people stick around, more people tap the call button, and your cost per lead drops. Here’s a practical guide you can hand to your team to build pages that load fast and convert faster.

Page-weight targets, image compression, and script hygiene

Set hard limits before you design. If you do not budget weight, you will overspend it.

Mobile page-weight budget

• Total under 1.2 MB on first load. Aim for 800 KB when you can.

• JavaScript under 150 KB compressed. Execution time under 200 ms.

• CSS under 80 KB. Inline only what is critical.

• Hero image under 120 KB. Use modern formats.

Image rules

• Export AVIF first. Fall back to WebP and JPEG.

• Serve responsive sizes with srcset and sizes.

• Use loading="lazy" below the fold.

• Add fetchpriority="high" to the single hero image.

• Strip EXIF. Compress to the smallest file that still looks clean at 2x pixel density.

Script hygiene

• Delete unused libraries. Most pages do not need a full UI kit, a datepicker, and three sliders.

• Replace heavy carousels with a single static image or a CSS snap gallery.

• Load analytics through a server-side or lightweight wrapper if possible.

• Defer third-party scripts. Use async for non-critical tags.

• Block tag managers until consent to prevent preloading a dozen trackers that do nothing for conversion.

Critical CSS, caching, and font loading that will not tank CLS

Your job is to render the first screen instantly and keep it stable.

Critical CSS

• Inline only above-the-fold styles. Keep it under 15 KB.

• Defer the rest with a non-render-blocking <link rel="preload" as="style"> followed by rel="stylesheet".

• Remove legacy resets and unused utility classes.

Caching

• Turn on Brotli or Gzip at the edge.

• Use HTTP/2 or HTTP/3.

• Static assets get Cache-Control: public, max-age=31536000, immutable.

• Version assets with a hash so you can cache long and update safely.

• Serve from a CDN that has POPs near your buyers.

Font loading without CLS

• Stick to one variable font or two static weights.

• Self-host fonts. Preload the primary with <link rel="preload" as="font" type="font/woff2" crossorigin>.

• Use font-display: swap.

• Set explicit width and height on logo SVG or wrap in a fixed box so it does not shift when the font swaps.

• Avoid layout-shifting elements like un-sized images, ad iframes, or late-loading banners. Always reserve space with CSS aspect-ratio or dimensions.

Target Core Web Vitals: LCP under 2.5 s on 4G, CLS under 0.1, INP under 200 ms, TTFB under 800 ms. Faster is better. Under two seconds for LCP is a strong benchmark.

Measuring with Lighthouse and real-user metrics

Lab tests tell you what might happen. Field data tells you what is happening.

In the lab

• Run Lighthouse in Chrome with mid-tier throttling. Note LCP element, total blocking time, and unused JS.

• Use WebPageTest for a filmstrip view and repeat-view caching.

• Test with a real mid-range Android device if you can. Emulators hide jank.

In the field

• Turn on Core Web Vitals in your analytics or a RUM tool. Track by URL.

• Watch LCP element types. If a hero video is the LCP, swap it for a still image.

• Segment by device class and network. Fix the slowest cohort first.

• Review console errors. A single 404 on a CSS file can add seconds of delay.

Make a simple dashboard. Show LCP, INP, CLS, page weight, and conversion rate for the landing page. If speed dips, conversion will too.

Impact of speed on CPL and call-tap rate

Speed changes behavior. A fast page feels trustworthy. A slow page feels broken.

Where speed pays

• Fold arrival. More users reach your offer without bouncing.

• Form starts. Lower cognitive friction leads to more first keystrokes.

• Call taps. A visible, sticky button that appears immediately gets tapped more often.

• Quality scores. Faster pages often lower ad costs on platforms that score landing experience.

• Remarketing pools. Fewer bounces mean more qualified visitors to retarget.

What to track

• Cost per click.

• Landing conversion rate.

• Cost per lead.

• Call-tap rate on mobile.

• Time to first interaction.

• Abandon rate on step two if you use a multi-step form.

Tie each optimization to a number. Compressing hero images might lift call taps by two points. Removing a chat widget that injects 300 KB of JS might drop CPL by 15 percent. You are creating a series of small wins that compound.

Build-once checklist

Use this list every time you ship a landing page.

• Budget set. Total under 1.2 MB. JS under 150 KB.

• One hero image in AVIF with responsive sizes.

• Critical CSS inlined. Remainder deferred.

• Fonts self-hosted with swap. One family, minimal weights.

• No layout shifts. All media sized. CLS check passes.

• Third-party tags deferred or removed.

• CDN, Brotli, and long-cache headers in place.

• Lighthouse passes at 90+ Performance on mobile.

• Real-user LCP under 2.5 s at the 75th percentile.

• Sticky mobile CTA tested for thumb reach.

• Event tracking wired for lead submit and call taps.

Bottom line

Fast pages are persuasive pages. When your landing experience hits in under two seconds, you keep attention, earn trust, and turn more clicks into calls and leads. Treat speed like a product feature, budget it like money, and measure it like revenue. The payoff shows up directly in a lower CPL and a higher call-tap rate.