Landing Page Speed Optimization: The 3-Second Rule
Every second of delay costs you 7% in conversions. Here's how to make your landing page load in under 3 seconds.
Your landing page takes 8 seconds to load. 53% of visitors are already gone.
Here's how to get it under 3 seconds.
Why Speed Kills Conversions
The data:
- 1 second delay = 7% fewer conversions
- 3 second load time = 32% bounce rate
- 5 second load time = 90% bounce rate
Your page could be perfect. If it's slow, nobody sees it.
The 3-Second Budget
You have 3 seconds to load. Here's how to spend them:
Second 1: HTML + Critical CSS
- Inline critical CSS
- Defer non-critical CSS
- No render-blocking scripts
Second 2: Hero Content
- Above-fold images loaded
- Web fonts displayed
- Interactive elements ready
Second 3: Full Page
- Below-fold content lazy loaded
- Analytics loaded
- Chat widgets loaded
Anything past 3 seconds? Too late.
Quick Wins (Do These First)
1. Compress Images
Your hero image is 4MB. It should be 200KB.
Tools:
- TinyPNG (online, free)
- Squoosh (Google's tool)
- ImageOptim (Mac app)
Target sizes:
- Hero images: Under 200KB
- Section images: Under 100KB
- Icons/logos: Under 50KB
Use WebP format. 30% smaller than JPEG, same quality.
2. Remove Unused JavaScript
Your page loads 800KB of JavaScript. You use 80KB.
What to remove:
- Unused analytics scripts
- Old tracking pixels
- Abandoned A/B test code
- Chat widgets (load on interaction)
- Social media embeds (lazy load)
Cut the fat. Keep only what's essential.
3. Use a CDN
Your server is in San Francisco. Your visitor is in Tokyo. Round-trip time: 200ms per request.
CDN benefits:
- Serve from nearest location
- Reduce latency by 50-80%
- Cache static assets
Cloudflare has a free tier. Use it.
4. Enable Compression
Your HTML is 100KB uncompressed. With Gzip: 25KB.
Enable Gzip/Brotli:
- Reduces file sizes 70-80%
- Supported by all browsers
- Usually enabled on hosting by default
Check: Run your site through GTmetrix. Look for compression.
5. Lazy Load Below-Fold Images
Loading 10 images on page load? Only 2 are visible.
Lazy loading:
<img src="image.jpg" loading="lazy">
Images load only when scrolled into view. Instant speed boost.
Advanced Optimization
Inline Critical CSS
Don't wait for external CSS to download. Inline the critical styles.
What to inline:
- Above-fold styles
- Layout CSS
- Font declarations
What to defer:
- Below-fold styles
- Animation CSS
- Non-critical components
Target: First Contentful Paint under 1.5 seconds.
Preload Key Resources
Tell the browser what's important.
<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="font.woff2" as="font">
Browser prioritizes these downloads. Faster render.
Use System Fonts (Or Subset Custom Fonts)
Custom fonts add 50-200KB. System fonts are instant.
System font stack:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
If you need custom fonts:
- Use only 1-2 weights
- Subset to Latin characters only
- Use
font-display: swap
Every font file = slower load.
Remove Render-Blocking Scripts
JavaScript in <head> blocks page render.
Fix:
- Move scripts to bottom of
<body> - Use
deferorasyncattributes - Inline critical scripts only
<script src="app.js" defer></script>
Page renders, then scripts load.
Optimize Third-Party Scripts
Google Analytics, Facebook Pixel, Hotjar, chat widgets. Each adds 100-300ms.
Optimization:
- Load analytics async
- Delay chat widgets (load on scroll or 5s delay)
- Use Google Tag Manager for one script instead of 10
- Remove unused tracking
Third-party scripts are conversion killers.
Measuring Performance
Tools to Use
PageSpeed Insights (Google)
- Shows Core Web Vitals
- Gives specific recommendations
- Mobile + desktop scores
GTmetrix
- Waterfall chart
- Performance history
- Detailed recommendations
WebPageTest
- Real device testing
- Filmstrip view
- Advanced metrics
Run all three. Fix red items first.
Metrics That Matter
LCP (Largest Contentful Paint)
- Target: Under 2.5 seconds
- What it measures: Hero image/text load time
FID (First Input Delay)
- Target: Under 100ms
- What it measures: Time until interactive
CLS (Cumulative Layout Shift)
- Target: Under 0.1
- What it measures: Visual stability
Pass all three = good user experience.
Performance Budget
Set limits. Enforce them.
Sample budget:
- Total page size: Under 1MB
- JavaScript: Under 200KB
- Images: Under 500KB
- Fonts: Under 100KB
- Third-party scripts: Under 100KB
Break the budget? Don't ship.
Testing on Real Devices
Your MacBook Pro loads in 2 seconds. Customer's iPhone 11 on 4G? 8 seconds.
Test on:
- Slow 4G network (throttle in DevTools)
- Mid-range Android phone
- Older iPhone
- Actual slow connection
Fast on WiFi means nothing if it's slow on mobile.
Common Speed Killers
Killer 1: Unoptimized Images
Fix: Compress, use WebP, lazy load
Killer 2: Too Much JavaScript
Fix: Remove unused code, defer loading
Killer 3: No CDN
Fix: Use Cloudflare or Vercel
Killer 4: Render-Blocking Resources
Fix: Defer CSS/JS, inline critical styles
Killer 5: Slow Server Response
Fix: Upgrade hosting or use edge functions
The Reality
Speed isn't optional. It's table stakes.
You can have the best copy, perfect design, compelling offer. If the page loads in 6 seconds, you've already lost.
Want to know if your landing page is fast enough? Get roasted by PageRekt. Our Developer Bear will destroy your performance scores (then tell you exactly how to fix them).
Try it free, or get the full Deep Dive roast for $26.99 (one-time) or $29.99/month unlimited.