Даний алгоритм є частиною фактора ранжування - Page Experience (Зручність сторінки), який спрямований на відстеження якості користувацького досвіду на сайті. Core Web Vitals є одним зі складових частин даного чинника. До складу цієї групи сигналів також відносяться:
● Mobile Friendly
● HTTPS
● Better Ads Standards
● User Expirence
зміст:
● Як підготувати сайт до Core Web Vitals
● Чому так важливо прискорити швидкість завантаження сторінок сайту
● Основні сигнали Core Web Vitals
● Як виміряти показники
● Як оптимізувати сайт для швидкого завантаження - сигнали Web Vitals
● Висновки
Чому так важливо прискорити швидкість завантаження сторінок сайту
З розвитком технологій, інтернету і мобільних телефонів, люди так само адаптувалися до змін і все більше "серфять" інтернет саме з мобільних пристроїв. Специфіка мобільного серфінгу така, що користувач не готовий довго чекати завантаження сторінки або користуватися незручним інтерфейсом і відразу залишає її. Сучасний користувач дуже розпещений і це цілком обґрунтовано жорсткою конкуренцією за клієнта. Розуміючи це, Google вирішив підстьобнути власників сайтів до поліпшення своїх майданчиків і створив фактор ранжування Page Experience. Core Web Vitals це перший стовп, на якому стоїть "Зручність сторінки".
Ось вам проста статистика, на користь оптимізації ваших ресурсів:
|
Частка населення України, що використовують мобільні пристрої для виходу в інтернет |
За 2019 рік, було проведено дослідження з розподілу трафіку на пристрої. Частка склала 66% всього населення |
|
Швидкі vs повільні сайти |
Повільні сайти залишають на 70% частіше |
|
Відсоток втрати конверсій за 1 секунду провисань |
7% втрачених конверсій |
|
Повернення користувачів на сайт |
79% незадоволених швидкістю завантаження, не зайдуть знову. 44% залишать негативний відгук |
|
Швидкість завантаження понад 5 секунд |
Скорочення трафіку на 50% |
|
Швидкість роботи сайту та ранжування в пошуковій видачі |
Оскільки швидкість завантаження, є офіційним чинником ранжирування, то сайти з низькою швидкістю ранжуються набагато нижче своїх конкурентів з хорошою швидкістю. А як ми пам'ятаємо перша позиція має CTR в 28.5%. Друга в 15.7% і далі по спадаючій. |
Основні сигнали Core Web Vitals
-
LCP ( Largest Contentful Paint ) - оцінює час, за яке найбільший контент на сторінці, промальовується для користувача. Це може бути, банер або інше зображення.
-
FID ( First Input Delay ) - оцінює час за яке користувач може почати взаємодіяти зі сторінкою. Наприклад, натиснути на кнопку або посилання. Якщо користувач, натискаючи на що, не бачить змін, то це вважається поганим призначеним для користувача досвідом.
-
CLS ( Cumulative Layout Shift ) - оцінює сукупне зміщення макета під час завантаження сторінки. Простою мовою, наскільки швидко елементи на сторінці перестануть "скакати" по екрану. В ідеалі, такі стрибання повинні бути непомітні для користувача.
Як виміряти показники
Для перевірки показників існує велика кількість інструментів і сервісів. Але я рекомендую користуватися офіційними й перевіреними інструментами від самих Google:
Page Speed Insight - збирає дані з Lighthouse і CrUX і формує з них змістовний звіт з рекомендаціями щодо оптимізації. Оцінює конкретну сторінку.
Chrome DevTools ( Lighthouse ) - в консоль розробник браузера Chrome вбудована можливість перевіряти сторінки на показники швидкості завантаження. Оцінює стан всього сайту, а не окремо взятих сторінок.
Google Search Console - не самий змістовний звіт, але зате показує проблемні сторінки на сайті.
Як оптимізувати сайт для швидкого завантаження - сигнали Web Vitals
Слід розуміти, що для кожного конкретного сайту, будуть свої конкретні проблеми і їх вирішення. Ви можете спиратися на рекомендації самих звітів в інструментах. Я ж наведу найбільш зустрічаються "болячки" і способи їх вирішення:
● CSS важливий елемент сторінки, який повинен бути завантажений, як можна швидше. При цьому найчастіше велика частина CSS не використовується. Іноді доходить до того, що не використовується понад 80% стилів!
Рішення: Всі використовувані стилі вставити в код інлайн, невикористовувані завантажувати асинхронно.
● Попереднє завантаження - це декларативний запит на вибірку, який повідомляє браузеру запросити ресурс якомога швидше. Браузер встановлює більш відповідний рівень пріоритету для ресурсу, щоб спробувати завантажити його раніше, не затримуючи подія window.onload.
Необхідно використовувати "link rel = preload", щоб розставити пріоритети при виборі ресурсів, які наразі запитуються пізніше при завантаженні сторінки.
○ Для головної сторінки це зображення банера
○ Для карток товару - основна фотографія
● Усунути ресурси які блокують відображення - Якщо ресурси блокують першу промальовку сторінки. Рекомендую вбудувати критичну частину даних JS / CSS в код HTML і відкласти завантаження інших ресурсів.
○ Необхідно мініфікувати всі CSS файли.
○ Відкласти невикористовувані CSS файли. Для цього використовуйте звіт Coverage в Chrome DevTools
○ Невикористані CSS-стилі необхідно або видалити повністю, або винести в окремий файл, якщо ці інструкції використовуються на інших сторінках
○ Для будь-якого CSS, який не потрібен для первинного відтворення сторінки використовуйте loadCSS, яка застосує /rel = "preload" і onload . < Link rel = "preload" href = "stylesheet.css" as = "style" onload = "this.rel = 'stylesheet'">/
○ Всі CSS стилі, які потрібні для первинної відтворення сторінки необхідно впровадити в коді самої сторінки (inline) в head
○ Необхідно мініфікувати всі JS-файли
○ Відкласти завантаження невикористовуваних JS-файлів
● Використовувати атрибути ширини та висоти зображення - Необхідно завжди включати атрибути ширини та розміру в зображення і відео елементи на сайті. Такий підхід гарантує, що браузер може виділяти правильний обсяг простору в документі під час завантаження зображення. При цьому потрібно в CSS-файлі для всіх зображень вказувати очікуване співвідношення сторін
● Шрифти - В першу чергу поганий показник CLS може виникати через FOUT (відображення стандартного тексту до моменту завантаження кастомними). Щоб уникнути цього явища необхідно:
○ Використовувати font: display в стилях для шрифтів, наприклад font-display: swap;
○ Паралельно використовувати preload для шрифтів link rel = "preload" as = "font"
● Пасивні прослуховувачі подій - Щоб підвищити продуктивність при прокручуванні сторінки, використовуйте прапор "passive" для прослуховувача подій дотику і колеса миші.
● Задайте правила ефективного використання кеша для статичних об'єктів - Завдяки довгому часу зберігання кеша сторінка може швидше завантажуватися при повторних відвідинах.
Висновки
Не відкладайте оптимізацію швидкості завантаження сайту в довгий ящик. Вже зараз ви можете почати покращувати швидкість роботи сайту та отримати з цього величезну користь для вашого ресурсу і ваших користувачів.
