Core Web Vitals. Основи оптимізації сайту під новий фактор ранжування
Core Web Vitals один із сотень чинників ранжирування в пошуковій мережі. 11 листопада 2020 року Google оголосив, інтеграція Core Web Vitals і раніше існуючих сигналів ранжирування, пов'язаних з UX, повинна відбутися в травні 2021 року. І ось не так давно це сталося.
Core Web Vitals оцінює реальні показники взаємодії користувачів з сайтом за кількома дуже важливими критеріями: наскільки це зручно для мобільних пристроїв, чи безпечний перегляд, наскільки довго завантажується сторінка? Як фактор ранжування можна уявити, як він може вплинути на SEO, оскільки залежить від того, як працює сайт. Він оцінює сайт відповідно за певними показниками, що впливають на швидкість сторінки і взаємодію з користувачем:
✓Час відтворення основного контенту (LCP)
✓Затримка після першого введення (FID)
✓Зміщення пакета при відображенні (CLS)
Чому важливі показники Core Web Vitals?
У зв'язку зі зростаючим значенням зручності використання сторінок, ось деякі з факторів, які Google вважає важливими:
Наявність безпечного з'єднання HTTPS
Мобільність
Відсутність міжсторінкових спливаючих вікон
Відсутність шкідливого ПЗ
Ці чинники дійсно впливають на якість сторінок сайту, тому оптимізація для них буде корисною, але Core Web Vitals матиме більшу вагу в досягненні більш високих оцінок. Проте, будь-яка сторінка може мати місце в пошуковому рейтингу, але вона все одно буде залежати від загальної продуктивності сайту. По суті, це означає, що оптимізація виключно для зручності сторінки не призведе до того, що сайт виявиться на першій сторінці пошукової видачі, якщо, наприклад, його зміст не буде корисним для користувача.
Корисно пам'ятати, що у Google є близько 200 факторів ранжирування, які необхідно враховувати, і зручність роботи зі сторінкою є одним з багатьох. Однак це не означає, що якість сторінки не варто оптимізувати - в разі, коли кілька сторінок конкурують з однаковою релевантністю змісту, зручність сторінки збільшує видимість в пошуку.
У Google є близько 200 факторів ранжирування, які необхідно враховувати, і зручність роботи зі сторінкою є одним з багатьох
Core Web Vitals дозволяє сайту відповідати вимогам завтрашнього дня, залишаючись конкурентоспроможними в пошуку, оскільки оцінка якості сприйняття сторінки-це офіційна частина алгоритму пошукового рейтингу Google. Це забезпечує більш високі коефіцієнти конверсії за рахунок зручної взаємодії з будь-якою цільовою аудиторією.
Фахівцям з маркетингу і тим, хто займається розробкою сайтів, дуже важливо знати, яким чином Core Web Vitals може впливати на ефективність SEO-кампанії. Це дає веб-майстрам і SEO-аналітикам уявлення про те, як оптимізувати сайт і як можна вплинути на результати рейтингу. Для власників бізнесу розуміння мотивації покупця може допомогти поліпшити взаємодію з користувачем на сторінці сайту через UX і UI можливості.
Як вимірювати основні показники сайту?
Нещодавно Google створив нові тести, звіти і розширення для аналізу продуктивності Core Web Vitals. Найбільш важливі з них:
Оновлена оцінка польових даних в PageSpeed Insights;
Новий звіт в Google Search Console;
Розширення Core Web Vitals для Chrome.
DevTools Chrome і звіт Chrome User Experience Report (CrUX) також можуть допомогти вам проаналізувати LCP, CLS і FID.
Як оптимізувати сайт для Core Web Vitals
Після того, як ви виміряли Core Web Vitals свого сайту, саме час його оптимізувати. Кожен сайт індивідуальний, тому проблеми у кожного сайту можуть бути абсолютно різними. Звертайте на це увагу, коли використовуєте інструкції щодо оптимізації проектів для Core Web Vitals. Завжди аналізуйте свої конкретні проблеми, перш ніж вносити будь-які зміни.
Аналіз і налагодження LCP
LCP вимірює час, необхідний для завантаження найбільшого елемента вмісту. Цей елемент може бути зображенням (включаючи фонове зображення в CSS), відео або блоком тексту. Все, що менше 2,5 с, вважається хорошою оцінкою LCP. Якщо найбільший елемент на сторінці завантажується швидше, ніж 75% всіх записаних сторінок, сторінка проходить оцінку LCP.
LCP PageSpeed Insights. Простий спосіб перевірити, який елемент запускає цю метрику, - запустити сторінку через PageSpeed Insights, прокрутити вниз до розділу «Діагностика» і клацнути «Найбільший елемент Contentful Paint».
Діагностика PSI. Те ж саме можна зробити за допомогою DevTools Chrome. Відкрийте сторінку, яку ви хочете проаналізувати, в Chrome, клацніть правою кнопкою миші, виберіть «Перевірити» і перейдіть в «Продуктивність».
Панель продуктивності в DevTools. Натисніть кнопку «Оновити» і дочекайтеся, поки Chrome проаналізує сторінку. Коли звіт буде готовий, ви побачите невеликий значок LCP в розділі «Терміни». Коли ви наводите на нього курсор, він забарвлює найбільший елемент сторінки в синій колір.
Як поліпшити час LCP
+ Вибирайте найкращий хостинг для свого сайту і найпродуктивніший тариф. Швидкий час відгуку сервера важливий для швидкості сайту. Якщо ви використовуєте повільний загальний хостинг, подумайте про перехід на виділений тарифний план, наприклад, VPS / VDS.
+ Реалізуйте критичний CSS.
+ Оптимізуйте зображення. Часто основною причиною повільних сайтів є необхідність стиснення зображень, зміни розміру та перетворення в правильний формат.
Аналіз і налагодження CLS
CLS вимірює сукупне зміщення макета при відображенні. Несподівані зрушення макета відбуваються, коли вміст на сторінці переміщається без введення даних користувачем. Оцінка CLS нижче 0,1 означає, що сторінка візуально стабільна. Якщо це вірно для 75% записаних завантажень сторінок, сторінка проходить оцінку CLS.
Оцінка CLS. Щоб обчислити ваш показник CLS, Google відповідає на два питання: Наскільки сильно зміщення вплинуло на область перегляду? Наскільки далеко переміщалися елементи під час зсуву в порівнянні з вікном перегляду?
PageSpeed Insights може показати вам, які елементи впливають на CLS на сторінці. DevTools Chrome також допомагає виявляти несподівані зрушення в макеті.
Як виправити проблеми з CLS
+ Уникайте розміщення реклами та спливаючих вікон над іншим контентом.
+ Додайте атрибути ширини і висоти до зображень і відео. Ці атрибути допомагають браузеру заздалегідь виділити правильну кількість місця для кожного елемента. Це значно скорочує зрушення макета.
+ Зарезервуйте місце для реклами, iFrame і динамічного контенту. Подібно зображенням і відео, ці елементи також можуть викликати зрушення макета, якщо для них не зарезервовано місце. Використовуйте контейнери правильних розмірів і властивість overflow: hidden, щоб контент не наповнював свій контейнер;
+ Оптимізуйте доставку шрифтів.
Аналіз і налаштування FID
FID вимірює, скільки часу потрібно браузеру, щоб почати обробку першої взаємодії користувача зі сторінкою. Цей показник відстежує затримки тільки після певних дій, таких як клацання або торкання. Переміщення та збільшення не впливають на FID. Щоб потрапити в зелену зону, FID сторінки повинен бути менше 100 мс для 75% всіх завантажень сторінок.
Тепер FID відстежує затримку тільки після першого входу. Що ж, перші враження - це все, що є в мережі. Користувачі миттєво йдуть і, в більшості випадків, не повертаються, якщо сайт розчарував їх при першому відвідуванні. Ось чому вкрай важливо підтримувати низький рівень FID. JavaScript (JS) зазвичай є основною причиною проблем з FID. Надмірне використання JS може призвести до довгих завданнь, які представляють собою періоди часу, коли ваш призначений для користувача інтерфейс може не реагувати на взаємодію з користувачем. Користувачі миттєво йдуть і, в більшості випадків, не повертаються, якщо сайт розчарував їх при першому відвідуванні.
Аналіз основного розділу в DevTools. Ви можете знайти всі завдання довжиною понад 50 мс в розділі «Основні». Ці завдання пофарбовані в сірий колір з червоною накладкою. Аналіз «знизу вгору» дозволяє групувати файли за URL-адресами і точно визначати причини затримок. WebPageTest - ще один відмінний спосіб знайти проблемні області. Ви зможете знайти фрагменти коду, які блокують основний потік.
Як виправити проблеми з FID
+ Розбивайте довгі завдання. Розбивши їх, ви можете значно поліпшити продуктивність свого сайту.
+ Мінімізуйте і стискайте файли коду. Мінімізація видаляє непотрібні частини з коду, такі як прогалини і розриви рядків. Стиснення також змінює файли коду, зменшуючи їх розмір.
+ Відкладіть або видаліть некритичні сторонні скрипти. Сторонні скрипти іноді можуть перешкоджати своєчасному виконанню ваших власних скриптів.
+ Оптимізуйте CSS. Хоча JS - головний лиходій FID, CSS також за замовчуванням блокує рендеринг. Ось чому надмірне використання CSS також може нашкодити користувачеві. Крім впровадження Critical CSS, також варто скоротити невикористаний CSS на вашому сайті. Інформація про способи оптимізації сайту - переклад з nitropack.io.
Вплив хостинг-провайдера на Core Web Vitals
Ось кілька важливих факторів, які позитивно вплинуть на оптимізацію вашого сайту:
-наявність SSD / NVMe дисків на тарифах хостингу, які значно покращують швидкість роботи сайту.
-підключення додаткової послуги CDN кешування. Це мережа доставки контенту, що знижує навантаження на сервер. Використовується для відправки CSS, JS зображень користувачеві сайту.
-підтримка HTTP / 2 протокола, який здатний передавати кілька елементів в одному з'єднанні.
-наявність Google pagespeed модуля для оптимізації зображень.
Якщо всі ці пункти виконані на вашому хостинг-провайдері, то це хороший показник для Core Web Vitals. А якщо ні, то переходьте на надійний і професійний хостинг від компанії ГіперХост: