If your Largest Contentful Paint is in the red, the odds are overwhelming that an image is to blame. The largest element above the fold on most pages is a hero image, a product shot, or an editorial photo – and that single element is what Google clocks. Get it wrong and you fail the one Core Web Vital that the most sites already fail.

This article walks through the three Core Web Vitals as success criteria – what each one actually measures, what it demands from your image delivery, and where a self-hosted CMS or framework leaves you doing the work by hand. Then it shows where fairu.app fits as the optimization layer between your CMS and your users.

The three criteria, and
why images dominate

Google evaluates Core Web Vitals at the 75th percentile of real user data, segmented across mobile and desktop. Three metrics decide the verdict.

Largest Contentful Paint (LCP) measures loading speed. The "good" threshold is 2.5 seconds or less; 2.5–4.0 s is "needs improvement," and above 4.0 s is "poor." LCP is the hardest of the three to pass – recent field data puts only somewhere around 55–62% of mobile origins in the green – precisely because it depends on the entire chain: server response, network, image bytes, CSS, JavaScript, and rendering. One bottleneck anywhere kills the score, and for the majority of pages the bottleneck is the hero image.

Cumulative Layout Shift (CLS) measures visual stability, with a "good" threshold under 0.1. Images that load without explicit dimensions are a classic cause: the browser reserves no space, then shoves the layout down when the bytes arrive.

Interaction to Next Paint (INP) measures responsiveness (under 200 ms is "good"). It's a JavaScript-and-main-thread metric, so images affect it only indirectly – but oversized images that block the network or force expensive decode work still steal main-thread time.

LCP is where image optimization pays off most, so that's the focus below.

Success criterion 1:
Ship the smallest correct bytes

The fastest LCP image is the one that's already the right size, the right format, and the right compression level for the device requesting it. In practice that means:

• Modern formats with fallback. AVIF and WebP routinely beat JPEG by 30–60% at equivalent quality. But you need per-request negotiation – serving AVIF to browsers that accept it, WebP or JPEG to those that don't.

• Correct dimensions per breakpoint. A 4000 px source delivered to a 390 px phone viewport is wasted bandwidth and wasted decode time. Each breakpoint wants its own variant.

• Tuned compression. Quality 90 everywhere is lazy. Photographic content tolerates aggressive compression that flat UI imagery does not.

Doing this by hand means a build-time image pipeline (sharp, libvips, imgproxy) plus a srcset/sizes matrix you maintain forever. It works, but it's infrastructure you own, debug, and scale.

This is exactly the layer Fairu replaces. You upload the original once; Fairu does on-the-fly resizing, cropping, and format conversion, and serves the result over a European CDN. Compression is automatic – Fairu reports file-size reductions of up to 66%, which is the difference between a hero image that lands inside the 2.5 s budget and one that doesn't. The format negotiation and variant generation happen at request time, so you're not maintaining a build pipeline or a srcset spreadsheet.

Two details in that snippet matter for LCP specifically: format=webp serves a WebP variant, which beats JPEG by a wide margin at equivalent quality and is supported by effectively every modern browser. Fairu also supports AVIF (format=avif) for even smaller files where you want it, so you can pick the format explicitly per use case. The second detail is fetchpriority="high", which tells the browser to prioritize the hero download. Google Flights cut LCP by roughly 700 ms with that one attribute alone – but it only helps if the bytes behind it are already small, which is the part Fairu handles.

Success criterion 2:
Deliver them fast and close

Small bytes still lose if they travel far. LCP includes time-to-first-byte and network transfer, so origin distance and cache behavior are part of the score.

A CMS orchestrates content; it doesn't optimize delivery. Serving images straight from your application origin means every request competes with your app server and travels from one location. Fairu sits in front as a delivery layer: every uploaded file gets a ready-to-use CDN link, cached and served from European edges. For a DACH-region audience that proximity is a direct TTFB win, and it offloads image traffic from your origin entirely – which also helps your server respond faster to the HTML request that starts the LCP clock.

The integration cost is deliberately near zero: REST, GraphQL (with federation), or official SDKs for PHP/Laravel, TypeScript, and Dart/Flutter. There's also a Statamic addon and an S3-compatible storage layer (RAKU), so you can drop it into an existing stack without reworking your architecture.

Success criterion 3:
Hold the layout stable (CLS)

CLS is the cheap win people forget. The fix is always-present intrinsic dimensions so the browser reserves space before the image arrives. Note the width and height attributes in the snippet above – with those set, the browser computes the aspect ratio and holds the slot, and the image drops in without shifting anything.

Where Fairu helps here is consistency: because you request explicit dimensions per variant, the served image matches the box you reserved. And focal-point control means an aggressively cropped responsive variant still frames the subject correctly instead of cropping off the important part – so you can crop hard for mobile (smaller bytes, better LCP) without sacrificing the composition.

Beyond the metrics: why this matters for SEO

Core Web Vitals are a confirmed Google ranking signal. They're not the primary signal – content relevance still wins – but they act as a tiebreaker between comparable pages and a gate for surfaces like the Top Stories carousel. In competitive niches, passing when your rivals don't is a measurable edge. And the user-behavior correlation is well documented: a 0.1 s mobile-speed improvement has been tied to an 8.4% lift in retail conversions, and one large publisher cutting LCP reported a 43% drop in bounce rate.

The practical takeaway: image optimization isn't a cosmetic nicety, it's the highest-leverage lever you have on the Core Web Vital most sites fail.

Where Fairu fits in your pipeline

Fairu is the optimization layer between your CMS and your users. You keep your CMS, your framework, and your editorial workflow. Fairu takes over the part that's tedious to build and expensive to run well:

• Bytes – automatic compression and modern-format conversion, on the fly.

• Variants – per-breakpoint resizing and focal-point-aware cropping, no build step.

• Delivery – European CDN with a ready-to-use link per asset, offloading your origin.

The result is an LCP image that's small, correctly sized, modern-format, and edge-delivered – which is the entire recipe for passing the criterion most sites fail. The metrics improve because the underlying work finally gets done; you just don't have to build the pipeline yourself.

If you want to see the effect on your own pages, start a free trial or book a demo. Point one hero image at Fairu, re-run Lighthouse, and watch the LCP bar move.