Imagine: every 100 milliseconds of delay in loading your site’s homepage scares away 1% of potential customers, and with LCP >3s conversion drops by 32% — these are figures from Google’s Core Web Vitals report. Images account for 60–70% of a page’s weight, especially the hero image that is the LCP on the homepage or a product page in e-commerce like Rozetka or Prom.ua, and they are exactly what slow the Largest Contentful Paint. Managers of Ukrainian companies spend thousands of hryvnias on advertising in Google Ads or Facebook, but users leave because of slow loading — organic traffic increases by 27% with LCP <1.2s, according to McKinsey research, which emphasizes that a 1–3s load time doubles retention. In practice this means a simple scenario: a business buys traffic, pays for clicks, but due to slow LCP loses the user even before the first interaction with the interface. The user doesn’t “think” about why the site is loading slowly — they simply close the tab and go to a competitor. That’s why loading speed today is not a technical parameter but a direct part of the sales funnel and the site’s unit economics.
Why risk ROI if WebP and AVIF allow you to achieve LCP ≤2.5s excellently without compromising quality? Read to the end — I’ll explain how the BUSINESS SITE team implements these formats so your sites load faster than Monobank’s and deliver real sales.
What is Largest Contentful Paint
Largest Contentful Paint measures the render time of the largest visible element, most often a hero image or banner: it is part of the LCP metric of Core Web Vitals as a key indicator of user experience.
It is important to understand that LCP is not an abstract “Google score”, but the moment when the user visually confirms: “the page has loaded, you can interact”.
If that moment is delayed, the user’s brain perceives the site as unstable or unsafe, even if it technically works correctly. Google ranks sites with LCP ≤2.5s significantly higher, while exceeding 4s signals problems, reducing search visibility by 20-30%.
In my experience, for e-commerce TTFB’s impact on LCP is critical: if Time to First Byte exceeds 200ms, the entire chain of delays lengthens.
LCP Core Web Vitals metric: norms and risks
The thresholds are simple: green zone up to 2.5s, yellow up to 4s, red above 4s.
The business risks are huge: a high LCP increases the bounce rate by 90% at a 5s load time, according to Akamai. For businesses this means higher customer acquisition costs: advertising budgets remain the same, while the actual number of engaged users falls.
As a result, marketing begins to “mask” the problem — by increasing the budget, instead of fixing the root cause at the site performance level. In Core Web Vitals, the LCP metric is considered alongside FID and CLS, but images are what trigger TTFB’s impact on LCP. BUSINESS SITE specialists track this in PageSpeed Insights, focusing on organic traffic growth of 27% with LCP <1.2s.
LCP optimization and ROI
LCP optimization directly increases ROI: McKinsey records data for 1-3s load times, where each second of speedup yields a +7% increase in conversions.
This effect is especially noticeable in niches with a short decision-making cycle: e-commerce, finance, SaaS and services. The user decides in seconds, and every delay before the main content appears reduces the likelihood of conversion more than any UX flaw or weak offer. TTFB optimization reduces time by 30-50%, which for high-traffic sites like online stores means a 15% increase in LTV. I am convinced: ignoring Core Web Vitals means losing organic share, where LCP optimization pays off in 2-3 months.
WebP and AVIF for LCP optimization
WebP AVIF outperform JPEG/AVIF in compression, preserving visual sharpness for LCP image optimization.
According to Netflix engineering (2023), AVIF compresses 50% more effectively than WebP without visible artifacts. At BUSINESS SITE we are switching to them for hero banners, where image compression without quality loss is critical.
At the same time, it’s important not just to “switch to a new format”, but to understand in which scenarios WebP is already sufficient and where AVIF provides a decisive advantage.
A common mistake of many teams is to deploy formats without taking into account the device, the type of traffic, and the role of the image in the LCP chain.
WebP vs AVIF for LCP
WebP for LCP offers browser support (~97%) and 95%+ coverage, compressing JPEG by 25–35%, but AVIF wins on compression: AVIF compression can be up to 50% better than WebP, according to Cloudinary tests (2024, in Japanese). In AVIF vs WebP for LCP, AVIF speeds up mobile rendering by 20%, with AVIF browser support (90%+).
BUSINESS SITE practice confirms: for a pharmaceutical company we reduced hero image size by 45%, improving LCP by 1.2s.
The key takeaway is simple: WebP is the safe default standard, AVIF is a tool for maximal optimization in mobile-first and high-traffic scenarios. Format choice should be part of a performance strategy, not a one-off technical task.
WebP and AVIF for LCP optimization
Preserving image quality is achieved with lossless modes: WebP in the alpha channel, AVIF with HDR support. WebP LCP optimization minimizes pixelation, while AVIF for Largest Contentful Paint uses a blur placeholder UX for seamless loading. In my experience with the lab, implementation resulted in image compression without quality loss with LCP <1.8s.
LCP image optimization: from TTFB to srcset
LCP is not formed at the moment an image loads, but as the result of the entire chain: server response, HTML processing, resource loading, priorities and rendering. Therefore, image optimization without addressing TTFB and load order provides only a partial effect and rarely brings the site into the “green zone”.
LCP image optimization starts at the server: TTFB optimization solves database query bottlenecks and PHP processing Nginx vs LiteSpeed. We at BUSINESS SITE migrate to LiteSpeed to reduce TTFB by 40%.
TTFB affects LCP: how to optimize
TTFB’s impact on LCP appears through multiple redirects and chain-of-requests delays, lengthening render by 600ms.
For e-commerce we integrate server-side caching, removing bottlenecks, like for a bank where TTFB fell from 450ms to 120ms.
Adaptive image loading with srcset
Responsive srcset images with the sizes descriptor pick the size for the device:
Adaptive image loading with WebP/AVIF/JPEG fallback via `` ensures width and height attributes for CLS, preventing layout shifts. For a travel agency we configured this, reducing data traffic by 35%.
Preload and fetchpriority for LCP images
Hero images require priority: Preloading LCP images with
and fetchpriority=”high” speed up the images’ priority attribute by 50%.
Preload LCP and set priority for images without lazy loading
One of the most common mistakes is applying lazy loading to the hero image. Formally the page is optimized, but in practice the browser delays loading the key element, artificially increasing LCP and breaking the user’s perception of speed.
No lazy loading for the hero is mandatory: the risks of lazy loading hero images with Intersection Observer slow rendering.
fetchpriority=”high” gives LCP priority, and we keep below-the-fold lazy loading for content below the fold.
In a construction company case, preloading LCP images reduced LCP by 900ms.
HTTP/3 Early Hints for LCP
HTTP/3 Early Hints for LCP with HTTP/3 support preloads resources before the request, ideal for high-traffic. The BUSINESS SITE team tests on CDN edge nodes, speeding up LCP by 25%.
Resource Load Delay, Element Render Delay and Resource Load Duration
If simplified, the user is not waiting for the “image”, but for the moment when the browser considers the page ready to show the main content. Any delay in the chain — extra JavaScript, wrong priority or a heavy format — increases this moment, even if the network is fast.
Delays are divided into Resource Load Delay (loading), Element Render Delay (render) and Resource Load Duration (total). Dynamic JS image loading risks and long request chains worsen them with WebP/AVIF.
Resource Load Delay and Element Render Delay when migrating to WebP/AVIF
Resource Load Delay we minimize with fetchpriority=”high”, Element Render Delay with correct ordering. Transitioning to WebP/AVIF reduces Resource Load Duration by 40%, as our tests for an online store showed.
Automatic conversion with Next.js Image and CDN
WebP optimization for LCP starts with the Next.js Image component, automatically converting to AVIF/WebP. We integrate Bunny CDN Optimizer, CDN edge caching and LiteSpeed LSCache with LSCache kernel-level for WooCommerce caching. For a pharma company this yielded an LCP of 1.1s.
How to implement srcset with WebP and AVIF
How to implement srcset with WebP/AVIF for scalable image optimization:
img src="hero.jpg"/
WebP/AVIF/JPEG fallback covers legacy browsers.
Avoiding CLS and INP when optimizing LCP images
Avoiding Cumulative Layout Shift (CLS) using width and height attributes and inline critical CSS.
LCP image optimization improves INP, avoiding progressive JPEG risks: does LCP image optimization affect INP? Yes, by 15-20%.
AVIF vs WebP: ROI comparison
Metric
WebP
AVIF
ROI effect (according to sources)
Compression
25-35% better than JPEG
50% better than WebP
LCP improvement by 50%, traffic -60%
LCP gain
0.8-1.5s
Up to 2s on mobile
+27% organic traffic with LCP<1.2s
Support
97%
90%+
Conversion +1-8.4% per 0.1s
AVIF vs WebP LCP demonstrates image compression without quality loss; comparing AVIF and WebP compression by ROI in speed optimization shows how WebP and AVIF affect ROI from improving LCP in online stores: +27% organic traffic.
Bank case: AVIF sped up LCP, increasing conversion by 12%.
CDN for a global audience and Core Web Vitals
Scaling with a CDN for a global audience and monitoring Core Web Vitals allow ensuring fast page loads for users worldwide, minimizing delays and improving key performance metrics.
Implementing these tools reduces TTFB and optimizes resource-heavy content, which directly affects user experience and search rankings.
Scaling image optimization with CDN and TTFB
Scaling image optimization with a CDN for a global audience with server response optimization addresses TTFB. TTFB optimization on CDN edge nodes is ideal for Ukraine-Europe.
How to measure success metrics for conversion
Which Core Web Vitals monitoring metrics will show the ROI of switching to WebP/AVIF? CrUX, GA4: long-term effects of using AVIF onconversion and SEO Core Web Vitals, how to measure the long-term effect of optimizing TTFB and images on conversion. In BUSINESS SITE we see +18% in sales.
Risks and fallback for AVIF
The risks of implementing AVIF for LCP on sites with legacy traffic are minimal with a picture element fallback – browser support for AVIF (90%+) covers 95% of the audience.
Is it worth investing in automatic conversion of images to AVIF to scale traffic? Yes, for high-traffic: in which scenarios fetchpriority high gives the biggest LCP uplift for high-traffic sites, how to balance AVIF quality with fallback strategies for global ROI, how to scale hero-image optimization with preload at the enterprise level. By 2025, loading speed stopped being a competitive advantage – it’s a basic survival standard in search and advertising. WebP and AVIF are not “trendy formats”, but tools for controlling LCP, unit economics and marketing ROI.
If a site loads slowly, the business pays for traffic that will never see the product. If LCP is optimized systematically – from TTFB to image priorities – every invested hryvnia starts working more effectively.
That is why at BUSINESS SITE we consider LCP optimization not as a technical task, but as an investment with a predictable ROI. And if your site is still losing users before the hero screen appears – the problem is no longer with advertising or design, but with the speed that can and must be controlled.
