Стаття від експерта з агентства інтернет-маркетингу 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
Для яких сайтів підходить той чи інший вид хостингу? Як зрозуміти, що пора переходити на більш дорогий тариф?
Є чотири основні типи хостингу:
На віртуальному хостингу ви ділите один сервер з іншими клієнтами. Ви отримуєте обмежену кількість ресурсів і обмежені можливості щодо внесення змін на сервері, тому що ваш обліковий запис не повинен заважати сусідам. Зате тут все вже налаштовано для запуску сайту і такий хостинг підійде навіть новачкам, які роблять це вперше.
Хмарний хостинг схожий на віртуальний: ви теж ділите один сервер з іншими клієнтами, ресурси обмежені, а хостинг надається в стані «під ключ». Відмінність в тому, що тут ваші дані дублюються одночасно на кілька носіїв. І якщо один з серверів вийде з ладу, то сайт продовжить працювати з іншого. Такий тип хостингу підходить для сайтів, яким важливо бути в онлайні без перебоїв 24/7.
VPS — це віртуальний приватний сервер. Він імітує роботу окремого фізичного сервера. На носіях VPS-хостингу набагато менше клієнтів, і впливу сусідів на ваш обліковий запис теж менше. Крім того, у вас будуть права суперкористувача, з якими ви налаштуєте на сервері майже будь-яке програмне забезпечення. Такий тип хостингу підходить для великих проєктів з досвідченими розробниками і для сайтів, які вимагають більш тонкого налаштування ПЗ.
Виділений сервер — це окрема фізична машина, яку використовуєте лише ви. Такі сервери зазвичай вибирають для високонавантажених проєктів.
Визначити, що пора переходити на інший тариф або інший тип хостингу, буває непросто. Найчастіше про це замислюються, коли не вистачає ресурсів хостингу: зашкалює використання ОЗП або процесора. У такій ситуації в першу чергу потрібно переконатися, що сайт добре оптимізований, тому що ОЗП або процесор можуть споживати непотрібні плагіни або зайві запити до бази даних. Перевірити оптимізацію сайту можна за допомогою онлайн-ресурсів, наприклад, Google PageSpeed або GTmetrix.
Якщо ви вже зробили все можливе для оптимізації сайту, але ресурси хостингу все одно на межі — тоді можна спробувати перейти на більш просторий тариф.
Стаття з теми:
Як вибрати хостинг
Яка різниця в швидкості завантаження сайтів в залежності від типу диска сервера: HDD vs SSD vs NVMe?
SSD — швидша альтернатива механічному накопичувачу HDD. Сайти на SSD-носіях працюють швидше, ніж на HDD. На SSD-дисках оперативніше підвантажується статичний контент: картинки, мультимедійні дані, HTML-сторінки. Також швидше зчитується динамічний контент: обробляються PHP-файли, створюються та заповнюються тимчасові файли.
NVMe-диски повинні зчитувати інформацію ще швидше, ніж звичайні SSD. Там присутні ті ж SSD-накопичувачі, але вони підключаються через інший інтерфейс передачі даних — через PCI-E шину. А традиційні SSD-диски підключаються через більш традиційні інтерфейси — SAS і SATA, які спочатку розроблялися для більш повільних HDD-дисків.
Тобто у SSD є перевага в порівнянні з HDD, а у NVMe SSD — в порівнянні зі звичайним SSD. Це більш висока швидкість читання і запису і, як наслідок, здатність справлятися з більш важкими робочими навантаженнями.
Спробуйте швидкий хостинг на чистих SSD-дисках!
Наша тепла підтримка на зв’язку 24/7
Який веб-сервер швидше: LiteSpeed або nginx?
Веб-сервер — це сполучна ланка між браузером користувача сайту і сервером, де цей сайт знаходиться. Саме веб-сервер приймає і обробляє запити браузера.
Ми тестували роботу пробних WordPress-сайтів на декількох веб-серверах з різними конфігураціями:
- OpenLiteSpeed/LiteSpeed з LSPHP;
- налаштований за замовчуванням nginx з PHP-FPM.
Тестували на сервері з такими специфікаціями:
| CPU | 2 ядра |
| RAM | 3 GB |
| Диск | 40 GB (SSD) |
| Сервер баз даних | MariaDB 10.3 |
| версія PHP | 7.2 і 7.3 |
Для веб-сервера nginx з PHP-FPM використовували кешуючий плагін W3 Total Cache, для веб-сервера LiteSpeed — LiteSpeed Cache. Додатково на пробних майданчиках налаштували сервіс кешування Memcached 1.4.15.
Заміряли кількість запитів в секунду та швидкість відгуку. Результат:
| Середня кількість запитів в секунду | Середній час відповіді в мілісекундах | Мінімальний час відповіді | Максимальний час відповіді | |
| LiteSpeed | 13.29 | 150 | 63 | 3486 |
| nginx | 3.53 | 6147 | 620 | 15488 |
У цьому вимірі LiteSpeed показав себе з кращого боку. Nginx потрібно додатково налаштовувати, щоб отримати такі ж або перевершують LiteSpeed показники.
Стаття з теми:
Прискорте роботу свого сайту, перейшовши на LSPHP
CDN — що це таке, як впливає на швидкість роботи сайту та чому?
CDN — це мережа кешуючих серверів, які знаходяться в різних географічних локаціях. Вона потрібна, щоб скоротити час передачі контенту — сайт буде відкриватися з найближчого до користувача сервера.
Простий приклад: Amazon розташований на серверах в США, і у відвідувача з України їх сайт повинен відкриватися повільніше, ніж у жителів Америки. Але компанія використовує CDN-сервіс, у якого є сервери в Україні, тому amazon.com для українців теж завантажується швидко.
Чи варто виводити картинки та відео на окремий сервер?
Якщо зображення — це частина сайту, виводити їх на окремий сервер варто, коли вони займають невиправдано багато місця або їх дуже багато. В іншому випадку при відкритті ваш сайт буде запитувати зображення зі стороннього ресурсу, що збільшить загальну кількість запитів, і сторінка буде завантажуватися повільніше. Якщо все ж потрібно винести зображення на окремий сервер, використовуйте на ньому кешуючий проксі-сервер Varnish, щоб довантажувати медіафайли прямо з RAM.
Тож, коли мова йде про середніх розмірів інтернет-магазині з невеликою кількістю зображень, краще зберігати їх локально. У випадку з відео майже в 100 % ситуацій краще не хостити відео на тому ж сервері, що і сайт, а виділяти для них окремі потужності.
Чи впливає тип баз даних на швидкість завантаження сайту? Що краще: MySQL vs PostgreSQL?
На швидкість завантаження сайту більше впливає кількість запитів до бази даних і типи цих запитів.
Проте, PostgreSQL дає набір функцій і функціоналу, яких немає в MySQL. А ще PostgreSQL вважається більш продуктивним сервером баз даних. Хоча в разі великої кількості простих запитів читання з БД все ж виграє MySQL. Крім того, PostgreSQL вимагає більше ресурсів для роботи: близько 10 MB RAM додатково для кожного нового клієнтського підключення.
Чи потрібно розміщувати БД на тому ж сервері, що і основні файли сайту?
Це не обов’язково, але бажано для прискорення роботи сайту. Якщо база даних знаходиться на окремому сервері, який географічно знаходиться на відстані від сервера з сайтом, ресурс буде повільніше завантажуватися. До того ж виділені сервери баз даних часто одночасно обслуговують багато БД різних сайтів. Через високе навантаження на такі сервери ваш сайт може працювати повільніше.
Найкраще взяти окремий сервер для сервісу БД, на якому буде обмежена кількість баз даних, поставити його поруч з сервером, на якому знаходиться сам сайт, і забезпечити між ними хороший канал зв’язку.
Які плюси дає протокол HTTP/2 і для кого він не підходить?
HTTP — це протокол, в якому описані правила передачі даних в інтернеті. За цими правилами браузер завантажує веб-сторінки, а сервер отримує інформацію, яку користувач ввів на сайті.
HTTP/1.1 — поліпшена версія протоколу, яка з’явилася ще в 1999 та пробула стандартом довгі роки. У 2015 році на заміну HTTP/1.1 інженери розробили протокол HTTP/2.
HTTP/2 протокол побудований на бінарному форматі, а не на текстовому, і тому працює швидше. Оновлений протокол може відправляти та приймати більше інформації в кожному циклі обміну даними між клієнтом і сервером. Ще один плюс — це стиснення заголовків і вдосконалений алгоритм пріоритетності завантаження файлів: більш важливі файли будуть завантажуватися в першу чергу.
Якщо ви хочете перейти на протокол HTTP/2:
- Запитайте у свого хостинг-провайдера, чи підтримує сервер HTTP/2.
- Встановіть для сайту SSL-сертифікат.
З мінусів — протокол підходить для сайтів з SSL, але не завжди підходить сайтам без нього: в таких випадках швидкість буде нижче. Також HTTP/2 вимагає більше пам’яті, ніж HTTP/1.1. А якщо мова йде про додатки, де багато операцій з великими файлами та аудіо- або відеострімінгом, HTTP/2 буде працювати повільніше, ніж його попередники.
Ще один негативний момент — погана швидкість завантаження сайтів по HTTP/2 через мобільні пристрої, що використовують 3G-інтернет. У разі використання 3G час очікування складе понад 300 ms і може коливатися. А HTTP/2 погано показує себе при тривалій затримці відповіді. За таких умов HTTP/1.1 буде швидше, ніж HTTP/2.
Підсумовуючи: HTTP/2 варто використовувати для сайтів з SSL і не варто використовувати, якщо необхідна робота з аудіо- та відеопотоками або великими файлами.
85% користувачів не будуть купувати через вебсайт, якщо вони не впевнені, що їх дані передаються безпечно.
Захистіть свій сайт з SSL-сертифікатом і не втрачайте клієнтів!
Відповідає Senior SEO-спеціаліст Promodo Олександр Уткін
Як хостинг впливає на швидкість завантаження сайту?
Щоб сайт швидше завантажувався на стороні хостингу, зверніть увагу на його апаратне та програмне забезпечення:
- Диски: ми рекомендуємо NVMe.
- Процесор: чим швидше він буде, тим краще. Орієнтуватися можна на кількість балів на сайті cpubenchmark.net.
- Програмне забезпечення: найбільше на швидкість віддачі контенту впливає веб-сервер. Рекомендуємо використовувати LiteSpeed або nginx. Також має значення версія PHP і різні системи кешування, наприклад, Redis.
Але навіть найкращий хостинг збільшує швидкість завантаження лише частково. Хостинг не вплине значно на результати, якщо є проблеми з архітектурою сайту, наприклад, важкі запити до бази або неоптимізовані картинки.
Стаття з теми:
Який фактор більше за інших впливає на швидкість роботи сайту?
Наявність сторонніх скриптів, всіляких спливаючих вікон, які в 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 та максимально прискорити сайт з його допомогою, приходьте на курс пошукової оптимізації в Promodo Academy. Олександр Уткін — один з лекторів, і він із задоволенням відповість на всі ваші запитання наживо :)
Пишіть в коментарях, що ще хочеться дізнатися у фахівців з SEO та хостингу, і ми розповімо про це докладніше!
Хочу опубліковати статтю у блозі HOSTiQ!
