Швидкість завантаження сайту — це час, який минає від моменту переходу користувача за посиланням до відображення усього вмісту веб-сторінки. За цей період браузер отримує перший пакет інформації, технічними словами «перший байт з сервера». Цей показник вимірюється в секундах чи мілісекундах окремо на десктопних і мобільних пристроях. В статті ми розповімо детально як проводити аналіз швидкості сайту, на що звертати увагу та якими інструментами користуватися.

Швидкість сторінки і швидкість сайту — це два різні показники. Перший стосується однієї конкретної сторінки, а другий являє собою середнє значення для декількох вибіркових сторінок на сайті.

Про що йде мова?

Навіщо потрібен аналіз швидкості сайту?

Уявіть: ви прийшли у ресторан, щоб повечеряти після важкого робочого дня, але змушені 5 хвилин чекати офіціанта. Минає ще 10 хвилин після того, як ваше замовлення прийняли, але обслуговують усі столики, крім вашого. Ще 20 хвилин очікування, і ви вже не звертаєте увагу на смак страви, її аромат та вишуканість. Вам здається, що вечеря не коштує тих грошей, які ви за неї заплатили. Не лишаючи чайових, ви зїдаєте вміст тарілки і йдете додому, більше ніколи не повертаючись у цей заклад.

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

Середній час завантаження в секундах

На жаль, значна кількість інтернет-магазинів та сайтів інших типів мають проблеми із завантаженням в десктопі через велику кількість контенту, інтерактивних елементів та технічних недопрацювань. Ще гіршою є ситуація для мобільних пристроїв. Більше 70% користувачів, які проводять час в інтернеті зі смартфонів та планшетів, стикаються з проблемою повільного або неповного завантаження. Відомо, що коефіцієнт конверсії на мобільних пристроях нижчий, ніж на десктопних. І це при тому, що більше 50% загального веб-трафіку припадає на мобільні пристрої.

«Пам’ятайте, що мобільні сторінки розглядаються окремо для результатів SEO. Мобільні сторінки вашого сайту не успадковують автоматично SEO-рейтинг основного сайту. Користувачам, які здійснюють пошук на мобільних пристроях, рейтинг сторінки розраховується окремо на основі швидкості мобільної сторінки сайту, а не на основі швидкості основної сторінки сайту. Це означає, що власники сайтів повинні приділяти стільки ж уваги (якщо не більше) швидкості мобільної версії сайту». «The Importance Of Page Speed Optimization», — Chuck Kim, former Forbes Councils Member

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

  • Високий показник відмов. Згідно зі статистикою Google, ця цифра підвищується на 32%, якщо час завантаження сторінки становить 3 секунди і більше.
  • Мала глибина перегляду сторінки. Якщо великі за обсягом файли завантажуються надто довго чи некоректно, або у випадку коли сайт «підвисає» на смартфоні, користувач припинить взаємодію з веб-ресурсом.
  • Низький рейтинг у видачі пошукових систем. Швидкість сайту безпосередньо впливає на SEO.
  • Зниження конверсії. Погане SEO та низький трафік негативно впливають на ваші продажі. Після одного з досліджень компанія Walmart заявила, що з кожною секундою збільшення швидкості веб-сторінки її конверсія зростає на 2%.
  • Негативний вплив на репутацію бренду. Користувачі не будуть додавати повільний сайт в закладки та точно не порадять його друзям. Люди асоціюють із рівнем компанії та якістю продукції не лише дизайн сайту і контент, але і його юзабіліті.

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

📌 Тест в блозі: Як Google оцінює ваш сайт

Показники швидкості сайту чи веб-сторінки

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

  1. Найбільший вміст сторінки (LCP). Цей показник стосується часу завантаження сторінки. Зокрема, він показує, що основний вміст сторінки завантажується належним чином. 
  2. Затримка першого введення (FIP). Це час від моменту, коли користувач вперше взаємодіє з сайтом, до моменту, коли браузер зможе належним чином відреагувати на цю взаємодію. Від параметра залежить інтерактивність сторінки. 
  3. Кумулятивний зсув макета (CLS). Відображає візуальну стабільність сторінки. Якщо макет зміщується, користувачі можуть випадково натиснути не ту кнопку на сторінці, що викликає роздратування та змушує покинути сайт.

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

Search signals for page experience (Сигнали пошуку для досвіду роботи зі сторінкою)
Щоб бачити цю інфографіку у повному розмірі, то завантажте Search signals for page experience (Сигнали пошуку для досвіду роботи зі сторінкою) PDF, 63,9 KB

Важливими показниками є також завантаження сторінки (Page Load Time), час першого зображення (First Contentful Paint), кількість запитів до сервера (Number of Requests), розмір сторінки (Page Size) та ін. Оцінку кожного з них та рекомендації щодо оптимізації цих параметрів можна отримати за допомогою одного із сервісів перевірки швидкості сайту. 

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

У цій статті ми розглянемо популярні сервіси аналізу швидкості сайту. Для демонстрації можливостей кожного із них проаналізуємо сайт Rozetka.

number for list one

WebPageTest

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

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

Перша частина результатів аналізу — підсумки роботи, а саме швидкість, якість верстки та безпека з’єднання.

«Швидко? Непогано… Цей сайт швидко підключився і доставив початковий код. Він почав відображати вміст дуже швидко. Не було жодних запитів на блокування рендерингу.

Чи можна ним користуватися? Виглядає чудово! Цей сайт має хорошу стабільність верстки.

Чи стійкий він? Виглядає чудово! Цей сайт не мав сторонніх запитів, що блокують рендеринг, які могли б стати єдиною точкою відмови. У нього не було проблем з безпекою».

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

Наступний етап — розрахунок показників ефективності сторінки:

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

Далі сервіс пропонує порівняти запуск WebPageTest з даними продуктивності, зібраними браузером для цього сайту, тобто з реальними показниками використання.

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

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

WebPageTest для швидкості сайту

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

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

number for list two

Pingdom

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

За $120 на рік доступний моніторинг доступності, продуктивності та бізнес-транзакцій. Аналізу підлягає розмір сторінки, час завантаження, запити. Окремо — за додаткових $120 щорічно — можна підключити тариф  для аналізу необмеженої кількості сайтів та без лімітів стосовно кількості користувачів, зі звітами для спільного доступу. Цей варіант є оптимальним для агенцій, котрі займаються веденням різноманітних веб-ресурсів і повинні слідкувати одночасно за результатами всіх клієнтів.

Pingdom інструмент для перевірки наскільки ваш сайт швидкий

Для покращення продуктивності сторінки сервіс генерує засновані на аналізі рекомендації, наприклад, «Додати заголовки, термін дії яких закінчується», «Використовуйте домени без файлів cookie», «Зробіть favicon маленьким та кешованим» і т. д.

як визначити продуктивість сторінки сайту

В аналіз входить моніторинг кодів відповідей, розміру контенту, запитів за типом контенту, розміру контенту за його типом та за доменом.

аналіз швидкості сайту

Для позначення різних типів вмісту (текст, зображення, HTML-документ і ін.) використовуються спеціальні піктограми. Аналогічно для розрізнювання кодів відповідей HTTP на діаграмі, застосовуються кольорові крапки біля URL-адрес, а індикаторами різних етапів виконання запиту служать кольорові позначення.

Показники швидкості завантаження сторінок сайту
number for list three

GTmetrix

Сервіс використовує Google Lighthouse для аналізу продуктивності сайту, а саме швидкості повного завантаження, першого та найбільшого змістовного відображення і ін. Тестування може бути проведене з кількох серверів.

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

Окрім безкоштовного тарифу є пакети з розширеними можливостями за $10, $21, $42. Вони включають додаткові тестові сервери, аналіз з мобільних пристроїв, погодинний і глобальний моніторинг тощо.

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

  • LCP — скільки часу потрібно, щоб повністю відобразився найважчий елемент контенту на сторінці.
  • TBT — тривалість блокування скриптами під час завантаження сторінки.
  • CLS — зміни макета сторінки під час її завантаження.

Доступно багато вкладок із інформацією про сайт навіть для незареєстрованих користувачів («Резюме», «Ефективність», «Структура», «Каскад», «Відео», «Історія»).

GTmetrix для аналізу продуктивності сайту

Сервіс визначає основні проблеми, що впливають на результати сайту, наприклад: «Уникати document.write() — знайдено 1 екземпляр».

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

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

якими способами можна пришвидшити завантаження сайту

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

number for list four

Google PageSpeed Insights

Інструмент належить Google та здійснює оцінку користувацького досвіду на основі звіту Chrome UX. Оцінку продуктивності визначає Lighthouse, використовуючи два типи даних.

  1. Польові містять інформацію про те, який досвід відвідувачі справді отримують на сайті. Є цінними для фіксації справжнього, реального користувацького досвіду, але мають більш обмежений набір метрик.
  2. Лабораторні збираються в контрольованому середовищі для виявлення та усунення проблем з продуктивністю. Така інформація є точною, однак не завжди  відображає реальні слабкі місця веб-сторінки.

Для всіх показників обрано 75-й процентиль, дані оновлюються щоденно. Google PageSpeed Insights класифікує якість користувацького досвіду за трьома категоріями: «Добре», «Потребує покращення» та «Погано».

Google PageSpeed Insights допомагає пришвидшити завантаження сайту

Проблеми з продуктивністю оцінюються у відсотках. 

Google PageSpeed Insights для оцінки якості швидкості сайтів

Разом із аудитами інструмент видає рекомендації щодо прискорення завантаження сторінки.

Як перевірити сайт через Google PageSpeed Insights
Микола Лукашук

Коментар експерта

Не дивлячись на швидкий інтернет, 4g/5g/6g покриття, швидші пристрої — швидкість важливий фактор в SEO, рекламі, й в цілому в конверсії сайту та доцільності маркетингових вкладень.

У 2023 нікого не здивуєш різними наборами зображень, WebP, Avif, відкладеними чи асинхронними стилями та скриптами, CSS спрайтами тощо. Google — окрім типових 90+ показника, чи загально прийнятого 2 секунд — впровадив на LCP, FID, CLS, FCP, INP та TTFB.

Окрім одного з факторів ранжування в SEO — швидкість сайту враховується в показнику якості цільової сторінки Google Ads, відповідно ціні за клік, та ROAS/CAC, й особливо важлива для всього трафіку, що йде на сайт.

Проаналізуймо.

Якщо на сайті 50 000 відвідувачів щомісяця, а середня конверсія в замовлення 1.5%. Тоді покращення швидкості сайту на 50% дасть +10% до конверсій, та стане 1.65%. З наведених 50 000 відвідувачів на місяць це +75 замовлень на місяць, тобто +900 замовлень на рік, наприклад в ecommerce при середньому чеку 5000 грн з маржею 40%, це додаткові 1 800 000 грн на рік.

Робіть висновки та працюйте над покращенням швидкості.

Микола Лукашук, CEO marketing.link

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

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

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

На швидкість сторінки впливає кожен її елемент. Це і код HTML, і CSS, який задає стиль елементам сторінки, і файли JavaScript, а також зображення, відео, квізи та калькулятори та ін. 

Розглянемо основні фактори, що заважають швидкому завантаженню веб-сторінок.

  • Важкі зображення, зокрема, з високим DPI. Вихід — оптимізація зображень чи використання мережі доставки контенту (CDN).
  • Наявність великих файлів для завантаження користувачами.
  • Значна кількість JavaScript-скриптів також сповільнює роботу сторінки. Інструмент стиснення або мінімізації JavaScript зменшує розмір завантаження.
  • Невикористаний код, залишений в HTML-коді сторінки, — CSS, JS чи ін.
  • Дуже ранній або, навпаки, занадто пізній рендеринг скриптів. Йдеться про можливість перегляду сторінки лише після завантаження усього котенту, що на ній міститься.
  • Розташування хостингу. Затримки в мережі можуть виникати, якщо контент долає певний шлях. Це відбувається, якщо файли HTML і CSS сайту розміщені у географічно віддалених дата-центрах.

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

Наприклад, навіть якщо сайт легкий, він може попри це не завантажуватися швидко в браузерах через повільність мережі. На швидкість з’єднання з мережею впливає використовуване локальне мережеве обладнання та якість послуг інтернет-провайдера. Мобільні пристрої, що використовують 3G або 4G замість підключення через Wi-Fi часто також забезпечують повільніше з’єднання з мережею.

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

Показники швидкості завантаження сторінок визначаються за фіксованою вибіркою, що становить 1% користувачів. Про це йдеться у довідці Google Analytics. Ви можете підвищити частоту вибірки, додавши в код відстеження функцію setSiteSpeedSampleRate() при оновленні змісту.

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

  • Зменшення кількості файлів CSS, що видаляє зайві символи у контенті.
  • Стиснення зображень Gzip задля скорочення часу завантаження файлів CSS, HTML і JavaScript. 
  • Впровадження мережі доставки контенту (CDN), завдяки чому він надходить з найближчого до нього сервера.
  • Оптимізація медіафайлів. Найкращими вважаються формати PNG або JPEG. Відео можна стиснути або просто завантажити їх на YouTube і надалі використовувати на веб-сторінці код вбудовування.
  • Використання індивідуального веб-хостингу з оптимізованою швидкістю.
  • Мінімізація HTTP-запитів. 
  • Активація кешування браузера.

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

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

Що найчастіше питають про аналіз швидкості сайту

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

Для перевірки швидкості завантаження сторінок сайту скористайтеся сервісами: Google PageSpeed Insights, GTmetrix, WebPageTest або Pingdom. Введіть URL в один із цих інструментів, і він проаналізує швидкість завантаження та дасть звіт і поради.

Як перевірити що гальмує завантаження сайту?

Найбільше уповільнюють сайт великі зображення, непотрібний JavaScript, відсутність кешування тощо. Регулярно перевіряйте сторінки, не додавайте гіфки і картинки у великому розширенні, використовуйте формат WebP.

У чому вимірюється продуктивність сайту?

Продуктивність сайту вимірюється в:
— Часі завантаження сторінки (секунди, мілісекунди).
— Часі до першої байт (TTFB).
— Часі до інтерактивності/першого відтворення контенту (FCP, TTI).
— Загальній кількості запитів і розмірі сторінки (кілобайти або мегабайти).
— Google Core Web Vitals (LCP, FID, CLS).

Висновки

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

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

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

Теги цієї статті:

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *