Оптимізація Core Web Vitals: LCP, INP, CLS

Уявіть: ваш сайт завантажується за 5 секунд, але LCP — 4,5 с. Google уже позначив сторінку як повільну, і трафік падає на 20%. Ми стикалися з цим десятки разів: винний не хостинг, а неоптимізований hero-елемент, повільний TTFB або render-blocking CSS. Ця стаття присвячена Core Web Vitals оптимізації, включаючи LCP покращення, INP зниження та CLS стабілізацію. Наша команда має 7+ років досвіду в оптимізації Core Web Vitals та виконала понад 50 проєктів, що підтверджує нашу експертність. Ми проводимо PageSpeed Insights аудит, використовуємо CrUX дані та Lighthouse перевірку для комплексної оптимізації продуктивності. Покращення швидкості завантаження сайту є критичним. Web Vitals аудит виявляє проблеми. Кожна секунда затримки знижує конверсію на 7%, а оптимізація може збільшити її на 10-15%. Для інтернет-магазину з середнім чеком 1000 грн це дасть додатковий прибуток до 50 000 грн на місяць. Середня економія для наших клієнтів становить 30 000 грн на місяць. Прискорення сайту та відповідність Google Page Experience — обов'язковий мінімум для конкурентоспроможності.

Основні метрики Core Web Vitals

INP прийшов на зміну FID в останній версії Core Web Vitals. FID вимірював лише першу взаємодію; INP — усі взаємодії за сесію. Детальніше — у документації MDN.

Стратегія оптимізації Core Web Vitals

Ознаки, коли потрібна оптимізація

Якщо хоча б одна метрика потрапляє в червону зону — втрачаєте до 20% трафіку. Зелені показники дають перевагу в ранжуванні. Особливо важливо для інтернет-магазинів: кожна секунда затримки знижує конверсію на 7%.

Чому LCP — головна метрика?

LCP — момент, коли найбільший елемент (зазвичай hero-зображення або H1) з'являється на екрані. Поганий LCP — головна причина втрати відвідувачів: дослідження Google показує, що 53% мобільних користувачів йдуть, якщо завантаження довше 3 секунд.

Основні причини поганого LCP: відсутність preload hero-зображення, повільний TTFB, render-blocking CSS та JS, а також неоптимізовані зображення. Preload зображення знижує LCP у 2 рази краще, ніж просто оптимізація зображень, і в 3 рази швидше, ніж відкладення завантаження скриптів.

Preload LCP-зображення — один із найефективніших прийомів:

<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w" imagesizes="100vw"> <img src="/images/hero.webp" fetchpriority="high" loading="eager" width="1200" height="630" alt="Core Web Vitals: оптимізація LCP"> 

Як INP впливає на користувацький досвід?

INP вимірює затримку між дією користувача (клік, натискання клавіші) та наступним відтворенням. Поганий INP — ознака перевантаженого main thread. Для покращення використовують розбиття довгих завдань за допомогою setTimeout або requestAnimationFrame, а також startTransition для React.

async function processLargeList(items) { for (let i = 0; i < items.length; i++) { processItem(items[i]); if (i % 50 === 0) { await new Promise(r => setTimeout(r, 0)); } } } import { startTransition } from 'react'; function handleSearch(query) { setInputValue(query); startTransition(() => { setSearchResults(filterResults(query)); }); } 

CLS: стабільність макету без сюрпризів

CLS — сума зміщень елементів при завантаженні. Кожне зміщення дратує користувача і знижує конверсію.

CLS страждає через зображення без розмірів та динамічні вставки. Рішення:

<img src="photo.webp" width="800" height="600" alt="стабільність макету"> <style> .hero-image { aspect-ratio: 16 / 9; width: 100%; } </style> 

@font-face { font-family: 'Inter'; font-display: optional; src: url('/fonts/inter.woff2') format('woff2'); } 

Інструменти вимірювання та моніторингу

import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals'; function sendToAnalytics({ name, value, rating, id }) { gtag('event', name, { event_category: 'Web Vitals', event_label: id, value: Math.round(name === 'CLS' ? value * 1000 : value), non_interaction: true, custom_map: { metric_rating: rating } }); } onCLS(sendToAnalytics); onINP(sendToAnalytics); onLCP(sendToAnalytics); onFCP(sendToAnalytics); onTTFB(sendToAnalytics); 

Як ми оптимізуємо Core Web Vitals: покроковий план

1. Аудит усіх сторінок через PageSpeed Insights, CrUX та Lighthouse.
2. Виявлення швидких перемог (preload, розміри, шрифти) та глибоких проблем (JS-оптимізація, серверні затримки).
3. Впровадження змін із пріоритетом за впливом на LCP, INP, CLS.
4. Моніторинг у реальному часі після деплою.
5. Документування результатів та рекомендацій.

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

• Повний аудит Core Web Vitals зі звітом по кожній сторінці.
• Усунення блокуючих ресурсів, оптимізація зображень і шрифтів.
• Налаштування серверного кешування та CDN при необхідності.
• Оптимізація JavaScript (розбиття довгих завдань, ліниве завантаження).
• Надання готового коду з коментарями для вашої команди.
• Моніторинг метрик протягом 3 місяців та коригування.

Процес роботи

• Аудит: аналіз усіх сторінок, виявлення вузьких місць.
• Реалізація: внесення змін у код, налаштування серверного кешування.
• Моніторинг: відстеження через CrUX та web-vitals після деплою.
• Гарантія: документація та підтримка зелених показників протягом 3 місяців.

Терміни та вартість

Типова оптимізація Core Web Vitals займає від 2 до 4 тижнів. Вартість розраховується індивідуально після аудиту, зазвичай у діапазоні від 20 000 до 50 000 грн залежно від складності.

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