Стаття від експерта з агентства інтернет-маркетингу Promodo
У червні набудуть чинності нові правила Google за оцінкою онлайн-ресурсів — Core Web Vitals. Тобто при ранжуванні сайтів Google буде враховувати групу нових факторів:
- час відтворення найбільшого елемента сторінки (Largest Contentful Paint);
- інтерактивність сторінки (First Input Delay);
- стабільність сторінки (Cumulative Layout Shift).
З факторами Core Web Vitals пошуковик стане особливо високо цінувати швидкість роботи сайту та зручність його використання. Як зробити так, щоб сайт літав і добре ранжувався — розповідають керівник TechOps-відділу HOSTiQ і Senior SEO-спеціаліст Promodo Олександр Уткін.
Для перехресного інтерв’ю зібрали найболючіші питання. Поїхали!
Відповідає Head of TechOps
Для яких сайтів підходить той чи інший вид хостингу? Як зрозуміти, що пора переходити на більш дорогий тариф?
Є чотири основні типи хостингу:
- віртуальний хостинг;
- хмарний;
- VPS;
- виділені сервери.
На віртуальному хостингу ви ділите один сервер з іншими клієнтами. Ви отримуєте обмежену кількість ресурсів і обмежені можливості щодо внесення змін на сервері, тому що ваш обліковий запис не повинен заважати сусідам. Зате тут все вже налаштовано для запуску сайту і такий хостинг підійде навіть новачкам, які роблять це вперше.
Хмарний хостинг схожий на віртуальний: ви теж ділите один сервер з іншими клієнтами, ресурси обмежені, а хостинг надається в стані «під ключ». Відмінність в тому, що тут ваші дані дублюються одночасно на кілька носіїв. І якщо один з серверів вийде з ладу, то сайт продовжить працювати з іншого. Такий тип хостингу підходить для сайтів, яким важливо бути в онлайні без перебоїв 24/7.
VPS — це віртуальний приватний сервер. Він імітує роботу окремого фізичного сервера. На носіях VPS-хостингу набагато менше клієнтів, і впливу сусідів на ваш обліковий запис теж менше. Крім того, у вас будуть права суперкористувача, з якими ви налаштуєте на сервері майже будь-яке програмне забезпечення. Такий тип хостингу підходить для великих проєктів з досвідченими розробниками і для сайтів, які вимагають більш тонкого налаштування ПЗ.
Виділений сервер — це окрема фізична машина, яку використовуєте лише ви. Такі сервери зазвичай вибирають для високонавантажених проєктів.
Визначити, що пора переходити на інший тариф або інший тип хостингу, буває непросто. Найчастіше про це замислюються, коли не вистачає ресурсів хостингу: зашкалює використання ОЗП або процесора. У такій ситуації в першу чергу потрібно переконатися, що сайт добре оптимізований, тому що ОЗП або процесор можуть споживати непотрібні плагіни або зайві запити до бази даних. Перевірити оптимізацію сайту можна за допомогою онлайн-ресурсів, наприклад, Google PageSpeed або GTmetrix.
Якщо ви вже зробили все можливе для оптимізації сайту, але ресурси хостингу все одно на межі — тоді можна спробувати перейти на більш просторий тариф.
Який фактор більше за інших впливає на швидкість роботи сайту?
Наявність сторонніх скриптів, всіляких спливаючих вікон, які в Google Tag Manager найбільше уповільнюють роботу сайтів. У нас був випадок, коли найбільше гальмували роботу сайту змінні в GTM — навіть не теги.
Що робити з онлайн-консультантами та іншими спливаючими вікнами, які сильно уповільнюють початкову завантаження сторінок?
Такі спливаючі вікна за замовчуванням завантажуються разом з основними елементами сторінки. Вони негативно впливають на параметри Core Web Vitals і не потрібні користувачеві з самого початку. Також вони не несуть в собі корисний контент, який міг би оцінити Google для SEO.
Кращий вихід — це просто відкласти їх завантаження до тих пір, коли перший екран вже повністю завантажиться та стане інтерактивним. Тобто, коли параметри Core Web Vitals вже будуть пораховані, а користувач почне взаємодіяти зі сторінкою. Завантаження таких елементів можна просто відкласти за таймером, який є в Google Tag Manager, наприклад на 6 секунд. І проблему буде повністю вирішено.
Що таке LCP і як поліпшити цей показник?
Largest Contentful Paint (LCP) — це час, за який браузер відмальовує найбільший елемент сторінки сайту, видимий на першому екрані пристроїв. Він повинен завантажуватися якомога раніше щодо інших елементів сторінки.
Це може бути текстовий блок, зображення або вікно введення даних. Цей елемент може відрізнятися навіть для однієї і тієї ж сторінки при завантаженні на пристроях з різним розширенням екрану. Залежить від того, яка частка сторінки потрапить в перший екран.
Браузер Google Chrome визначає LCP у користувачів і відправляє виміри на сервери Google. Ці виміри можна подивитися в браузері в консолі розробника, на вкладці Performance і Lighthouse. Простий варіант, як визначити найбільший елемент на першому екрані — стандартний PageSpeed Insights. Внизу в рекомендаціях він явно вказує, що порахував LCP під час свого тесту.
Купуйте хостинг у HOSTiQ за вигідною ціноюі з компетентною підтримкою 24/7
Як прискорити першу відмальовку контенту?
First Contentful Paint — це перша відмальовка значущого вмісту сторінки.
Щоб її прискорити, потрібно поліпшити все, на що може вплинути хостинг, і що описано у відповідях вище. Також потрібно відкласти завантаження всього, що не знадобиться користувачеві в першу секунду, наприклад, лічильників аналітики та Facebook Pixel. Якщо цього не зробити — сайт буде завантажуватися занадто довго і це може не сподобатися не тільки Google, але і відвідувачам.
Кумулятивне зрушення макета — як його виявити?
Кумулятивне зрушення макета (CLS) — це переміщення елементів сторінки з місця на місце під час її завантаження. Наприклад, спочатку завантажився текст, а тільки потім завантажується картинка, яка зміщує весь текст вниз. Виявити CLS можна в консолі Google Chrome у вкладці Performance або за допомогою будь-якого онлайн-інструменту, який робить скріншоти завантаження сторінки.
Щоб уникнути зсуву макета, у кожного елемента повинна бути своя зарезервована область, де він з’явиться. Також можна використовувати плейсхолдери — сірі прямокутники, які повідомляють користувача, що скоро на цьому місці з’явиться контент і потрібно трохи почекати.
Пишіть в коментарях, що ще хочеться дізнатися у фахівців з SEO та хостингу, і ми розповімо про це докладніше!
Хочу опубліковати статтю у блозі HOSTiQ!