Optimize LCP: Images, Fonts and Server Response Time | Meteora Web Guide • Meteora Web Agency

Your site loads, but the main content appears slowly. The LCP (Largest Contentful Paint) score is high, and Google penalizes you in search results. Over 4 seconds and you lose more than 50% of visitors. We at Meteora Web see it every day: an unoptimized hero image, a Google Fonts loaded without fallback, a server that takes 1.5 seconds to answer. Here's how to fix it on three concrete fronts: images, fonts, and server response time.

What is LCP and why these three are the bottlenecks

LCP measures the time it takes for the largest visible element in the viewport to render. Usually an image, a video poster, a text block, or a background image. The contributing factors are three: resource loading (image or font), server response time (TTFB), and render-blocking JavaScript/CSS. We'll focus on the first two: images and fonts are heavy resources, the server is the foundation. A delay on any single one triples LCP.

Images: the most common culprit

We took over a clothing e-commerce with 3 MB images each. LCP was 5.2 seconds. After optimization, 1.8 seconds. Here's how.

Compress and choose the right format

Use WebP with JPEG/PNG fallback. Average savings are 30-40% over JPEG. If your server supports AVIF, even better: up to 50% less. Convert in batch with tools like `cwebp` or WordPress plugins (ShortPixel, Imagify).

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." width="1200" height="600" loading="lazy">
</picture>

Preload the LCP image

The browser needs to discover the image. If it's inside CSS or a hidden <img>, the preload scanner may not catch it. Declare an explicit preload.

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero.webp 1x, /hero-2x.webp 2x" fetchpriority="high">

Important: use fetchpriority="high" only on the LCP image, not on all. Otherwise you negate the benefit.

Explicit dimensions and aspect ratio

Always specify width and height on the <img> or in CSS backgrounds. This reserves space before download, avoiding layout shift (CLS) and speeding up LCP.

Fonts: the invisible culprit

Fonts, especially Google Fonts, are downloaded after CSS. If the font is used for the hero text, it blocks rendering. Solution: self-host and use font-display: swap.

Self-hosting fonts

Download the fonts from Google Fonts and serve them from your server. Eliminates extra DNS and connection latency. Use @font-face with font-display: swap to show fallback text while the font loads.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
  font-weight: 1 999;
}

Preload critical fonts

Add a preload for fonts used in LCP text.

<link rel="preload" as="font" href="/fonts/inter-var.woff2" type="font/woff2" crossorigin>

Subsetting and variable fonts

Only include the characters you need (subset). If you use variable fonts, you load one file instead of dozens of weights. Drastically reduce weight: from 200 KB to 20 KB.

Server response time (TTFB)

LCP starts only after the server responds. A high TTFB (over 500 ms) is a showstopper. We work with VPS hosting, caching, and CDN.

Hosting and configuration

Move to a VPS or optimized hosting for WordPress (Kinsta, WP Engine, or a VPS with Litespeed + Redis). Configure server-side caching (FastCGI, Redis) and a CDN (Cloudflare, BunnyCDN).

Page caching

For WordPress, use WP Rocket, Litespeed Cache, or Flying Press. Enable page caching and minify HTML/CSS/JS.

Edge Workers for instant responses

With Cloudflare Workers you can serve a static page from the edge without contacting your origin. For dynamic sites, consider SSG (static site generation) or an edge cache layer.

# Cache rules for Nginx server
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
}

Measure and monitor

Use Lighthouse (Chrome DevTools) for local analysis, PageSpeed Insights for field diagnostics, and CrUX for real user data. We always set up monitoring with RUM (Real User Monitoring) via GA4 or dedicated tools like SpeedVitals.

In summary — what to do now

Identify the LCP element: use Lighthouse or DevTools element picker. It's usually an image or lead text.
Optimize the image: reduce weight by 60% with WebP/AVIF, exact sizes, preload with fetchpriority="high".
Self-host fonts with font-display: swap and preload. Trim subsets.
Reduce TTFB: enable server-side caching, use a CDN, check DNS and database.
Test with PageSpeed Insights before and after. Target: LCP under 2.5 seconds.

We at Meteora Web have been doing this for eight years. If your site doesn't pass the test, we start from there.