Пошук уроків, статей та іншого контенту
Ознайомитеся з Core Web Vitals і зрозумієте, як вони описують швидкість та стабільність інтерфейсу.
Core Web Vitals — це набір метрик, які описують важливі аспекти користувацького досвіду на вебсторінці:
наскільки швидко з’являється основний вміст;
наскільки швидко сторінка реагує на дії користувача;
наскільки стабільним є її макет під час завантаження.
Зараз до Core Web Vitals належать:
LCP — швидкість відображення найбільшого елемента;
INP — швидкість реакції інтерфейсу на взаємодії;
CLS — стабільність розташування елементів.
Ці метрики оцінюють не код сам по собі, а результат, який бачить і відчуває користувач у браузері.
LCP показує, скільки часу потрібно браузеру, щоб відобразити найбільший видимий елемент основного вмісту сторінки.
Таким елементом може бути:
велике зображення;
заголовок;
блок із текстом;
обкладинка або банер.
Орієнтовні оцінки LCP:
до 2,5 секунди — добре;
від 2,5 до 4 секунд — потребує покращення;
понад 4 секунди — погано.
Наприклад, якщо користувач відкриває сторінку статті, а її великий заголовок або обкладинка з’являється через 5 секунд, значення LCP буде незадовільним.
повільна відповідь сервера;
великий неоптимізований файл зображення;
блокування відображення стилями або шрифтами;
велика кількість JavaScript до появи основного вмісту;
повільне завантаження даних, необхідних для першого екрана.
У Next.js на LCP можуть впливати як серверний рендеринг і отримання даних, так і спосіб завантаження зображень та шрифтів.
INP вимірює, наскільки швидко сторінка реагує на дії користувача протягом усього візиту.
Такими діями можуть бути:
натискання кнопки;
введення тексту;
вибір пункту меню;
відкриття або закриття діалогового вікна.
Метрика враховує час від взаємодії до моменту, коли браузер відобразить наступну зміну інтерфейсу.
Орієнтовні оцінки INP:
до 200 мілісекунд — добре;
від 200 до 500 мілісекунд — потребує покращення;
понад 500 мілісекунд — погано.
Високий INP означає, що користувач натиснув кнопку, але інтерфейс довго не показує результат. Причиною часто є довгі завдання JavaScript, які блокують головний потік браузера.
INP замінив метрику FID як Core Web Vital. FID оцінював переважно першу взаємодію, а INP враховує взаємодії протягом усього візиту.
CLS показує, наскільки несподівано змінюється розташування елементів на сторінці під час її завантаження або роботи.
Наприклад:
користувач збирається натиснути кнопку;
завантажується зображення над кнопкою;
кнопка зміщується вниз;
користувач натискає вже не на кнопку, а на інший елемент.
Орієнтовні оцінки CLS:
до 0,1 — добре;
від 0,1 до 0,25 — потребує покращення;
понад 0,25 — погано.
зображення без заданих розмірів;
рекламні або інформаційні блоки, які додаються після завантаження;
текст, який змінює розмір після завантаження шрифту;
динамічне вставлення елементів над уже видимим вмістом;
анімація властивостей, що змінюють розмір або позицію елементів.
Для зображень важливо заздалегідь зарезервувати місце. У Next.js компонент Image допомагає браузеру знати розміри зображення ще до його завантаження.
| Метрика | Добре | Потребує покращення | Погано | |---|---:|---:|---:| | LCP | до 2,5 с | 2,5–4 с | понад 4 с | | INP | до 200 мс | 200–500 мс | понад 500 мс | | CLS | до 0,1 | 0,1–0,25 | понад 0,25 |
Для оцінювання сторінки зазвичай використовують 75-й перцентиль значень. Це означає, що метрика має бути в межах рекомендованого порога щонайменше для 75% переглядів.
Важливо також розділяти дані для:
мобільних пристроїв;
настільних пристроїв.
Мобільні пристрої та повільні мережі часто дають гірші результати, ніж локальний комп’ютер розробника.
Для отримання метрик у браузері можна використати пакет web-vitals.
Встановлення:
npm install web-vitalsСтворіть клієнтський компонент, наприклад WebVitalsLogger.jsx:
'use client';
import { useEffect } from 'react';
import { onCLS, onINP, onLCP } from 'web-vitals';
export default function WebVitalsLogger() {
useEffect(() => {
const reportMetric = ({ name, value, rating }) => {
console.log(`${name}: ${value} (${rating})`);
};
onCLS(reportMetric);
onINP(reportMetric);
onLCP(reportMetric);
}, []);
return null;
}Підключіть компонент у кореневому макеті App Router:
import WebVitalsLogger from './WebVitalsLogger';
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>
<WebVitalsLogger />
{children}
</body>
</html>
);
}Після запуску застосунку значення метрик з’являтимуться в консолі браузера. Наприклад:
LCP: 1840 (good)
INP: 120 (good)
CLS: 0.04 (good)Цей приклад підходить для локальної перевірки. У реальному застосунку метрики зазвичай надсилають на сервер або в систему аналітики, щоб аналізувати результати багатьох користувачів.
Існують два основні способи вимірювання продуктивності.
Виконуються в контрольованих умовах за допомогою інструментів розробника або автоматичних перевірок.
Переваги:
швидко дають результат;
зручні під час розробки;
допомагають порівнювати зміни в коді.
Недолік: такі умови можуть відрізнятися від реального пристрою та мережі користувача.
Збираються у реальних користувачів під час відвідування сайту.
Переваги:
враховують різні пристрої;
показують реальну якість мережі;
відображають поведінку сторінки протягом усього візиту.
Для Core Web Vitals особливо важливі саме польові дані, оскільки вони показують досвід реальних користувачів.
Під час аналізу не варто дивитися лише на одне найкраще завантаження сторінки.
Перевіряйте:
кожну з трьох метрик;
мобільні та настільні пристрої окремо;
75-й перцентиль;
сторінки з різним типом вмісту;
зміни метрик після внесення оптимізацій.
Наприклад, зменшення розміру зображення може покращити LCP, але додавання нового віджета може погіршити CLS або INP. Тому продуктивність потрібно оцінювати комплексно.
На потужному комп’ютері сторінка може здаватися швидкою, але на мобільному пристрої з повільною мережею її результати будуть гіршими.
LCP не означає момент, коли завантажилися всі ресурси. Він описує появу найбільшого видимого елемента основного вмісту.
Навіть швидка сторінка може бути незручною, якщо кнопки, зображення або текст постійно зміщуються.
INP оцінює взаємодії протягом усього візиту, а не лише перше натискання після відкриття сторінки.
Середнє значення може приховати проблеми частини користувачів. Для Core Web Vitals важливо враховувати розподіл результатів і 75-й перцентиль.
LCP показує, наскільки швидко відображається найбільший елемент основного вмісту.
INP показує, наскільки швидко інтерфейс реагує на дії користувача.
CLS показує, наскільки стабільним залишається макет сторінки.
Рекомендовані межі: LCP — до 2,5 с, INP — до 200 мс, CLS — до 0,1.
Для реальної оцінки важливі польові дані та 75-й перцентиль.
У Next.js метрики можна збирати в клієнтському компоненті за допомогою пакета web-vitals.