How to Optimize Core Web Vitals for Heavy Media-Rich SaaS Landing Pages
Written by Elena Rostova
Published on June 13, 2026 • Technical Architecture Guide
Key Architecture Takeaways
Improve your page rankings by optimizing LCP and layout shift (CLS) through responsive image sizes and modern format decodes.
Core Web Vitals score isn't just a vanity metric anymore — it's a meaningful ranking signal, and for competitive SaaS keywords, the difference between a 90 and a 65 score can be the difference between page one and page three. Here's a practical, implementation-focused guide to the changes that actually move the numbers.
The Three Metrics You're Actually Optimizing
LCP (Largest Contentful Paint): How long until the biggest visible element loads. For most SaaS landing pages, this is the hero image or hero background. Target: under 2.5 seconds.
CLS (Cumulative Layout Shift): How much the page jumps around as it loads. Font swaps, late-loading images without dimensions, and injected ads cause this. Target: under 0.1.
INP (Interaction to Next Paint): How quickly the page responds to user clicks and taps. Replaced FID in 2024. Target: under 200ms.
Fixing LCP: The Hero Image
The most common LCP problem on landing pages: a large hero image that starts loading too late because the browser discovers it in the CSS or a lazily-loaded component.
The fix is preloading:
<!-- In your <head> -->
<link
rel="preload"
as="image"
href="/hero-image.webp"
imagesrcset="/hero-mobile.webp 768w, /hero-desktop.webp 1440w"
imagesizes="100vw"
/>Also: ensure your hero image has fetchpriority="high" on the <img> tag, and convert all images to WebP or AVIF. AVIF is 30-50% smaller than WebP at equivalent quality but has slightly worse browser support (fine for 2026 — all major browsers support it now).
Fixing CLS: The Layout Shift Culprits
Images without dimensions: Always specify width and height attributes on every <img> element. The browser reserves the space before the image loads, preventing shift.
<!-- Wrong -->
<img src="/product.jpg" alt="Product screenshot" />
<!-- Right -->
<img src="/product.jpg" width="800" height="600" alt="Product screenshot" />Custom font loading: Use font-display: optional for fonts that aren't critical, or font-display: swap with a very close system font fallback to minimize the visible shift.
Dynamically injected content: Banners, cookie consent bars, and chat widgets that appear after page load are major CLS contributors. Reserve space for them in your layout CSS, or inject them before the main content paints.
Fixing INP: JavaScript Execution Time
INP problems are almost always too much JavaScript blocking the main thread. Diagnostic steps:
- Run a Lighthouse audit → look at "Reduce JavaScript execution time" and "Avoid long main-thread tasks"
- Use Chrome DevTools Performance tab → record a page interaction → look for tasks longer than 50ms
- Break up long tasks using
scheduler.postTask()or the oldersetTimeout(fn, 0)trick
For Astro sites specifically: ensure you're not over-using client:load. Most islands should be client:visible (only hydrate when scrolled into view) or client:idle (hydrate when the browser is idle). This dramatically reduces initial JS execution.
Quick Wins Checklist
- Enable Brotli compression on your server
- Use a CDN (Cloudflare free tier is fine)
- Remove unused CSS (PurgeCSS, or Tailwind's built-in purging)
- Defer non-critical third-party scripts (analytics, chat)
- Self-host Google Fonts to avoid the additional DNS lookup
Run PageSpeed Insights before and after each change. Small individual improvements compound — getting from 70 to 90 is often 5-6 targeted fixes rather than one big architectural change.
Alex Sterling
Verified Technical AuthorSenior Solutions Architect & Lead Reviewer
12+ years in cloud infrastructure, microservice architecture, and enterprise iPaaS integrations. Alex evaluates software pipelines, API payloads, and SaaS pricing efficiencies.
Software picks, honestly reviewed —
straight to your inbox.
Every Tuesday we share our latest review, one tool that surprised us, and one that didn't live up to the hype. No filler, no affiliate-first rankings.