Core Web Vitals. Як покращити показники вебпродуктивності
У минулій статті ми розглянули основні 3 показники нового критерію ранжування Google. Нововведення почнуть діяти вже у червні 2021 року. У цій статті я розповім, що ми робимо для покращення веб-продуктивності під час розробки.
LARGEST CONTENTFUL PAINT (LCP)
Цей показник вимірює, як швидко користувач отримує найважчий елемент контенту, відмальований на сторінці.
Поради щодо покращення LCP
1. Оптимізація серверних операцій
- перевірте, наскільки “швидким” є ваш хостинг-провайдер;
- оптимізуйте запити до бази даних;
- використовуйте CDN для сайту.
2. Налаштуйте кешування статичних ресурсів.
Це зменшить кількість дорогих серверних обчислень. Перегляньте кешування елементів, які рідко змінюються: зображення, PDF документи, можливо CSS і JS файли.
3. Підключення до сторонніх ресурсів завчасно.
Запити сервера на сторонні ресурси також можуть вплинути на LCP, особливо якщо вони потрібні для відображення важливого вмісту на сторінці.
Використовуйте:
<link rel="preconnect" href="https://example.com" />
Можна також додати dns-prefetch для більш швидкого пошуку DNS:
<link rel="dns-prefetch" href="https://example.com" />
Або поєднати обидва методи:
<head>
…
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
</head>
Приділіть цьому пункту особливу увагу, оскільки він важливий як для LCP, так і для FID.
4. Оптимізація блокуючих потоків CSS та JavaScript
Скрипти та стилі є ресурсами, що блокують рендеринг і, отже, погіршують показник LCP. Відкладіть будь-який некритичний JavaScript та CSS, щоб прискорити завантаження основного вмісту вашої веб-сторінки.
- Мінімізуйте розмір CSS та JS.
Для зручності читання файли можуть містити інтервали, відступи, коментарі. Всі ці символи не потрібні браузеру. Використовуйте збирачі модулів або інструменти збирання, такі як Webpack, Gulp чи Rollup. Використовуйте попереднє завантаження важливих стилів:<link rel="preload" as="style" href="styles.css"> - Використовуйте медіазапити, щоб скоротити час відображення сторінки:
<link href="styles.css" rel="stylesheet" media="(min-width: 1920px)"> - Заінлайнуйте критичний CSS.
Помістіть у тег<style>CSS, необхідний для відображення верхньої частини сторінки. (зображення:inlaining-kriticheskogo-css-3.png) - Видаляйте невикористаний CSS та JS або виносьте їх у окремі файли, якщо на різних сторінках використовується різний код.
Для налагодження використовуйте вкладку Coverage у Chrome DevTools.
Цей пункт важливий як для LCP, так і для FID.
5. Завчасне завантаження ключового зображення
Найчастіше найважливішим і найбільшим елементом для вимірювання LCP є hero-зображення у верхній частині сторінки. Для покращення метрики налаштуйте передзавантаження:
<link rel="preload" as="image" href="image.jpg">
Важливо! Використовуйте предзавантаження обережно. Пропускна здатність з’єднання на початковому етапі завантаження сторінки невелика. Передзавантаження кількох картинок може вплинути на завантаження інших важливих ресурсів (CSS, JS, шрифти).
Детальніше про вартість предзавантаження можна прочитати тут.
Приклад: якщо на сторінці є “карусель” банерів, передзавантажуйте лише перше зображення, а решту завантажуйте “ліниво”.
6. Використання чуйних зображень із атрибутом srcset та їх попереднє завантаження
Ознайомтеся з можливістю попереднього завантаження адаптивних зображень. Завдяки атрибутам imagesrcset та imagesizes, доданим до <link>, ви можете завантажувати адаптивні зображення:
<link rel="preload" as="image" href="your-image.jpg"
imagesrcset="your-image_575px.jpg 575w,
your-image_991px.jpg 991w,
your-image_1920px.jpg 1920w"
imagesizes="50vw">
У розмітці код має виглядати приблизно так:
<img src="your-image.jpg"
srcset="your-image_575px.jpg 575w,
your-image_991px.jpg 991w,
your-image_1920px.jpg 1920w"
sizes="50vw" loading="lazy" decoding="async" alt="">
7. Використання ефективних сучасних форматів зображень
Розмір зображень у новому форматі WebP зазвичай на 25–35% менший за аналоги у форматах JPEG та PNG. Це суттєво зменшує вплив зображень на LCP і позитивно позначається на швидкості завантаження. Підтримка WebP уже досить висока.
8. Уникайте використання зображень високої роздільної здатності
Часто бажання надати користувачеві максимально якісне зображення шкодить швидкодії.
Як згадувалося у попередній статті, LCP сильно залежить від стану мережі та потужності пристрою.
Дослідження показують, що ваші користувачі найчастіше мають менш потужні пристрої, ніж ви очікуєте.
Тому варто уникати надто великих зображень, а також обов’язково їх стискати (детальніше про це буде далі).
9. Використовуйте «ліниве завантаження» для зображень поза зоною видимості
За допомогою атрибуту loading у <img> можна контролювати поведінку завантаження зображення:
loading="lazy"— відкладене завантаження зображень до моменту, поки вони не потраплять у видиму область.loading="eager"— завантажує зображення відразу, незалежно від їхньої видимості (це значення використовується за замовчуванням).
Підтримка атрибуту ще перебуває у перехідному стані.
Через це для відкладеного завантаження зображень часто застосовують JavaScript. Сучасні браузери дозволяють ефективно перевіряти видимість елементів за допомогою Intersection Observer API.
10. Стиснення зображень
Для оптимізації форматів JPG і PNG можна використовувати сервіси:
Для SVG — інструмент SVGOMG від Google-розробника.
11. Передзавантаження шрифтів
Іноді найбільшим елементом сторінки може бути текст, і його рендеринг блокується, доки шрифт не завантажиться.
Щоб прискорити відображення, можна налаштувати попереднє завантаження:
<link rel="preload" href="Circe-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Додатково використовуйте властивість CSS font-display, щоб браузер відображав текст системним шрифтом під час завантаження основного:
@font-face {
font-family: 'Circe-Bold';
src: local('Circe-Bold'), url('Circe-Bold.woff2');
font-display: swap;
}
Завдяки font-display: swap текст з’являється відразу після завантаження CSS.
12. Використовуйте сучасні формати шрифтів
Рекомендовано застосовувати формати woff і woff2.
Формат woff2 завдяки алгоритмам стиснення зменшує розмір файлів на ~30% у порівнянні з іншими форматами. Рівень його підтримки у браузерах сьогодні дуже високий.
FIRST INPUT DELAY (FID)
Цей показник вимірює час, через який користувач може взаємодіяти зі сторінкою.
Поради щодо покращення цього показника:
1. Зменште вплив сторонніх ресурсів
(зображення: vkladka-umenshite-vliyanie-storonnego-koda-9.png)
Переконайтеся, що завантаження сторонніх ресурсів дійсно приносить користь вашому сайту.
Приклад — бібліотека jQuery.
Колись вона була важливою, оскільки не існувало єдиних стандартів для роботи з DOM, анімаціями чи AJAX. Сьогодні більшість її можливостей реалізуються нативно через CSS і JS. Тому варто подумати над відмовою від jQuery.
Для типових задач (наприклад, каруселі зображень) замість рішень на базі jQuery (OwlCarousel, Slick) краще використовувати сучасні нативні бібліотеки:
Для AJAX-запитів варто віддавати перевагу:
2. Оптимізуйте завантаження скриптів
Якщо сторонні ресурси все ж потрібні, налаштуйте їх завантаження за допомогою атрибутів async і defer:
<script async src="script.js"></script>
<script defer src="script.js"></script>
Використовуйте async, якщо скрипт має завантажитися й запуститися якомога раніше.
Використовуйте defer для другорядних ресурсів, наприклад відеоплеєра внизу сторінки.
3. Налаштуйте підключення до даних ресурсів завчасно.
Ви можете заощадити 100–500 мс, встановивши ранні підключення до важливих джерел. Тут допоможуть два типи підключення через тег <link>: preconnect та dns-prefetch.
<link rel="preconnect" href="https://cdn.example.com">
Цей тег повідомляє браузеру, що ваша сторінка має намір встановити з’єднання з іншим джерелом, і ви хочете, щоб процес почався якомога швидше. Коли надійде запит до цього джерела, завантаження стартує негайно.
<link rel="dns-prefetch" href="https://cdn.example.com">
dns-prefetch обробляє лише частину того, що робить preconnect: пошук DNS і підтвердження TCP, а для безпечних джерел — ще й узгодження TLS.
👉 preconnect використовуйте тільки для найважливіших з’єднань, а для менш значущих сторонніх доменів достатньо dns-prefetch.
4. Налаштуйте ліниве завантаження даних ресурсів.
Вбудовані сторонні ресурси можуть сильно знижувати швидкість сторінки, особливо якщо вони великі й розташовані нижче основного контенту. Якщо вони не критичні, краще відкладати їх завантаження. Це дозволить користувачам швидше отримати головний вміст сторінки.
Найефективніші підходи:
- завантажувати сторонній контент тільки після повного завантаження основної сторінки;
- завантажувати його лише тоді, коли користувач прокручує сторінку до потрібного розділу.
Для цього зручно використовувати Intersection Observer API, який дозволяє ефективно визначати, коли елемент з’являється або зникає з області перегляду браузера.
5. Зменште час виконання Javascript.
Цей ідентичний описаним крокам у розділі LCP. Ще раз відзначу кроки:
- Мінімізуйте та стискайте Javascript.
- Видаліть Javascript, що не використовується.
- Відкладіть виконання некритичного Javascript
6. Мінімізуйте роботу в основному потоці.
7. Зменшіть кількість і розмір файлів, що запитуються (як зазначалося раніше).
Небагато слів про “кількість ресурсів”. Використовуйте вкладку “Задайте правила ефективного використання кешу для статичних об’єктів” у “Pagespeed Insight” або вкладку “Network” у Chrome DevTools для того, щоб переглянути всі ресурси, які завантажені на сторінці:
Коротко зазначу, що ми робимо для того, щоб зменшити кількість ресурсів:
- Об’єднуємо та мінімізуємо Javascript (як зазначалося раніше).
- Об’єднуємо та мінімізуємо CSS (як зазначалося раніше).
- Мінімізуємо використання властивості “background-image” у файлах стилів та “інлайн” графічні елементи.
Зменшіть вплив сторонніх ресурсів (як зазначалося раніше)
- Оптимізуйте скрипти, що тривало виконуються.
- Використовуйте вкладку “Performance” у Chrome DevTools для пошуку та налагодження тривалих операцій.
Визначте, які процеси є найбільш витратними і оптимізуйте їх.
Зверніть увагу на процеси, які позначені як “Long task” та оптимізуйте їх.
Ще одним способом пошуку проблем є нова функція Pagespeed Insights – “View treemap”, яка дозволяє вам побачити, що знаходиться у вашому JavaScript, знайти залежності і відсоток використання в коді.
- Завантажуйте Javascript асинхронно(як зазначалося раніше)
- Використовуйте методи “прогресивного покращення”, щоб користувальницький інтерфейс можна було використовувати до запуску JavaScript
- Обмежте обсяг та складності обчислення стилів
- Не використовуйте великі складні макети та уникайте їх підгальмовування
Cumulative Layout Shift
Цей показник призначений для виміру візуальної стабільності сторінки і відстежує — наскільки зсувається контент сторінки, коли нові елементи відображуються на своїх місцях сторінки.
Поради щодо покращення цього показника
1. Резервуйте місця для зображень, відео та iframe шляхом вказівки розмірів.
Щоб зменшити зсув розмітки, викликаний завантаженням ресурсів без заданих розмірів, задавайте картинкам і відео атрибути width і height. Це допомагає браузеру виділити достатньо місця, поки елементи завантажуються.
<img src="image.jpg" alt="..." width="500" height="500">
Якщо зображення має бути чуйним, у стилях задайте width: 100%, а height: auto. Це дозволяє задовольнити вимоги браузера і водночас контролювати відображення на різних пристроях:
img {
width: 100%;
height: auto;
}
Корисна стаття: Setting Height And Width On Images Is Important Again.
2. Використовуйте CSS-властивість aspect-ratio
Вона дозволяє браузеру розрахувати співвідношення сторін і зарезервувати місце для елемента. Підтримка ще у перехідному стані, але в майбутньому стане стандартом.
3. Використовуйте попереднє завантаження шрифтів і використання font-display: swap
Це допомагає запобігати зміщенню тексту під час завантаження шрифту.
4. Уникайте динамічної вставки елементів у верхній частині сторінки
Це може вплинути на взаємодію користувача зі сторінкою.
Ми часто застосовуємо динамічні компоненти (попапи, дропдауни, таби, акордеони), які вставляють розмітку під час ініціалізації. Щоб уникнути CLS, важливо вказувати атрибути width і height.
5. Уникайте окремих анімацій
Не використовуйте box-shadow та filter у анімаціях — ці властивості браузер змушений перераховувати під час кожного кадру. Це може спричинити “смикання” на слабких пристроях і зрушення розкладки.
Chrome DevTools вказує, які анімації не можуть бути винесені в окремий шар. Це допомагає скласти список проблемних елементів. Детальніше у статті: Avoid non-composited animations.
Висновок
Сподіваюся, ця стаття допоможе вам покращити ключові показники нового критерію ранжирування Google — Core Web Vitals і бути готовим до змін, які відбуватимуться в Інтернеті.
Питання покращення веб-продуктивності викликало великий ажіотаж у спільнотах і, звичайно ж, має благу мету. Команда Chrome постійно займається доопрацюванням і виправленням даних критеріїв, і незважаючи на те, що в будь-який момент можливі “breaking changes”, показниками веб-продуктивності необхідно зайнятися вже зараз.