Core Web Vitals for Ukrainian websites: how to pass LCP, INP, CLS

Since 2021, Google officially considers Core Web Vitals in its ranking. In practice, websites that do not meet these metrics lose 10-25% of organic traffic. Below, we outline exactly what to do, without any abstractions.

What are LCP, INP, CLS?

• LCP (Largest Contentful Paint). This is the time when the largest visible block is displayed. Goal: < 2.5s.
• INP (Interaction to Next Paint). This is the delay after a click or tap. Goal: < 200ms. Starting March 2024, it will replace FID.
• CLS (Cumulative Layout Shift). This measures the shift of elements during loading. Goal: < 0.1.

You can check in PageSpeed Insights (make sure to use mobile mode), in Google Search Console → Core Web Vitals, or through DevTools → Lighthouse.

Hosting: TTFB < 200ms

If the server responds slowly, nothing else will save you. A typical scenario for Ukrainian shared hosting: TTFB 500-1200ms, while LCP requires < 800ms overall.

What to do:

• Choose hosting with servers in the EU (Frankfurt, Warsaw) to ensure a ping of < 30ms for Ukrainian users.
• PHP 8.2+ with OPCache (provides a +30% speed boost in WordPress/OpenCart).
• Redis or Memcached for caching (especially in WooCommerce).
• Free Cloudflare in front of your site, instantly providing CDN and caching.

Images: WebP, sizes, lazy

80% of LCP issues arise from heavy hero banner images.

• WebP or AVIF format instead of JPG or PNG. Save 40-60%.
• Responsive sizes via srcset: 640w, 1024w, 1920w.
• loading="lazy" for all images except the hero banner. For it, we set fetchpriority="high".
• Always specify width and height, this fixes CLS.

Fonts: swap + preload

Google Fonts out of the box can be slow: several HTTP requests and FOIT, where text remains invisible while the font loads.

Solution: connect fonts locally (self-hosted), with the parameter font-display: swap, preload critical variants:

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

JavaScript: INP without blocking

INP suffers from heavy JS on the page: React with a bunch of dependencies, Google Tag Manager with 20+ tags, analytics.

• We implement GTM only for genuine analytics needs, not just 'in case'.
• Attribute defer or async for all non-critical scripts.
• Code-split for React and Vue bundles to avoid loading everything in one file.
• Load Facebook Pixel and Google Ads after user interaction.

CLS: stable layout

CLS jumps when elements load and push content.

• Fixed sizes for images, iframes, videos.
• Reserve space for banners and pop-ups.
• Fonts with font-display: swap + close fallback (Arial, sans-serif) to minimize height differences.
• No sudden cookie banners. Reserve space for them at the bottom.

Website Owner Checklist

1. Open PageSpeed Insights, enter your URL, Mobile mode.
2. If LCP > 2.5s, check the 'Opportunities' section. First and foremost: hosting and images.
3. If CLS > 0.1, look for elements without dimensions (usually this is a banner, popup, or slider).
4. If INP > 200ms, your JS is blocking rendering. Review the list of WordPress plugins or OpenCart extensions.
5. 14-28 days after making fixes, check Search Console → Core Web Vitals. Data accumulates gradually there.

Based on our experience, fixing these 5 issues typically results in an average of +20% loading speed and +12-15% conversion rates. If you need to audit your website, reach out to us; in the contacts you'll find Telegram.