Starting a new project?
отримати консультацію
Залиште свої контактні дані, наш менеджер передзвонить вам.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
| 1. Навіщо вимірювати швидкість завантаження? |
| 2. Причини повільного завантаження сайтів |
| 3. Практична частина |
| Висновки |
Останні кілька років Google активно працює над створенням метрик для оцінки продуктивності сайтів. Він піднімає вище в пошуковій видачі ті, які завантажуються швидше. Ставка робиться на досвід користувача: чим менше швидкість завантаження, тим краще сайт ранжується. У вкрай тісній конкуренції в онлайн сегменті швидкість завантаження сайту - ключовий фактор.
Аналіз ресурсу Backlinko (результати тесту для більш, ніж 5 мільйонів сайтів), показує, що:
Звичайно, це загальний час для повного завантаження сайту з усіма картинками, скриптами, кнопками та іншою інформацією. І, все ж, це дуже, ну дуже довго.
Середньостатистичний користувач довше 2-3 секунд і не буде чекати, але ж нам потрібно перетворити цього користувача в клієнта. Сьогодні й поговоримо про те, як можна це зробити.
Щоб відповісти на це питання, почнемо з простого прикладу.
Ось ви бажаєте купити взуття й вбиваєте відповідний запит в Пошук, обираєте сайт, клікаєте мишкою й чекаєте, чекаєте, чекаєте… знайома ситуація?
Замість карток товару на екрані видно тільки білий фон, і поки щось з’явиться, ви вже будете на іншому сайті розглядати п’яту пару взуття. Особисто я б так і вчинила.
У новому дослідженні аудиторської компанії Deliotte (2020) перевірили, як зменшення швидкості завантаження на 0.1 секунду на мобільних телефонах впливає на конверсію і показник відмов для 37 сайтів. У підсумку, конверсія збільшилася на 8.4%, а bounce rate зменшився на 8.3%.
Звідси й відповідь на питання “навіщо” – чим менше сайт завантажується, тим більше прибутку і клієнтів ви можете отримати.
Проблема зі швидкістю завантаження знайома всім.
Давайте з’ясуємо, що впливає на час завантаження контенту.
Провести свій тест дуже легко. Потрібно знайти онлайн-сервіси та вставити туди адресу сайту або сторінки. Та й довго чекати не доведеться – аналіз триває не більше хвилини.
А ось з результатами потрібно буде розбиратися, тому що назви метрик що англійською, що російською, будуть незрозумілі більшості користувачів.
Щоб розібратися, перевіримо швидкість завантаження однієї сторінки сайту з продажу мобільних телефонів (https://***.*****.ru/mobilnye-telefony/nedorogie-smartfony-s-4g/amp/) та поділимося з вами ключовими висновками й поясненнями.
Це крутий інструмент від компанії Гугл, який вимірює основні показники завантаження:
В результаті користувач бачить звіт з імітацією завантаження сторінки для мобільних і ПК (рис. 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 мс.
Ще один російськомовний аналізатор, в основі якого лежить Гугл перевірка, так як результат відображається в балах:
Рис. 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
І знову інгліш. У головному вікні потрібно вибрати:
У цьому тесті значення видно на прикладі нижче:
Рис. 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 проведе повну оцінку швидкості завантаження сайту, знайде всі проблеми й запропонує комплексний план оптимізації.
Ви вже підписані на нашу розсилку!
Підтвердіть свій email для завершення підписки.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.