Як перевірити та збільшити швидкість завантаження сайту

Що таке швидкість завантаження сайту та чому вона важлива

Час, що проходить після кліку на посилання до повного завантаження сайту – це і є та швидкість, яка впливає на ранжування в пошукових системах. Це не єдиний фактор ранжування, але його варто враховувати.

Через низьку швидкість сайту складно потрапити в топ навіть за умови повної відповідності інших параметрів вимогам пошукових систем. Якщо 2 сайти мають приблизно однакові показники, то пошукова система розмістить вище у видачі швидший сайт.

Для комерційного ресурсу повільне завантаження сторінок означає втрату клієнтів і доходів. Статистика від WebSiteBuilderExpert надає чимало фактів для роздумів:

1. Кожен четвертий користувач покине сайт, який провантажується довше 4 секунд.
2. 53% мобільних користувачів покинуть сторінку сайту, якщо вона завантажується довше 3 секунд.
3. Кожна секунда затримки зменшує задоволеність відвідувачів на 16%.
4. 46% користувачів більше не повертаються на повільний сайт.
5. 64% незадоволених покупців наступного разу купуватимуть в іншому місці.
6. 82% покупців говорять, що швидкість завантаження сторінки впливає на їхнє рішення про купівлю.

У цьому дослідженні (https://www.thinkwithgoogle.com/intl/en-emea/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/) можна побачити прямий взаємозв'язок між часом завантаження та відсотком відмов:

1. Коли час завантаження сторінки становить від 1 до 3 секунд – ймовірність відмов збільшується на 32%.
2. Коли час завантаження сторінки становить від 1 до 5 секунд – ймовірність відмов збільшується на 90%.
3. Коли час завантаження сторінки становить від 1 до 6 секунд – ймовірність відмов збільшується на 106%.
4. Коли час завантаження сторінки становить від 1 до 10 секунд – ймовірність відмов збільшується на 123%.

На підставі цих фактів ми можемо дійти висновку, що людей дратує повільне завантаження сторінок і це погано позначається як на конверсії, так і на поведінкових факторах. Це складається в загальне враження про компанію – особливо якщо бізнес ведеться лише онлайн.

Пошукові системи враховують реакції користувачів, тому алгоритм ранжування Speed Update від Google автоматично переміщує вниз повільні сторінки.

А завдяки Mobile First Indexing, тривале завантаження мобільної версії сайту призводить до втрати позицій у видачі для десктопної версії. Тому варто відстежувати й контролювати швидкість завантаження сторінок сайту.

Як перевірити швидкість завантаження сайту

Перевірити швидкість завантаження сторінок можна за допомогою найпопулярніших сервісів. Найчастіше достатньо вставити URL-сайт в спеціальне поле і натиснути кнопку для запуску тесту. Іноді можна вибрати тип пристрою (телефон або комп'ютер) та географічну зону для перевірки.

Найкращі сервіси для перевірки швидкості

1. PageSpeed Insights. Мінімалістичний інструмент від Google для перевірки продуктивності сторінок і сайту загалом. Він оцінює швидкість завантаження основного контенту, швидкість завантаження для взаємодії з сайтом і видає оцінку за 100 бальною шкалою.

Все, що знаходиться в проміжку між 90 та 100 балами, вважається хорошим результатом. А якщо ваш сайт набрав менше ніж 90 балів, то йому потрібна оптимізація. Для перевірки окремої сторінки це також справедливо.

PageSpeed Insights дає рекомендації щодо оптимізації та показує, наскільки швидше завантажуватиметься сайт або сторінка, якщо виконати ті чи інші дії. Використовує для аналізу технологію Lighthouse.

2. Для мобільних сторінок і веб-додатків краще одразу використовувати Google Lighthouse. Це інструмент з відкритим кодом від Google, який оцінює веб-сторінки різними способами. Зокрема, він імітує завантаження сторінки в мобільній мережі на пристрої з середніми можливостями.

Цей сервіс проведе порівняння зі зразком за якістю верстки, використанням кешу та іншими параметрами. За підсумками перевірки покаже продуктивність, доступність та рівень SEO-оптимізації сайту. Надає технічні рекомендації щодо покращення показників швидкості.

3. Pingdom Tools. За допомогою цього інструменту можна швидко:

• провести аналіз;
• виявити проблеми, що уповільнюють завантаження;
• знайти та усунути помилки;
• оцінити час завантаження зображень, скриптів і CSS-стилів.

Як і попередній сервіс, Pingdom Tools запропонує заходи щодо прискорення ресурсу.

4. GTmetrix. Багато в чому нагадує Pingdom Tools, але з більш зручними звітами. Він видасть дані про:

• розташування сервера;
• запити користувачів;
• динаміку швидкості сайту (історія перевірок).

GTmetrix працює на базі Lighthouse. З його допомогою буде легко відслідковувати результати дій щодо оптимізації.

5. Webpagetest. Також зручний та функціональний сервіс, в якому можна провести перевірку швидкості завантаження з імітацією геолокації, браузера чи пристрою. Інструмент видає бали за різними показниками та дозволяє спостерігати за динамікою швидкості завантаження в історії.

Показники швидкості завантаження сторінок

Нормальна швидкість – це той рівень швидкодії, який є комфортним для відвідувачів ресурсу та прийнятним для пошукових систем. Тут є градація.

Вважається, що висока швидкість завантаження до 1 секунди, середня – 1-3 секунди, а низька становить понад 3 секунди і потребує негайної оптимізації. Це підтверджується нашою практикою та численними дослідженнями.

Якщо для окремих проєктів швидкість завантаження в 3-5 секунд вважається критично низькою, то для інтернет-магазинів і маркетплейсів такий показник неприпустимий. Саме з 3 секунди починається критичний відтік відвідувачів, що позначається на продажах.

Вплив швидкості сайту на ранжування в пошукових системах

Для Google швидкість завантаження сайту, яка вимірюється в секундах – це лише один з численних факторів ранжування. А для людей повільне завантаження сайту – це вагома причина покинути його.

Відтік відвідувачів через повільне завантаження сайту формує високий відсоток відмов. Через високий відсоток відмов позиції сайту будуть падати і ця тенденція збережеться доти, доки не будуть вжиті заходи для його прискорення.

Ще один важливий момент пов'язаний з індексацією. Пошукові системи виділяють певний час на індексацію контенту. Якщо за цей час вони не встигнуть обробити всі елементи на сторінці, між запитами користувачів і результатами пошуку з'являться розбіжності. Тоді зниження позицій у видачі буде очікуваним.

Вимоги Google до швидкості завантаження сайту

Класифікація від Google виглядає доволі просто.

Для десктопних версій сайту швидкість завантаження:

• висока – до 1 секунди;
• середня – від 1 до 2,1 секунди;
• низька – довше 2,1 секунди.

Для мобільних версій сайту швидкість завантаження:

• висока – до 1,6 секунд;
• середня – від 1,6 до 3 секунд;
• низька – довше 3 секунд.

Цифри для мобільних пристроїв трохи відрізняються, оскільки Інтернет на них переважно слабкіший, якщо не підключатися до мережі WI-FI.

Під пониження в пошуковій видачі потрапляють лише сайти з останньої, повільної категорії. Від цього рубежу треба триматись подалі, а якщо вже досягнули його – швидко виправляти ситуацію.

Як Google оцінює швидкість завантаження

Google враховує різні етапи завантаження та оцінює швидкість за 3 основними параметрами:

LCP (Largest Contentful Paint) – час завантаження основного контенту на сторінці. Це той контент, який дає користувачу уявлення про зміст і призначення сторінки, він критично важливий з погляду відсотка відмов.

INP (Interaction to Next Paint) – час між дією користувача та проявом змін на сайті. Це важливо з погляду взаємодії, отримання та оновлення інформації, конверсій.

Наприклад, покупець може перейти у потрібну категорію, відкрити картку товару та додати його до кошика. Або зареєструватися на сайті, залишити заявку, підписатись на розсилку. Зволікання в інтерактивності створюють відчуття, що сайт завис, тому краще їх уникати.

З березня 2024 цей показник замінює FID (First Input Delay). Він відрізняється тим, що вимірює швидкість всіх взаємодій користувача з сайтом, тоді як FID вимірював швидкість тільки першої взаємодії, і це не давало повного розуміння ситуації.

CLS (Cumulative Layout Shift) – оцінка зсуву верстки під час відкриття чи оновлення сторінки. Показник відображається в балах, фіксуються лише видимі для користувача зрушення. Вони пов'язані з тим, що деякі частини контенту провантажуються швидше за інші.

Ці параметри входять до Core Web Vitals. На основі цих показників можна оцінити комфорт користувачів від використання сайту. Google враховує ці та інші показники для оцінки якості сайту загалом.

Як збільшити швидкість завантаження сайту

На швидкість відображення веб-сторінки впливає низка факторів:

1. Кількість HTTP-запитів серверу.
2. Валідність HTML коду.
3. Вага, розмір і формат зображень.
4. Обсяг коду CSS і JS.
5. Місце розташування елементів CSS та JS на сторінці.
6. Кількість редиректів сторінки.
7. Кешування вмісту.
8. Налаштування стиснення файлів.
9. Використання системи CDN.

За умови грамотного підходу все можна оптимізувати. Тож давайте розглянемо докладніше.

Перевірка та зменшення часу відповіді сервера

На відміну від швидкості повного завантаження час відповіді сервера – це період від браузерного запиту до виведення на екран першого байта сторінки.

Для успішного ранжування цей показник не може перевищувати 200 мілісекунд. Оптимальний результат – у 4 рази менше. Якщо час відповіді сервера перевищує 200 мілісекунд, то треба вживати заходів. Перевірити час відповіді сервера можна за допомогою:

• DevTools;
• Google Analytics;
• Netpeak Spider;
• Serpstat;
• GTmetrix та ін.

Слід спиратися на просте правило – яким би не був ваш результат, його завжди потрібно прагнути скоротити. Це можна зробити за допомогою CDN (Content Delivery Network) – географічно розподіленої мережі серверів.

CDN завантажує веб-файли з найближчого сервера. За рахунок скорочення відстані між сервером і користувачем графічний та текстовий контент завантажується швидше. Також звертайте увагу на якість хостингу – вона безпосередньо пов'язана з потужністю сервера.

Технічна оптимізація сайту

Під час розробки та адміністрування могли бути допущені помилки, які призвели до повільного завантаження. Також можливі атаки хакерів, які впливають на загальну працездатність сайту. Серед найпоширеніших помилок:

• зайві редиректи;
• недотримання валідності верстки;
• наявність вірусів та шкідливого коду;
• поганий код бекенда;
• зайві запити до бази даних;
• відсутність кешування.

Будь-яка з цих помилок негативно позначатиметься на швидкості завантаження, заважатиме просуванню та правильній індексації сайту, що призводить до заниження позицій у видачі.

Тому краще робити SEO-оптимізацію на етапі створення сайту та залучати SEO-фахівця під час поточної роботи.

У випадку з наявним сайтом треба почати з SEO-аудиту – це допоможе визначитися з подальшими діями та усунути помилки. Для перевірки на віруси можна використовувати Quterra, Sucuri та інші популярні сервіси.

Оптимізація CSS і Javascript

Чим більше перевантажений сайт, тим повільніше завантажуються його сторінки. Прискорити процес можна 5 способами:

1. Здійснити мініфікацію коду за допомогою спеціальних сервісів: Minifier, Willpeavy, CSS Compressor.
2. Використовувати правильну послідовність завантаження ресурсів, здійснити правильне компонування CSS – на початку сторінки для поступового відображення.
3. Мінімізувати кількість JavaScript коду для відображення першого екрана (перемістити його в кінець сторінки, щоб браузер завантажував скрипти після текстів і зображень).
4. Підключити JavaScript і CSS за типами сторінок, щоб унеможливити витрати часу завантаження на файли, які не використовуються.
5. Відмовитись від запитів @import url("style.css").

Робота з контентом на сайті

Розмаїття візуального контенту позначається на швидкості завантаження ресурсу, причому показники різних сторінок можуть сильно відрізнятися.

Рекомендуємо перевірити швидкодію кожної сторінки окремо та працювати з тими, які дійсно потребують оптимізації.

Стиснення зображень

Не завжди доцільно використовувати фотографії з високою роздільною здатністю, особливо для мобільних версій сайтів. Для економії місця їх слід стискати та конвертувати.

Враховуйте, що зображення має бути якнайменше, але без помітної оком втрати якості при його оптимізації. Програми Screaming Frog і Netpeak Spider позначають як помилку графічні файли розміром понад 100 Кб.

Варто використовувати GZIP стискання, завдяки якому без втрати якості зображень можна вдвічі скоротити обсяг завантажуваного контенту – тим самим збільшити швидкість завантаження.

Щоб «полегшити» зображення, можна зменшити їхні фізичні розміри, але є й інший спосіб – оптимізувати параметри збереження.

Файли зображень часто містять надлишкові мета-дані, видалення яких не вплине на якість, але скоротить розмір зображення.

Якщо у вас є відео, то для прискорення завантаження першого видимого контенту краще розмістити його нижче на сторінці та використовувати відкладене завантаження (lazy loading). Тоді відео завантажуватиметься в міру прокручування сторінки (скроллу), що добре з точки зору поведінкових факторів.

Оптимізація шрифтів

Веб-шрифти (за їх відносно незначущої ваги) можуть негативно впливати на швидкість завантаження. Чинники впливу такі:

1. Кількість шрифтів. Різноманітність буде зайвою. На швидких сайтах зазвичай використовується 1–3 шрифти з не більше, ніж 3 стилями для кожного.
2. Вибір шрифтів. Некоректні набори шрифтів і завантаження варіантів, які не підтримують поточну мову сайту – поширена помилка.
3. Показ під час завантаження. Щоб відвідувачам не доводилось дивитися на порожній екран в очікуванні завантаження файлу шрифту, слід додати в стилі властивість «font-display:swap», завдяки чому текст буде до завантаження відображатися системним шрифтом.
4. Використання шрифтів WOFF2. Це стисла версія формату WOFF. WOFF2 використовує алгоритм Brotli для стиснення даних шрифту, завдяки чому розміри файлів стають меншими, ніж у шрифтів WOFF. В результаті шрифти на сайті провантажуються швидше.

Застосування будь-якого інструменту оптимізації шрифтів слід супроводжувати тестами швидкодії, щоб дізнатись найрезультативніший метод підвищення швидкості завантаження.

Висновки та рекомендації

Користувачі оцінюють комфорт від використання сайту на рівні відчуттів. І порівнюватимуть його не стільки з вашими конкурентами, скільки з добре знайомими для себе майданчиками. Тому між швидкістю завантаження та комерційним успіхом ресурсу є зв'язок.

Досягти високої швидкості завантаження складно, але можливо. Для цього треба зважити необхідність використання деяких плагінів, функцій та графічного контенту.

Перевантаження цими елементами веде до уповільнення сайту, тому треба знайти баланс між красою, функціональністю та швидкістю. Можливо, від чогось доведеться відмовитись або переналаштувати по-іншому. У деяких випадках знадобляться серйозні доопрацювання.

Для детального розгляду конкретного проєкту краще провести тестування. За підсумками перевірки наш SEO-фахівець дасть рекомендації щодо просування та доопрацювань на сайті. Коли ви замовляєте ці послуги у нас, то заручаєтесь надійною підтримкою.