замовити дзвінок
+38 057 755-48-00
Starting a new project?
отримати консультацію
28
1

Останні кілька років Google активно працює над створенням метрик для оцінки продуктивності сайтів. Він піднімає вище в пошуковій видачі ті, які завантажуються швидше. Ставка робиться на досвід користувача: чим менше швидкість завантаження, тим краще сайт ранжується. У вкрай тісній конкуренції в онлайн сегменті швидкість завантаження сайту - ключовий фактор.

Аналіз ресурсу Backlinko (результати тесту для більш, ніж 5 мільйонів сайтів), показує, що:

  • десктопна версія завантажується 10 секунд;
  • мобільна - усі 27 секунд.

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

Середньостатистичний користувач довше 2-3 секунд і не буде чекати, але ж нам потрібно перетворити цього користувача в клієнта. Сьогодні й поговоримо про те, як можна це зробити.


1. Навіщо вимірювати швидкість завантаження?

Щоб відповісти на це питання, почнемо з простого прикладу.

Ось ви бажаєте купити взуття й вбиваєте відповідний запит в Пошук, обираєте сайт, клікаєте мишкою й чекаєте, чекаєте, чекаєте… знайома ситуація?
Замість карток товару на екрані видно тільки білий фон, і поки щось з’явиться, ви вже будете на іншому сайті розглядати п’яту пару взуття. Особисто я б так і вчинила.

У новому дослідженні аудиторської компанії Deliotte (2020) перевірили, як зменшення швидкості завантаження на 0.1 секунду на мобільних телефонах впливає на конверсію і показник відмов для 37 сайтів. У підсумку, конверсія збільшилася на 8.4%, а bounce rate зменшився на 8.3%.

Звідси й відповідь на питання “навіщо” – чим менше сайт завантажується, тим більше прибутку і клієнтів ви можете отримати.


2. Причини повільного завантаження сайтів

Проблема зі швидкістю завантаження знайома всім.

Давайте з’ясуємо, що впливає на час завантаження контенту.

  • місце розташування сервера та навантаження на нього. Якщо сервер знаходиться в Австралії, то швидкість доступу до сайту в українця та австралійця буде різною. На користь останнього, звичайно ж. 
  • неоптимізований код. Веб сторінка складається з html-коду, css-таблиць і JS коду. Якщо JS знаходиться вгорі html-документа – він буде рендеритися першим, не дозволяючи довантажувати інші елементи сторінки. Захаращеність коду (зайві рядки, не об’єднані таблиці стилів і т. і.) також уповільнює процес обробки коду.
  • надлишок плагінів та доповнень. Напевно, сайти великою кількістю примочок у вигляді кнопок соцмереж, показу схожих публікацій, онлайн оплати та всього такого виглядає набагато краще. Хоча й вантажиться довше.
  • відсутність кешування. У процесі першого відвідування браузер може зберігати такі елементи, як: зображення, шрифти, скрипти й т. п., щоб зменшити кількість звернень до сервера. Без цієї функції сайт постійно звертатиметься до сервера, щоб завантажити їх.
  • відео-контент. Велика вага, ненадійний хостинг та відсутність оптимізації робить відео “важким”. При цьому воно може відтворюватися переривчасто або взагалі бути недоступним.
  • картинки. Та ж ситуація, що з попереднім пунктом. Невідповідний розмір, кількість та вага негативно впливають на швидкість завантаження інтернет-ресурсу.

3. Практична частина

Провести свій тест дуже легко. Потрібно знайти онлайн-сервіси та вставити туди адресу сайту або сторінки. Та й довго чекати не доведеться – аналіз триває не більше хвилини.

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

Щоб розібратися, перевіримо швидкість завантаження однієї сторінки сайту з продажу мобільних телефонів (https://***.*****.ru/mobilnye-telefony/nedorogie-smartfony-s-4g/amp/) та поділимося з вами ключовими висновками й поясненнями.

Це крутий інструмент від компанії Гугл, який вимірює основні показники завантаження:

  1. First Contentful Paint (FCP) – час до першої відмальовки будь-якого контенту (більш детально щодо складових Core Web Vitals – в статті “Core web vitals: фактор ранжування Google”).
  2. Speed Index (SI) – індекс швидкості завантаження вмісту.
  3. Time to Interactive (TTI) – час до того, як сторінка стане повністю готовою до взаємодії з користувачем.
  4. First Meaningful Paint (FMP) – час завантаження основного вмісту сторінки.
  5. First Input Delay (FID) – час затримки до взаємодії користувача з сайтом.
  6. Cumulative Layout Shift (CLS) – сукупне зміщення макету.

В результаті користувач бачить звіт з імітацією завантаження сторінки для мобільних і ПК (рис. 1-3) і рекомендаціями щодо поліпшення продуктивності.

*Лайфхак: щоб побачити звіт російською, поставте російську як основну мову хрому).

Інтерфейс у сервісу простий і зрозумілий. Плюс є пояснення (можна перейти за посиланнями у звіті на відповідні статті) та спливаючі підказки.

За замовчуванням перевірка проводиться для мобільної версії сайту і це логічно. В якості тестованого пристрою використовується Moto G4, який змінив Nexus 5.

Скорость загрузки сайтов

Рис. 1 – Перша частина звіту для мобільних

Скорость загрузки сайтов

Рис. 2 – Друга частина звіту PageSpeed Insights

Скорость загрузки сайтов

Рис. 3 – Результати аналізу для десктопної версії. Тут справи йдуть краще

На момент тесту вже є бета-версія Lighthouse 6, але мені перевірити нічого не вдалося.

Дані сервісів Core Web Vitals та Lighthouse зібрані в одну сторінку. Результат оцінюється від 1 до 100 балів, але ніде не вказано, скільки секунд в цілому потрібно сторінці для повного завантаження.

Висновки: для нашого сайту швидкість на комп’ютері оцінюється в 97 балів (дуже добре), а для мобільних – 74 (середнє). Другий результат пояснюється великим часом відтворення великого контенту (LCP) і загальним часом до того як сторінка стане інтерактивною (TTI).

Російськомовний сервіс з можливістю перевірки швидкості завантаження сайтів з Росії, Білорусі, України та Німеччини.

Показники, що вимірюються:

  • загальний час до взаємодії;
  • розмір всієї сторінки;
  • кількість здійснених запитів.

Також показаний процес відтворення макета сторінки на мобільному пристрої.

Скорость загрузки сайтов

Рис. 4 – Перевірка у Loading Express

*Loading Express показав відмінний результат. Перевірка швидкості проводилася вранці, відвідувачів було небагато.

Якщо дивитися подробиці, то бачимо: скільки важать різні дані сторінки, затримку введення і першу відмальовку сторінки в мілісекундах. Окремо показується час виконання JS.

Висновки: ранковий вимір проводився тільки для мобільного на швидкості 3G і підсумковий результат завантаження – 2.3 секунди (дуже добре). Увечері сторінка завантажилася за 2 секунди. Час відповіді сервера – 618 мс, а час максимальної затримки введення всього 101 мс.

  • SeoLik, вкладка “Швидкість”

Ще один російськомовний аналізатор, в основі якого лежить Гугл перевірка, так як результат відображається в балах:

Скорость загрузки сайтов

Рис. 5 – Результат SeoLik для ПК

Скорость загрузки сайтов

Рис. 6 – Результат для мобільного

Є звіт, в якому три оцінки (погано, добре, зверніть увагу) з відповідними позначками. Але на підставі яких значень ставляться ці оцінки, незрозуміло.

Скорость загрузки сайтов

Рис. 7 – Звіт SeoLik

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

Це повністю англомовний сервіс з можливістю вибору міста (всього 7), з якого буде проводитися аналіз.

Скорость загрузки сайтов

Рис. 8 – Тест швидкості завантаження в сервісі Pingdom Tools (вимірювання з Лондону)

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

Висновки: занадто довга відмальовка сторінки займає 5 секунд для ПК. Стиснені дані, відсутність кешування, безліч файлів і перетворень DNS на думку Pingdom, істотно гальмують час відображення даного ресурсу.

Як і попередній сервіс, показує час до повного завантаження сайту і має 2 показники: PageSpeed Score та YSlow.
Перший виводить процентне відношення швидкості вашого сайту до інших сайтів, які аналізував GTmetrix за останні 30 днів.
А YSlow оцінює сайт за 23 правилами Yahoo для високопродуктивних сайтів, та видає відсоток відповідності.

Саме тестування проводилося з Ванкуверу (Канада). Щоб поміняти місто, пристрій, браузер і тип з’єднання, треба зареєструватися. 

Скорость загрузки сайтов

Рис. 9 – Підсумки тесту в GTMetrix

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

Скорость загрузки сайтов

Рис. 10 – Показники PageSpeed

Висновки: GTmetrix показав, що є проблема з оптимізацією зображень, наявність зайвого CSS/HTML коду та відсутність CDN

І знову інгліш. У головному вікні потрібно вибрати:

  • десктопну або мобільну версію;
  • роздільну здатність екрану (16:9 – максимальне значення);
  • мiсто;
  • браузер;
  • рівень сповільнення інтернету.

У цьому тесті значення видно на прикладі нижче:

Скорость загрузки сайтов

Рис. 11 – Перевірка завантаження сайту на Uptrends.com

Наведено бали з тесту швидкості Гугл. У першому прикладі ми вибрали звичайне з’єднання (без прискорень/сповільнень). А ось якщо виберемо волоконне, то результат вже буде краще:

Скорость загрузки сайтов

Рис. 12 – Результати перевірки після зміни типу з’єднання

Так само, як і в GTmetrix, сервіс надає детальну таблицю з аналізом компонентів і часом їх завантаження, і на додаток – поради щодо оптимізації.
Для мобільної версії обрали iPhone X, швидкість – 4G та Nexus 7 (3G).

Скорость загрузки сайтов

Рис. 13 – Результат для iPhone X

Скорость загрузки сайтов

Рис. 14 – Результат для Nexus 7

Ще можна вибрати Samsung, LG, Google Pixel, Google Nexus і 2G, 3G швидкість. Якщо дивитися на загальний час завантаження, то 3 секунди – це саме той золотий стандарт, про який ми говорили.
Але PageSpeed незадоволений, а пояснюється це просто – там використовується інший девайс для перевірки.

Висновки: У контрольованих умовах Uptrends вказав на проблеми з форматом і розміром картинок. Натиснувши на підказку, можна побачити, скільки важать зображення. Також сервіс вказав на невикористаний джаваскрипт і знайшов цей файл. Для мобільної версії збільшився час отримання файлів, а проблеми з зображеннями та JS залишилися ті ж.

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

Порівняла з Гугл перевіркою – результати практично однакові.

Скорость загрузки сайтов

Рис. 15 – Швидкість завантаження від Гугл

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

Сервіс здійснює різну кількість підключень і робить три послідовних тести. Можна використовувати як для звичайного комп’ютера, так і для телефону:

Скорость загрузки сайтов

Рис. 16 – Оцінка продуктивності

Скорость загрузки сайтов

Рис. 17 – Тести перевірка швидкості сервісом Web Page Test

Крім стандартної таблиці результатів, є ще одна – таблиця аналізу з’єднань, в якій кількість рядків=кількості з’єднань. Це зроблено для того, щоб побачити, скільки TCP-з’єднань було, та які дані по кожному завантажувалися (Waterfall chart відображає процес завантаження кожного файлу окремо, а не цілого каналу).

Нові TCP-з’єднання використовувати дорого, можливо, але деякі можна використовувати повторно, що заощадить і час, і гроші.

Скорость загрузки сайтов

Рис. 18 – Таблиця з результатами використання з’єднань

Висновки: Детальний результат завантаження сторінки в графіках і таблицях показав, що знову проблема в картинках, так як вони займають більшу частину ваги сторінки та джаваскрипт код. В результаті видно, що загальний час завантаження більше 4-х секунд, але інтерактивною сторінка стала після 1.9 секунд. Для десктопної версії вибрали місто Чикаго і браузер Хром, але загальний час 5 секунд, інтерактивність з’являється після 1.6 секунди. Проблеми ті ж самі – великі зображення і неоптимізовані скрипти.

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

Скорость загрузки сайтов

Рис. 19 – Перевірка у Sitespeed.me

Висновки: замірювання в нашому випадку було проведене з незрозумілих причин всього з двох серверів: з Амстердаму та Каліфорнії. Запитів теж було здійснено замало, але з Амстердаму доступ стався всього за секунду і найдовший процес – час до першого байта (TTFB). У Каліфорнії швидкість завантаження сторінки склала 2.7 секунди, з яких SSL-рукостискання зайняло більше 1 секунди.


Выводы

Час – найцінніший ресурс. Ми не хочемо чекати, нам потрібно тут і зараз. При цьому, рекомендований час для завантаження сайтів – 5 секунд і менше на швидкості 3G. Але й це багато.

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

Для Google цей показник має значення, тому що чим швидше вантажиться сайт, тим вище він піднімається в пошуковій видачі. А чим вище піднімається, тим більше переходів, продажів та прибутку приносить… ну, ви зрозуміли!

А якщо не бажаєте самі розбиратися, довірте це нам. Команда ITForce проведе повну оцінку швидкості завантаження сайту, знайде всі проблеми й запропонує комплексний план оптимізації. 


Что такое SEO

Що таке SEO та навіщо потрібна пошукова оптимізація

Core Web Vitals

Core web vitals: фактор ранжування Google

Підпишіться на наші оновлення
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Ви вже підписані на нашу розсилку!

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.