Розробка
Інтернет-маркетинг
З червня цього (2021) року одним із важливіших чинників ранжування
стали поведінкові метрики, що дають змогу оцінити, з якою швидкістю йде
завантаження ресурсу; наскільки відвідувачеві зручно користуватися
сайтом.
Дані зібрані в основних вебпоказниках — Core Web Vitals.
Це стало визначальним чинником для обов’язкового включення CWV в систематичні аудити СЕО-фахівців.
Розберемося, як Core Web Vitals зриває покрив таємничості, розкриває допущені помилки та змінює результати ранжування.
Хоча пошуковик запевняє, що в повну силу нові алгоритми почнуть діяти через кілька місяців, підготуватися до неминучих змін варто вже зараз. Проаналізуйте свій ресурс із точки хору користувацького досвіду (UX).
Важливо зрозуміти:
Усе це легко визначити за допомогою інструментів Core Web Vitals:
Доведеться переглянути низку моментів. У першу чергу необхідно оптимізувати сайт під мобільні пристрої. Гугл пильно стежить за наявністю адаптивних версій та віддає перевагу саме таким ресурсам.
Наявність
оманливого контенту або небезпечного для користувача теж зрушить позиції
онлайн-магазину або інформаційного сайту. Алгоритм Safe Browsing
вишукує будь-яку потенційну загрозу, тому подбайте про безпеку
перегляду.
Google відносить до числа небезпечних ті ресурси, які використовують з’єднання HTTP або містять елементи, що відкриваються за допомогою цього протоколу. Такі сайти отримують низькі позиції при ранжуванні. Встановіть захищений HTTPS протокол.
Рекламні оголошення, що спливають, мають бути створені відповідно до вимог. Несанкціонована поява реклами або занадто велике вікно, що спливає, негативно впливає на думку пошукача. Тому рішуче позбавляємося нав’язливих рекламних блоків.
Нам належить розібратися, у чому ж полягає новизна Core Web Vitals, яким чином ці дані вимірюються, чи можна їх поліпшити і як.
Метрика Largest Contentful Paint (LCP) оцінює швидкість завантаження. Однак її цікавить не вся сторінка, а лише найбільший фрагмент, який міститься на першому екрані. До таких належать: відео, текст, зображення й подібні.
Під час завантаження першим з’являється заголовок або шапка (дах чи хедер), а потім відкривається розташоване під ним зображення. Ось цей проміжок (затримку) і фіксує Largest Contentful Paint.
На це здатні вплинути різні обставини:
Щоби перевірити, що «накопав» на ваш вебресурс CWV, потрібно звернутися до Google Search Console. Відкрийте «Якість», потім зробіть перехід до «Основні вебпоказники».
Цей інструмент розподіляє сторінки за трьома рівнями показників завантаження: критичні, вимагають доопрацювання/поліпшення, задовільні. Клацніть на проблемні URL-адреси, отримаєте графік оцінки завантаження LCP на мобільному й десктопном пристрої. Це допоможе вчасно побачити проблему та зробити корективи.
Серйозною підмогою в роботі стануть інструменти SEO. Можна скористатися програмою SE Ranking, у якій доступний огляд усіх параметрів CWV. Можете одразу побачити всю ситуацію: загальний час відповіді від сервера, число можливих редиректів і інші показники, які істотно впливають на завантаження найбільшого контенту (LCP); оцінити загальний стан вебресурсу, побачити проблеми, які потребують негайного усунення.
Розв’язувати проблему треба комплексно. Щоб успішно впоратися із завданням і прискорити завантаження найбільшого об’єкта:
Виконана
робота принесе плоди не тільки в боротьбі за кращі показники LCP.
Зможете відкоригувати юзабіліті сайту, розібратися з різними
поведінковими чинниками.
Затримка першого введення або First Input Delay (FID) визначає, наскільки швидко з ресурсом можна почати взаємодіяти: заповнювати форми, активувати клавіші й таке інше. Якщо доводиться нудитися в очікуванні активності, це означає, що перше введення явно гальмує.
Для цього можна скористатися даними JavaScript-бібліотек або RUN (моніторинг реальних користувачів).
Гугл теж веде облік, прагнучи охопити користувачів різних категорій, тому бере до відома навіть поганенькі онлайн-з’єднання.
Потрібно
розуміти, що інформація першого введення на конкретній сторінці може
відрізнятися, залежно від гаджета, з якого заходять на сайт і поведінки
користувача.
Використовуйте статистику Chrome User Experience. Її можна дістати через PageSpeed Insights, Search Console, Data Studio. Цікава тим, що містить інформацію про реальних людей, які дали згоду на збір статистики й синхронізували історію пошуків на всіх пристроях.
Інше
зручне джерело SE Ranking. Тут можна дістати й додаткові відомості:
Time To Interactive розповість, як швидко сторінка стає інтерактивною;
Total Blocking Time повідає, що завантажився перший елемент, але
працювати на сторінці неможливо.
Для поліпшення показників FID використовують усі ті інструменти, що і для поліпшення часу завантаження найбільшого об’єкта (LCP). Можна додати асинхронне завантаження. Для цього потрібно подивитися, чи можна блоки, які запитує сервер, довантажувати пізніше.
Відповідь знайдете у Chrome DevTools. Сервіс продемонструє повний процес завантаження ресурсу. У вкладці Lighthouse створіть звіт Performance і натисніть View Original Trace. Дізнаєтеся скільки часу в мілісекундах йде на відтворення, наприклад, анімації. Так можете оцінити, чи можна упустити якийсь елемент, щоб збільшити швидкість завантаження.
Ось цими атрибутами можна скористатися для асинхронного завантаження: script, defer, async.
Використовуйте
техніку так званого «ледачого завантаження» для більш швидкого
зчитування сторінок HTML. Не завадить перевірити зазначені в
плейсхолдерах розміри зображення, це допоможе уникнути зміщення.
Користувач починає працювати з ресурсом і раптом з’являється рекламне оголошення. Усі елементи на сторінці починають стрибати та зміщуватися. Цей процес називають зміщенням макета сторінки. Зрозуміти, наскільки це катастрофічно, дає змогу останній інструмент CWV — Cumulative Layout Shift (сукупне зміщення верстки).
Суть помилки в тому, що були задані чіткі розміри для всіх елементів сторінки; інша причина — динамічна зміна розташування об’єктів.
Розрахувати Cumulative Layout Shift можна легко за такою формулою:
Розберемося з її складниками. Дізнатися об’єм зміщення (а це та частина екрану, яка рухається через те, що з’являється вікно або відбувається дозавантаження блоку) вийде, якщо розділити площу всіх нестабільних об’єктів на площу всього екрану.
Відстань, на яку переміщується зміст сторінки, називають відстанню зміщення. Вимірюється шляхом ділення довгої частини зміщення на висоту екрану (вибираємо найвищу точку).
Безумовно — так! Але спочатку треба визначити увесь динамічний контент, який змінює своє місцеперебування. Наступне завдання — не відходити від правил:
Оновлення
запрацює в повну силу вже в серпні, так що часу на глибокий аудит і
доопрацювання ресурсу з урахуванням нових алгоритмів Гугл уже немає.
Робіть
ставку на зручність сайту для користувача, відсутність зміщень і швидке
завантаження сторінок. Усі ці момент грають важливу роль у просуванні
онлайн-магазину в органічному пошуку.
Якщо йдете назустріч вимогам Google, він вам точно відплатить взаємністю.