Зображення як головний важіль LCP
На більшості тем саме зображення hero або великий слайдер стають найбільшим елементом контенту в зоні перегляду і визначають LCP.
Lazy-load для зображень нижче першого екрана корисний, але hero не можна відкладати без альтернативного плану попереднього завантаження.
Атрибут fetchpriority для LCP-зображення має сенс лише на одному елементі: якщо позначити «найважливими» кілька блоків, браузер втрачає чіткий пріоритет завантаження.
Розгляньте обмежений critical CSS для above-the-fold, якщо тема тягне велику таблицю стилів, що блокує перший рендер.
- Конвертуйте hero у WebP/AVIF з адекватною якістю.
- Задайте width і height, щоб уникнути CLS.
- Перевірте responsive srcset для мобільних.
- Не підвантажуйте відео-фон без потреби.
- Переконайтеся, що CDN не кешує помилково HTML.
- Перевірте impact плагінів оптимізації зображень.
- Погодьте з дизайнером допустимий рівень стиснення.
- Виміряйте LCP у полі після змін.
- Перевірте сторонні банери в header.
- Документуйте розміри для редакторів контенту.
- Перевірте, що srcset не підвантажує desktop-hero на мобільний без потреби — інколи LCP гірший саме через зайву вагу картинки.
- Розгляньте локальний хостинг критичних шрифтів замість зовнішніх запитів, якщо вони блокують текстовий LCP.
- Переконайтеся, що adaptive images-плагін не ламає розміри в редакторі блоків.
- Після зміни теми повторно зніміть baseline LCP у GSC URL Inspection + CrUX.
Теорія метрик — Core Web Vitals.
Скрипти та конструктори
Кожен плагін з фронтенд-скриптом додає роботу головному потоку браузера, а конструктори сторінок часто генерують важкі інтеракції за замовчуванням.
INP страждає від довгих обробників подій, великих бандлів і синхронних сторонніх тегів у першому екрані.
Особливо болючі тяжкі обробники scroll і resize на конструкторах — інколи допомагає throttle або відключення parallax на мобільних без втрати сенсу сторінки.
Важкі бібліотеки можна відкладати до взаємодії, якщо сценарій це дозволяє, але перевірте, що аналітика все ще коректно фіксує перші дії користувача.
- Вимкніть непотрібні плагіни на фронті.
- Перенесіть трекери в GTM із тригерами після згоди.
- Розбийте довгі JS-задачі на менші частини.
- Перевірте impact слайдерів і анімацій.
- Обмежте автоплей відео.
- Переконайтеся, що admin bar не тягне скрипти для гостей.
- Перевірте сторонні чати та віджети.
- Погодьте з маркетингом мінімальний набір трекінгу.
- Використовуйте профайлер у staging.
- Плануйте рефакторинг найважчих шаблонів.
- Виміряйте INP на реальних формах лідів, а не лише на головній.
- Перевірте, чи не блокує cookie-banner основний потік до згоди.
- Відключіть непотрібні анімації scroll на мобільних, якщо вони дають довгі frame.
- Порівняйте INP до/після вимкнення конструкторських «фіч» у режимі preview.
Безпека та оновлення — чекліст.
Кеш і TTFB
TTFB впливає на LCP, бо користувач довше чекає перший байт документа перед тим, як браузер почне малювати сторінку.
Page cache, object cache і якісний хостинг — типові важелі для WordPress без переписування теми.
Object cache не замінює page cache, але знижує навантаження на БД у динамічних фрагментах і підсилює стабільність TTFB під піковим трафіком.
Переконайтеся, що purge кешу збігається з деплоєм: швидка сторінка в лабораторії й повільна в полі часто розходяться через агресивне кешування HTML або CDN.
- Увімкніть page cache для анонімних відвідувачів.
- Перевірте opcode cache PHP.
- Оптимізуйте автозавантаження options.
- Переконайтеся, що cron не блокує відповідь.
- Перевірте slow queries у БД.
- Погодьте з хостингом ліміти PHP workers.
- Перевірте HTTP/2 або HTTP/3.
- Мінімізуйте редіректи на рівні DNS/CDN.
- Перевірте impact плагінів security на TTFB.
- Виміряйте поле після змін.
- Перевірте, що fragment cache для меню не віддає застарілі посилання після purge.
- Для WooCommerce окремо виміряйте TTFB на сторінках кошика й оформлення.
- Переконайтеся, що health check cron не створює піків навантаження під час пікового трафіку.
- Погодьте TTL кешу HTML з частотою оновлення цін або промо.
Розробка — послуги web-development.
Висновок
WordPress дозволяє покращити Web Vitals інкрементально: спочатку зображення та TTFB, потім скрипти й інтеракції. Вимірюйте поле, а не лише лабораторію, і не ламайте маркетинговий трекінг без плану. Документуйте зміни для редакторів і тестуйте на staging. SEO-Studio допоможе звести технічний борг теми й плагінів у дорожню карту з пріоритетами для бізнесу.
Якщо скласти пріоритети в один рядок: спочатку стабільний LCP-елемент і передбачуваний TTFB, потім скорочення довгих задач у JS для INP, далі боротьба з CLS від реклами та шрифтів. Такий порядок зазвичай дає найбільший ефект для відвідувачів без повної перебудови теми.