Core Web Vitals: LCP, INP і CLS до зелених значень
Оптимізація Core Web Vitals — це три окремі задачі, а не одна: у LCP, INP і CLS різні причини й різні правки. Тому спершу дивимось поточні значення в полі та в лабораторії й називаємо конкретний елемент, який тягне вниз кожну метрику, і лише потім беремось за код. Деталь, яку пропускають найчастіше: LCP не буває швидшим за першу відповідь сервера. У виміряному нами магазині білизни головна віддавала перший байт за 1 544,6 мс — зелений LCP там був недосяжний ще до того, як браузер побачив першу картинку.
LCP — поява головного елемента, INP — відповідь на клік чи тап, CLS — стрибки верстки
після безкоштовного аудиту
Вартість
30
Гарантія
днів після підписання акта
LCP — поява головного елемента, INP — відповідь на клік чи тап, CLS — стрибки верстки
Три метрики
польові дані реальних відвідувачів за 28 днів; лабораторія — інструмент пошуку причини
За чим Google оцінює сайт
7–21
Строк робіт
робочий день плюс 28 днів, поки набереться поле після правок
безкоштовна перевірка значень і причин, 2–4 робочих дні
Перед кошторисом
на головній 118 зображень, з них 0 відкладених і 0 у WebP (наш вимір 01.08.2026)
Типова знахідка
конкретних значень метрик: вони залежать від телефонів і мереж ваших відвідувачів
Чого не обіцяємо
Як проходить робота
Прозорі етапи з погодженням на кожному кроці
Загальний строк:7–21 днів
1
Заміри й розбір причин
2–4 робочих дні
Поле з Search Console і лабораторні прогони на ключових типах сторінок. Називаємо елемент LCP на кожному з них, джерела зсувів і довгі задачі, які тримають відповідь на дію. На виході — перелік причин у порядку впливу.
2
Стеля сервера
1–2 робочих дні
Заголовки кешу й перша відповідь на тих сторінках, де LCP упирається саме в них. Робимо це першим: поки головна віддається без кешу, решта правок міряється на плаваючій основі.
3
Зсуви верстки
1–3 робочих дні
Розміри для зображень, банерів і рекламних місць, поведінка шрифтів під час підміни, місце під віджети, які вставляються після завантаження. Найдешевший етап із трьох метрик і найпомітніший для людини.
4
Перший екран і LCP
2–5 робочих днів
Пріоритет і попереднє завантаження головного зображення, зняте з нього відкладене завантаження, формат і реальний розмір під контейнер. Перевіряємо кожен тип сторінки окремо: елемент LCP на картці й на головній різний.
5
Відповідь на дію
1–5 робочих днів
Довгі задачі в головному потоці: наш код правимо, чужі скрипти переносимо або відкладаємо. По кожному віджету показуємо, скільки він коштує, і чекаємо вашого рішення — вимикати чи терпіти.
6
Повторні заміри й 28 днів супроводу
1 робочий день плюс 28 днів спостереження
Ті самі методи, ті самі сторінки. Далі сторінки йдуть на перевірку в Search Console, і місяць ми дивимось, як рухається поле — саме там зміна стає офіційною.
Технології та інтеграції
На чому будуємо і з чим це з’єднується
Стек
Search Console, звіт Core Web Vitals — єдине джерело, за яким Google оцінює сайт. Оновлюється на 28-денному вікні, тому реакції на правки чекаємо місяць
PageSpeed Insights — поле й лабораторія в одному екрані. Польової частини не буде взагалі, якщо у вас мало відвідувачів: даних для CrUX не набереться
Lighthouse і панель Performance у Chrome — знаходять причину, але це ваш комп'ютер і ваш канал. У відвідувача зі старим телефоном довгі задачі довші
Бібліотека web-vitals — знімає метрики у ваших живих відвідувачів. Дає власне поле швидше за Search Console, але потребує, куди складати цифри
fetchpriority і preload — керування чергою завантаження. Працює, поки таких елементів одиниці: пріоритет для всього дорівнює його відсутності
WebP і AVIF — легші формати. Виграш видно на фотокаталозі; на десятку іконок він у межах похибки заміру
Інтеграції
Google Search Console
GA4
Google Tag Manager
Cloudflare
PageSpeed Insights API
Що входить
Повний перелік робіт і того, що ви отримуєте на виході
Фіксуємо стартові LCP, INP і CLS окремо для мобільної та десктопної версії — без цифри «до» будь-яке «стало краще» недоказове
Називаємо елемент LCP на кожному ключовому типі сторінки й далі працюємо саме з ним, а не із «швидкістю взагалі»
Прибираємо відкладене завантаження з зображень першого екрана і ставимо його на решту сторінки
Даємо головному зображенню високий пріоритет і попереднє завантаження — воно перестає стояти в черзі за стилями
Переводимо зображення у WebP чи AVIF там, де це не псує вигляд: менше байтів до першого екрана при тій самій картинці
Задаємо розміри зображенням, банерам і рекламним блокам — верстка перестає стрибати під час завантаження
Налаштовуємо шрифти: попереднє завантаження й поведінка під час підміни, щоб текст не переїжджав
Розбираємось із заголовками кешу й першою відповіддю: сервер задає стелю, вище якої LCP не підніметься
Переносимо сторонні скрипти з дороги першого рендера й показуємо ціну кожного — рішення лишається за вами
Ставимо сторінки на перевірку в Search Console і супроводжуємо 28 днів, поки набирається поле
Коли ця послуга не підходить
Що не входить у роботу — щоб не було сюрпризів на здачі
Переписування теми чи фронтенду з нуля
Оптимізація чужих віджетів, які ви не готові вимкнути
Заміна хостингу й оплата інфраструктури
Робота з контентом і текстами
Обіцянка конкретних значень метрик
Кому підходить
Ситуації, у яких ця послуга дає результат
Ситуація 1 з 5
У Search Console червоно, а онлайн-тестер показує зелене
Це не суперечність, а два різні джерела. Тестер робить один прогін з доброго каналу, Google рахує 28 днів реальних візитів: старі телефони, мобільний інтернет, розширення в браузері. Орієнтуємось на друге, бо саме воно потрапляє у звіт.
Розберемо вашу ситуацію на безкоштовному аудиті
Ситуація 2 з 5
Головна відчувається повільною, хоча каталог відкривається нормально
Найчастіший розклад у наших вимірах. У магазині білизни картка віддавала перший байт за 391,4 мс, категорія — за 473,2 мс, головна — за 1 544,6 мс. Сторінка приходила з no-store, тобто збиралась наново для кожного відвідувача, і ця секунда лягала в LCP цілком.
Ситуація 3 з 5
Зображення начебто налаштовані, а метрика все одно червона
У виміряному магазині засобів самооборони 154 з 190 зображень (81%) вантажаться відкладено — зроблено правильно. Але сама розмітка важить 502,3 КБ, і півмегабайта браузер розбирає до першої картинки. Відкладене завантаження цієї частини не чіпає взагалі.
Ситуація 4 з 5
Верстка стрибає під пальцем
Банер без заданих розмірів, фірмовий шрифт, який підміняє системний, віджет, що вставляється над контентом. Людина цілиться в кнопку, а та переїжджає — і це CLS. Метрика, до речі, найдешевша: частина зсувів закривається атрибутами розмірів за день роботи.
Ситуація 5 з 5
Фільтр або форма думають після натискання
INP міряє паузу між дією і видимою реакцією. Тримають її довгі задачі в головному потоці: важкі обробники подій, чат, піксели, скрипт відгуків. Частина з них ваша, частина чужа — і виправлення впирається не в код, а у ваше рішення.
Правка причин проти модуля-прискорювача
Чим цей варіант відрізняється від «Модуль оптимізації в адмінці»
Модуль оптимізації в адмінціНаш підхід
З чого починається роботаз увімкнення галочок «відкласти скрипти», «стиснути», «lazy на все»з елемента LCP, джерела зсувів і списку довгих задач на ваших сторінках
Що видно після робітбал у тестері виріс, поле за 28 днів стоїть — у відвідувача нічого не змінилоськожна метрика рухається окремо після своєї правки, і видно, яка саме дала рух
Ризиквідкладені скрипти ламають кошик, чат або лічильник, і помічають це через тижденьзміна прив'язана до причини й перевіряється повторним заміром на тому ж наборі сторінок
Що лишається у васмодуль, який страшно вимкнути, бо ніхто вже не знає, що саме він тримаєдокумент із цифрами до і після й перелік причин, які ще відкриті
Спершу дивимось, які значення у вас зараз і чому
Core Web Vitals — три різні метрики з трьома різними причинами. Ставити роботи в кошторис до того, як видно, яка саме з них червона і через що, означає продавати навмання. Тому першу перевірку робимо безкоштовно.
Що міряємо
Поточні значення LCP, INP і CLSІ лабораторні, і польові — якщо є доступ до Search Console. Це різні дані: лабораторія показує один прогін, поле — реальних відвідувачів за 28 днів.
Що є елементом LCPКонкретний елемент, який Google вважає головним на екрані: банер, заголовок, картинка товару. Без цього оптимізувати нема що.
Джерело зсувів версткиЯкі блоки стрибають при завантаженні: банер без заданих розмірів, шрифт, що підміняється, віджет, який вставляється зверху.
Що блокує відповідь на діюДовгі задачі в головному потоці — зазвичай це сторонні скрипти й важкі обробники подій.
Зображення першого екранаФормат, розмір, чи не стоїть на головній картинці відкладене завантаження — типова помилка, яка псує LCP замість того, щоб його покращити.
Розподіл сторінок за статусомСкільки адрес у Search Console позначені як «потребують покращення» і «погано» — і чи це ті сторінки, куди приходять гроші.
Що ви отримуєте на руки
Три значення з поясненням, що саме кожне з них ламає на вашому сайті.
Перелік правок від найдешевших до найдорожчих із оцінкою, що кожна дає.
Чесна позначка навпроти пунктів, які без переробки шаблону не закриваються.
Розмова на 30 хвилин по документу.
Строк: 2–4 робочих дні
Чому це безкоштовно
Бо перевірка займає у нас кілька годин, а різниця між «поправити атрибути зображень» і «переписати шапку» — це різниця в кілька разів у кошторисі. Називати вилку до перевірки означало б завищити на всяк випадок.
Що далі
Після перевірки даємо перелік робіт із оцінкою по кожному пункту й строком. Частину пунктів ваш розробник закриє сам — ми не приховуємо, які саме.
Форма коротка: контакт і адреса сайту
Не знайшли свій випадок?
Опишіть, як це влаштовано у вас, — відповімо, чи підходить «Оптимізація Core Web Vitals» і що це означає у вашій ситуації. Без брифу й без дзвінка: одне питання, одна відповідь.
Працюємо офіційно
Договір, акт і рахунок — на кожен проєкт, а не тільки на великий. Без документів у вас немає ні прав на роботу, ні підстави провести витрати.
Договір, акт і гарантія 30 днів
На кожен проєкт письмовий договір: обсяг, строки, сума, порядок приймання. Після здачі — акт і рахунок, а далі 30 календарних днів гарантії: помилки з нашої вини усуваємо безоплатно. Усне з дзвінка дублюємо письмово того ж дня — домовленість, якої немає в тексті, не рахується.
ФОП і безготівковий розрахунок
Виконавець — зареєстрований ФОП. Оплата на рахунок із закривними документами, які бухгалтерія проведе як витрати. Курс для гривневої оплати фіксується договором, а не з’ясовується постфактум.
Права й доступи — ваші
Код, дизайн і матеріали переходять до вас після повної оплати. Домен, хостинг, репозиторій, аналітику й рекламні кабінети оформлюємо на вас — щоб сайт не залежав від підрядника. NDA підписуємо на запит, після завершення свої доступи видаляємо самі.
Портал клієнта замість переписки
На час роботи ви отримуєте доступ до порталу: договори, рахунки, акти й стан проєкту в одному місці. Документи формуються з даних угоди, тому реквізити й суми в них не розходяться, а про оплати й дедлайни нагадує система, а не пам’ять менеджера.
Замовники з Європи
Серед робіт — проєкти для Норвегії, Болгарії та Іспанії: болгарський магазин трьома мовами з кур’єрською доставкою, іспанський з оплатою карткою й переказом, норвезький сайт клініки. Це видно в портфоліо, а не тільки в описі.
Цифри, які можна перевірити
Кожен кейс у портфоліо — з посиланням на живий сайт і технічним виміром: швидкість відповіді, вага сторінки, обсяг каталогу, знайдені дефекти. Ці цифри можна зняти самому й звірити з нашими.
Спершу аудит, потім сума
Прайсу на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази, і цифра «від» нічого не пояснює. Спершу безкоштовний розбір — рахуємо ваші сторінки, дублі й швидкість, — потім називаємо суму й строк і фіксуємо їх у договорі.
Кажемо «ні», коли не впевнені
Якщо задача не наша, строк нереальний або послуга вам просто не потрібна — скажемо це першим листом, а не після передоплати. Гарантій позицій у пошуку не даємо: їх не дає ніхто, а обіцянка без механізму — це продаж, а не робота.
NDA підписуємо на запит. Після завершення співпраці наші доступи до ваших сервісів видаляємо самі й повідомляємо про це.
Що впливає на вартість
Чому дві однакові на вигляд задачі рахуються по-різному — і що саме ми міряємо на аудиті
Яка з трьох метрик червонаCLS часто закривається атрибутами розмірів і однією правкою шрифтів — це день-два. INP упирається в довгі задачі й чужі скрипти й тягнеться тижнями, бо частину рішень приймаєте не ви й не ми.
Скільки унікальних шаблонівУ головної, категорії, картки й сторінки з формою різні елементи LCP і різні причини зсувів. Кожен шаблон — окремий розбір, окремі правки й окремі заміри до і після.
Хто може правити темуЄ доступ до шаблону — правки йдуть одразу. Немає — ми пишемо перелік із точними місцями, а вносить їх ваш розробник, і строк починає залежати від його черги.
Скільки на сторінці чужих віджетівЧат, піксели, відгуки, колтрекінг. Технічно перенести їх — години. Узгодити з маркетологом і підрядником реклами, які з них лишаються, — окремий тиждень календаря.
Чи доведеться чіпати перший екранКарусель із трьох банерів або відео на весь екран роблять зелений LCP на мобільному майже недосяжним. Тоді це вже не оптимізація, а перегляд першого екрана, і рахується він окремо.
Кейси
Задачі та результат у цифрах — усі показники зняті нашим виміром
роздрібний інтернет-магазин нижньої білизни, каталог понад 110 тис. товарних позицій
Задача
Зрозуміти, чому головна відчувається повільною, хоча каталог відкривається нормально.
Рішення
Сім замірів на кожен тип сторінки з медіаною, окремий підрахунок зображень першого екрана, розбір заголовків кешу й параметрів viewport.
Результат
Перша відповідь головної 1 544,6 мс проти 391,4 мс на картці товару й 473,2 мс у категорії — головна віддається вчетверо повільніше за решту сайту. Повний HTML головної приходить за 1 733,5 мс при вазі 323,6 КБ (32,4 КБ у gzip), причому з no-store, тобто без кешу сторінки взагалі. На ній 118 тегів img, з них 0 з відкладеним завантаженням і 0 у форматі WebP. Окремо для метрики відповіді на дію: viewport заданий із user-scalable=0, масштабування пальцями заблоковане. Вимір 01.08.2026.
спеціалізований інтернет-магазин засобів самооборони
Задача
Перевірити, чи не заважає вага сторінки показувати товар на мобільному.
Рішення
Замір першої відповіді й повного завантаження, підрахунок зображень із відкладеним завантаженням, перевірка структурованих даних і версії PHP.
Результат
Перша відповідь 494,7 мс, повне завантаження HTML 567,5 мс при вазі розмітки 502,3 КБ. Зображення тут зроблені як треба: 154 з 190 (81%) вантажаться відкладено. Але півмегабайта розмітки відкладене завантаження не чіпає, а браузер розбирає її до першої картинки. Поруч інші знахідки: на головній немає жодного тега h1, нуль блоків структурованих даних, PHP 7.3.33 без підтримки з грудня 2021 року. Вимір 31.07.2026.
Що потрібно від вас
Без цього не почнемо — краще підготувати заздалегідь
1Адресу сайту й перелік типів сторінок, які для вас головні: головна, категорія, картка, форма.
2Доступ до Search Console — без нього ми бачимо лише лабораторні заміри, а Google дивиться на польові.
3Доступ до коду або до розробника, який зможе внести правки в шаблон.
4Рішення щодо сторонніх скриптів: частину метрик не витягнути, не чіпаючи чужі віджети.
5Одну людину з вашого боку, яка за день може сказати «цей чат вимикаємо, цей лишається».
Якщо чогось із цього немає — скажіть, підкажемо, як зібрати або зробимо самі окремою задачею.
Часті питання
Те, що питають найчастіше — з конкретними відповідями
що таке LCP, INP і CLS простими словами?
Три вимірювані відчуття. LCP — за скільки з'явився головний елемент екрана: банер, заголовок або фото товару. INP — наскільки швидко сторінка відповідає на дію: клік, тап, введення в поле. CLS — наскільки сильно верстка стрибає, поки все довантажується. Google міряє їх у реальних відвідувачів через Chrome і показує у Search Console. Кожна лікується своїм: LCP — сервером і зображеннями, CLS — розмірами блоків і шрифтами, INP — скриптами.
тестер показує зелене, а в Search Console червоно — кому вірити?
Search Console. Тестер робить один прогін на одному пристрої в одній мережі — це лабораторія, і вона потрібна, щоб знайти причину. Google рахує інше: 28 днів реальних візитів на ваш сайт, з телефонами різного віку, мобільним інтернетом і розширеннями в браузері. Саме ці цифри потрапляють у звіт і саме за ними оцінюється сторінка. Лабораторні дані ми використовуємо як інструмент, а звіряємось із полем.
з якої метрики ви починаєте?
Не з LCP, хоч про нього говорять найбільше. Спершу закриваємо зсуви верстки і стелю сервера — і те, і те дешеве, а без них решта замірів пливе. Поки головна віддається без кешу, LCP міряється не на сторінці, а на випадковому стані сервера; поки блоки стрибають, будь-який замір LCP залежить від того, коли саме довантажився банер. Далі йде перший екран, і останнім — відповідь на дію: вона найдовша, бо впирається в чужі скрипти.
у нас відкладене завантаження стоїть на всіх зображеннях — чому LCP гірший?
Найчастіша помилка з тих, що ми бачимо. Відкладене завантаження каже браузеру: цю картинку можна взяти пізніше. Якщо воно стоїть на головному зображенні першого екрана, браузер дізнається про нього не одразу з розмітки, а вже після розкладки сторінки — і саме той елемент, за яким міряється LCP, приходить останнім. Правило просте: на першому екрані відкладене завантаження знімається і додається високий пріоритет, на всьому нижче — ставиться.
коли зміни з'являться у звіті?
У лабораторних замірах — одразу після правки. У Search Console — поступово протягом місяця: звіт рахує 28-денне вікно, і поки в ньому лежать старі візити, статус тягнеться за ними. Це не наша повільність, це період збору даних, і планувати його треба заздалегідь. Тому в строк робіт ми окремо пишемо 28 днів супроводу після правок: сторінки ставляться на перевірку, і ми дивимось, як рухається поле.
чи можна витягнути всі три в зелене на будь-якому сайті?
Не на будь-якому. Якщо метрику тримає віджет, потрібний бізнесу, ми можемо його перенести, відкласти або вимкнути — але не переписати чужий код. Якщо перший екран — це карусель банерів або відео, зелений LCP на мобільному майже недосяжний без перегляду самого екрана. Такі пункти називаємо на безкоштовній перевірці, до кошторису, і чесно позначаємо, які з них закриваються тільки переробкою шаблону.
це підніме позиції?
Позицій ніхто не обіцяє, і ми не станемо. Core Web Vitals — підтверджений сигнал у наборі сигналів, і його вага непублічна. Працює це інакше: відвідувач, який пішов, не дочекавшись першого екрана, не побачив ні товару, ні ціни, ні кнопки — його неможливо конвертувати жодним оффером. Швидкість прибирає технічну втрату, а не створює попит: якщо ціна вища за ринок, швидка сторінка просто швидше покаже причину піти. І окремо: побачити вплив на поведінку можна лише там, де стоїть аналітика. У другому з наших кейсів лічильників Google немає взагалі — там результат буде видно тільки в замірах.
у нас каталог на десятки тисяч товарів — це не безнадійно?
Розмір каталогу і метрики пов'язані слабше, ніж здається. У магазині зі 115 456 товарними позиціями картка товару віддає перший байт за 391,4 мс, а повільною там була головна — 1 544,6 мс, і причина сиділа в кеші сторінки, а не в кількості рядків у базі. Тягне вниз шаблон, набір модулів і зображення. Що справді залежить від обсягу — так це кількість шаблонів, які треба розібрати, і час на повторні заміри.
Надішліть адресу сайту й доступ до Search Console.
У відповідь — три поточні значення, названий елемент LCP на кожному ключовому типі сторінки й перелік правок від найдешевших до найдорожчих. Якщо метрики тримає віджет, потрібний вашому бізнесу, скажемо це першим же листом.
Прайса на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази, і цифра «від» у такому разі нічого не пояснює. Спершу безкоштовний аудит — рахуємо ваші сторінки, дублі й швидкість, — потім називаємо суму й строк і фіксуємо їх у договорі.