Оптимізація Largest Contentful Paint (LCP) сайту

Ваш інтернет-магазин втрачає до 20% конверсії через повільне завантаження головного зображення. Відвідувач бачить білий екран замість банера — і йде до конкурентів. Винуватець — LCP (Largest Contentful Paint), час появи найбільшого елемента у viewport. Google вимагає LCP менше 2,5 секунди, але 60% сайтів не проходять цей поріг. Ми оптимізуємо LCP понад 5 років і виконали більше 200 проєктів, накопичивши практичні рішення для будь-яких кейсів. Сертифіковані фахівці з Core Web Vitals гарантують результат: якщо LCP не покращиться, ми повертаємо кошти. У результаті ви отримуєте швидкий сайт, високі позиції в пошуку та зростання конверсії. Фінансовий ефект: зниження витрат на серверні ресурси до 5000 грн на місяць та збільшення виручки. Спираємося на багаторічний досвід і використовуємо найкращі практики індустрії.

Чому LCP критичний для конверсії?

LCP безпосередньо впливає на Core Web Vitals — фактор ранжування Google. Затримка в 1 секунду знижує конверсію на 7%. Повільне завантаження hero-зображення або заголовка відштовхує користувача. Наші клієнти після оптимізації фіксують покращення LCP в середньому на 40% і зростання органічного трафіку на 15%. Preload зображень у 3 рази ефективніший для LCP, ніж відкладене завантаження. Серверний кеш знижує TTFB у 5-10 разів порівняно з відсутністю кешування.

Як швидко діагностувати LCP?

Використовуйте DevTools → Performance → запис завантаження. Знайдіть позначку LCP. Або через консоль:

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP element:', last.element);
  console.log('LCP time:', last.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

Також можна використовувати PerformanceObserver через JavaScript для точної діагностики. LCP діагностика за допомогою CrUX та Lighthouse дає повну картину. Докладніше про метрику читайте в документації LCP.

Preload зображень та оптимізація контенту

Preload критичних зображень

<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w, /images/hero-1920.webp 1920w" imagesizes="100vw" fetchpriority="high">
<img src="/images/hero.webp" srcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w, /images/hero-1920.webp 1920w" sizes="100vw" width="1920" height="1080" alt="Оптимізація LCP: preload герой-зображення" fetchpriority="high" loading="eager" decoding="async">

loading="lazy" на LCP-зображенні — часта помилка. Lazy loading відкладає завантаження, збільшуючи LCP. Завжди використовуйте fetchpriority="high" та loading="eager" для головного зображення.

Коректна обробка фонового зображення

Якщо LCP-елемент — CSS background-image, браузер не може preload його автоматично. Найкраще рішення — замінити на <img>. Якщо заміна неможлива, додайте preload через JavaScript.

Прискорення TTFB та усунення render-blocking

Серверний кеш

LCP = TTFB + час завантаження ресурсу. Повільний TTFB робить хороший LCP неможливим. Використовуйте серверний кеш — Full Page Cache або fastcgi_cache.

// Laravel: Full Page Cache для публічних сторінок
// Пакет spatie/laravel-responsecache або nginx fastcgi_cache
class CacheResponse
{
    public function handle(Request $request, Closure $next): Response
    {
        if (!$request->isMethod('GET') || auth()->check()) {
            return $next($request);
        }

        $key = 'fpc:' . md5($request->fullUrl());
        $cached = Cache::get($key);

        if ($cached) {
            return response($cached['body'], 200, $cached['headers'])
                ->header('X-Cache', 'HIT');
        }

        $response = $next($request);

        if ($response->isOk()) {
            Cache::put($key, [
                'body' => $response->getContent(),
                'headers' => ['Content-Type' => 'text/html; charset=UTF-8'],
            ], now()->addMinutes(5));
        }

        return $response;
    }
}

# nginx fastcgi_cache
fastcgi_cache_path /var/cache/nginx levels=1:2 keys_zone=FCGI:10m inactive=60m;

location ~ \.php$ {
    fastcgi_cache FCGI;
    fastcgi_cache_valid 200 5m;
    fastcgi_cache_bypass $cookie_session $http_authorization;
    fastcgi_no_cache $cookie_session $http_authorization;
    add_header X-Cache $upstream_cache_status;
}

Ці конфіги забезпечують кешування сторінок для неавторизованих користувачів, скорочуючи TTFB до 30–50 мс.

Critical CSS

Критичний CSS вбудовується в <head> для миттєвого рендерингу above-the-fold. Решта CSS завантажується асинхронно.

// vite.config.ts
import { critters } from 'critters';

export default defineConfig({
  plugins: [
    critters({
      preload: 'swap',
      pruneSource: false
    })
  ]
});

Плагін Critters автоматично виділяє критичний CSS і вбудовує його, решту завантажує з preload.

Цільові показники LCP для різних сторінок

Порівняння методів оптимізації LCP

Процес оптимізації LCP під ключ

1. Аудит — діагностика поточного LCP, TTFB, ресурсів. Використовуємо Lighthouse, WebPageTest, CrUX.
2. Аналіз — виявлення вузьких місць (lazy loading на LCP, повільний сервер, render-blocking).
3. Оптимізація — preload, серверний кеш (Varnish, Redis), critical CSS, WebP/AVIF.
4. Тестування — заміри до/після, перевірка на мобільних пристроях.
5. Моніторинг та звіт — налаштування Long Tasks API, регулярні звіти.

Термін: 3–5 днів з урахуванням налаштування збірки, кешу та тестування. Вартість базової оптимізації LCP — від 5000 грн.

Що входить в роботу

• Повний аудит Core Web Vitals зі звітом.
• Налаштування preload та оптимізація зображень (WebP, AVIF, responsive).
• Впровадження серверного кешування (Varnish, Redis, nginx).
• Inline critical CSS з усуненням render-blocking.
• Моніторинг LCP через Long Tasks API та CrUX.
• Документація щодо впроваджених змін та рекомендації з підтримки.

Як замовити оптимізацію LCP

Отримайте консультацію щодо вашого проєкту — оцінимо поточний LCP і запропонуємо план дій. Замовте аудит LCP, щоб дізнатися точні покращення. Зв'яжіться з нами для обговорення вашого кейсу.