Як оптимізувати сторінку під PageSpeed: LCP, INP, CLS і чек-лист

PageSpeed Insights показує оцінку від 0 до 100 і довгий список порад. Через це здається, що завдання – будь-що дотягнути цифру до зеленої зони. Насправді оцінка – лише зведення. Важливіше зрозуміти, які метрики просідають і що саме на сторінці тягне їх униз.

Нижче – як читати звіт, що означають LCP, INP, CLS, FCP і TBT, які причини трапляються найчастіше і як їх виправляти. Наприкінці – розбір нашого сайту ntsame.agency з реальними цифрами та чек-лист.

Що показує PageSpeed Insights

У звіті два різні блоки даних, і їх важливо не плутати.

• Дані реальних користувачів (польові дані). Це Core Web Vitals зі звіту Chrome UX Report: як сайт відкривався у справжніх відвідувачів за останні 28 днів. Оцінюється 75-й процентиль: метрика «хороша», якщо так швидко сторінка відкрилася щонайменше в трьох відвідувачів із чотирьох. Саме ці дані Google використовує як сигнал ранжування. У сайтів із невеликим трафіком блоку може не бути.
• Лабораторні дані (Lighthouse). Один тестовий прогін на серверах Google: для мобільної версії – з емуляцією телефона середнього класу та сповільненого мобільного інтернету. Звідси й береться оцінка 0–100. Лабораторний тест зручний, щоб шукати причини й перевіряти виправлення, але від запуску до запуску результат коливається на кілька балів.

Починайте з вкладки «Мобільний»: умови тесту там жорсткіші, і більшість покупців приходить із телефона. Кольори оцінки: 90–100 – зелений, 50–89 – помаранчевий, 0–49 – червоний.

Метрики: LCP, INP, CLS, FCP і TBT

Core Web Vitals – це три метрики: LCP, INP і CLS. FCP і TBT – допоміжні, але за ними зручно шукати причини. Пороги нижче – рекомендації Google.

У лабораторній оцінці найбільше важать TBT, LCP і CLS. INP у лабораторному тесті виміряти неможливо – там немає живого користувача, тому його замінює TBT: якщо основний потік довго зайнятий скриптами, сторінка й у реальності повільно відповідатиме на натискання.

Зображення

Картинки – найчастіша причина поганого LCP: головний банер важить мегабайт, вантажиться в розмірі для величезного монітора або чекає своєї черги за десятком інших файлів.

• Сучасні формати. WebP зазвичай помітно легший за JPG і PNG за тієї ж якості, AVIF – ще легший. Браузер може отримувати новий формат автоматично, а старі файли лишаються запасним варіантом.
• Розмір під екран. Атрибути srcset і sizes дають змогу віддавати телефону картинку під його ширину, а не під широкий монітор.
• Ліниве завантаження – лише нижче першого екрана. loading="lazy" на картинках унизу сторінки економить трафік. Але головну картинку першого екрана відкладати не можна: це прямо погіршує LCP.
• Пріоритет для головної картинки. fetchpriority="high" каже браузеру завантажити її раніше за інше.
• Розміри в розмітці. width і height у кожної картинки резервують місце заздалегідь, і верстка не стрибає – це про CLS.

Шрифти

Шрифт може затримувати текст: браузер чекає файл і не показує заголовок, доки його не отримає.

• Використовуйте формат WOFF2 і підключайте лише потрібні накреслення та набори символів (наприклад, латиницю й кирилицю окремими файлами).
• Додайте font-display: swap, щоб текст одразу показувався системним шрифтом, а потім підмінявся.
• Основний шрифт першого екрана можна завантажити заздалегідь через <link rel="preload">. Пʼять накреслень одного шрифту – вже привід замислитися, чи всі вони потрібні.

Сторонні скрипти: GTM, пікселі, чати

Google Tag Manager, Meta Pixel, Microsoft Clarity, онлайн-чати, віджети відгуків і зворотного дзвінка – кожен скрипт окремо невеликий, але разом вони займають основний потік саме тоді, коли сторінка має відмалюватися. У звіті це видно за високим TBT і пунктом «Зменште вплив стороннього коду».

• Відкладений запуск. Скрипти аналітики й маркетингу запускаються не під час завантаження, а після першої дії відвідувача: прокручування, кліку, дотику чи натискання клавіші. Відвідувач, який читає сторінку, їх не помічає.
• Чат – на вимогу. Замість повного віджета на старті показуйте легку кнопку, а сам чат завантажуйте за кліком.
• Ревізія. Пікселі давно закритих рекламних кампаній і забуті тестові лічильники трапляються майже на кожному сайті. Зайве – видалити.

Відкладений запуск має ціну: візити, що закінчилися без жодної дії, лічильники не побачать. Для більшості сайтів це прийнятно, але рішення варто ухвалити свідомо, разом із маркетингом.

CSS і JavaScript

• Скрипти, які не потрібні для першого екрана, підключайте з defer, щоб вони не блокували відмальовування.
• Не вантажте все всюди: слайдер, карта й калькулятор доставки потрібні на одній-двох сторінках, а не на кожній. Це особливо стосується плагінів WordPress і модулів OpenCart.
• Стилі, потрібні для першого екрана, можна вбудувати просто в сторінку, а решту завантажити пізніше.
• Вкладка «Coverage» у Chrome DevTools показує, яка частина CSS і JS на сторінці взагалі не використовується.

Кеш сторінок і час відповіді сервера

TTFB – час, за який сервер починає віддавати сторінку. Поки його немає, браузер нічого не робить, тому повільна відповідь сервера зсуває всі інші метрики. Орієнтир Google – до 0,8 с.

• Кеш сторінок. На WordPress і OpenCart кожна сторінка за замовчуванням збирається наново: запити до бази, плагіни, шаблони. Кеш зберігає готовий HTML і віддає його без цієї роботи.
• Стиснення й кеш статики. Gzip або Brotli для тексту, довгий строк кешування для картинок, стилів і скриптів із версією в назві файлу.
• Сервер і CDN. Якщо після кешу відповідь усе одно повільна, проблема в хостингу або відстані до відвідувачів. Але переїжджати варто після того, як прибрано причини в коді.

Зсуви верстки: CLS

CLS зростає, коли щось зʼявляється на сторінці пізніше за решту й зсуває текст. Покупець цілиться в кнопку, а влучає в банер.

• Картинки й відео без width і height (або aspect-ratio у CSS).
• Банери, cookie-повідомлення й плашки акцій, які вставляються над контентом. Резервуйте під них місце або показуйте поверх сторінки.
• Вбудовані блоки: карти, відео, віджети відгуків – задайте контейнеру фіксовану висоту.
• Шрифти, які після завантаження помітно змінюють ширину тексту.

Розбір: як ми оптимізували ntsame.agency

Наш сайт працює на WordPress із власною темою. Перевірка сторінки /locations/dubai/ у PageSpeed Insights:

Метрики на компʼютері: FCP 0,3 с, LCP 0,5 с, TBT 0 мс, CLS 0,001. Що для цього зробили:

1. WebP-копії зображень. Для картинок теми й медіатеки створюються WebP-версії, і браузер отримує легкий файл автоматично.
2. Lazy loading і fetchpriority. Усе нижче першого екрана вантажиться під час прокручування, головна картинка – з високим пріоритетом.
3. Відкладений запуск GTM, Meta Pixel і Clarity. Лічильники стартують після першої дії відвідувача, тож у першому завантаженні не беруть участі – звідси TBT 0 мс.
4. Власний дисковий кеш сторінок. Готовий HTML віддається без запуску WordPress. Час відповіді сервера скоротився з 0,6 до 0,15 с.
5. Переходи без перезавантаження. Бібліотека Swup підміняє лише вміст сторінки, а шапка, стилі й скрипти під час переходу не завантажуються наново.

Докладніше про ці роботи – на сторінці прискорення сайту, там само кейс ntsame.agency з оцінками для телефона й компʼютера.

Швидкість, SEO і продажі

Core Web Vitals – один із сигналів ранжування Google, але не головний: зміст сторінки важливіший. Сильніше швидкість впливає на поведінку. Повільну сторінку частіше закривають, не дочекавшись першого екрана, тому швидкість – один із пунктів нашого чек-листа CRO для інтернет-магазину.

Якщо попереду редизайн чи переїзд, закладіть швидкість у техзавдання одразу й не втратьте позиції під час перенесення – про це наш чек-лист перенесення сайту. А те, що можна оптимізувати, багато в чому залежить від платформи: порівняння у статті OpenCart, WooCommerce, Shopify чи Laravel.

Чек-лист оптимізації сторінки

1. Перевірити сторінку в PageSpeed Insights на вкладці «Мобільний», порівняти польові й лабораторні дані.
2. Знайти LCP-елемент у звіті й переконатися, що він не завантажується ліниво та має fetchpriority="high".
3. Перевести зображення у WebP або AVIF і віддавати їх у розмірі під екран.
4. Додати loading="lazy" картинкам нижче першого екрана.
5. Прописати width і height усім картинкам, відео та вбудованим блокам.
6. Залишити лише потрібні накреслення шрифтів у WOFF2 з font-display: swap.
7. Відкласти запуск GTM, пікселів, чатів і віджетів до першої дії відвідувача.
8. Видалити невикористовувані лічильники, плагіни й бібліотеки.
9. Підключити скрипти з defer і не вантажити їх на сторінках, де вони не потрібні.
10. Увімкнути кеш сторінок, стиснення й кешування статики. Перевірити TTFB.
11. Зарезервувати місце під банери й повідомлення, щоб не було зсувів верстки.
12. Повторити замір кілька разів і через 28 днів перевірити польові дані.

Читайте на тему: 12 місць, де інтернет-магазин втрачає покупців; редизайн без втрати позицій; як швидкість завантаження сайту впливає на продажі.

Прискоримо ваш сайт

Заміряємо ключові сторінки, покажемо, що саме гальмує, і виправимо це в коді – без редизайну. Подробиці на сторінці прискорення сайту. Напишіть нам через форму на сайті, у Telegram, WhatsApp або на e-mail.