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

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

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

  • Визначення макросів, шрифтів і плагінів, що викликають збільшення часу завантаження (HTML, JavaScript, CSS);
  • Перевірка мінімізації скриптів;
  • Виявлення великих зображень;
  • Тестування часу до отримання першого байта (TTFB);
  • Аналіз загального часу завантаження, розміру сторінок і запитів;
  • Перевірка продуктивності для різних географічних точок;
  • Перевірка швидкості виведення в різних браузерах;
  • Аналіз HTTP-заголовків;
  • Вимірювання продуктивності мережі («доставка» контенту);
  • Перевірка елементи, які коректно завантажуються з CDN.

Концепції швидкості сайту

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

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

Час до отримання першого байта (TTFB)

Час до отримання першого байта (TTFB) — показник швидкості відгуку сервера. Це час, який потрібен браузеру, щоб почати отримувати інформацію після того, як він запросив її з сервера. При використанні CDN можна значно зменшити залежність свого сайту від завантаженості серверу, що в свою чергу повинно зменшити TTFB.

Блокуючий код Javascript і CSS

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

Javascript

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

function downloadJSAtOnload() {
var element = document.createElement(«script»);
element.src = «defer.js»;
document.body.appendChild(element);
}
if (window.addEventListener.)
window.addEventListener. («load», downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(«onload», downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

CSS

Також потрібно оптимізувати код CSS, щоб не допустити пов’язаних з ним затримок при завантаженні сторінки. Ось кілька рекомендацій для збільшення швидкості сайту:

  • Належні імена файлів CSS;
  • Зменшення кількості файлів CSS;
  • Використання меншого обсягу коду CSS в цілому.

CSS — це блокуючий висновок ресурс, для оптимізації часу відображення він повинен завантажуватися клієнтом так швидко, як це тільки можливо!

Мінімізація ресурсів

Мінімізація ресурсів означає видалення з HTML, JavaScript і CSS коду символів, які не потрібні для завантаження. Таких як:

  • Прогалини;
  • Символи нового рядка;
  • Коментарі;
  • Роздільники блоків.

Це збільшує швидкість сайту, оскільки зменшує об’єм коду, який повинен бути запитано з сервера. Щоб видалити всі непотрібні символи, можна використовувати такі інструменти, як Dan’s CSS і Javascript Minify. Якщо ви працюєте з WordPress, можна використовувати плагін ти-mize, який мінімізує HTML, JavaScript і CSS.

HTTP-запити

Коли браузер витягує дані з сервера, він робить це, використовуючи протокол HTTP (Hypertext Transfer Protocol). Це процес обміну «запит / відповідь» між клієнтом і хостингом. Чим більше HTTP-запитів виконує веб-сторінка, тим повільніше вона буде завантажуватися.

Існує багато способів, за допомогою яких можна зменшити кількість запитів. Наприклад:

  • Об’єднання файлів CSS і Javascript;
  • Вбудовані скрипти Javascript (тільки якщо вони невеликі);
  • Використання CSS спрайтів;
  • Зменшення кількості використовуваних ресурсів, таких як сторонні плагіни, які виконують велику кількість зовнішніх запитів.

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

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

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

Список інструментів

1. KeyCDN Speed Test

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

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

Це один з небагатьох інструментів, нарівні з PageSpeed, який є адаптивним і відмінно працює на мобільних пристроях:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

2. Google Insights PageSpeed

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Сервіс дозволяє перевірити швидкість сайту і виставляє йому за шкалою від 1 до 100. Чим більше число, тим краще оптимізований ваш сайт. Все, що вище 85, вказує на те, що ресурс працює добре.

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

PageSpeed Insights визначає, наскільки сторінка може бути оптимізована за такими показниками:

  • час початку завантаження: час, що минув з моменту, коли користувач запросив нову сторінку, і до моменту, коли браузер почав відображати контент;
  • час повного завантаження сторінки: час, що минув з моменту, коли користувач запросив нову сторінку, і до моменту, коли сторінка була повністю виведена браузером.

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

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

3. Pingdom

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

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

В аналізі сторінки наведено детальний огляд з додатковою інформацією: аналіз розміру, розмір кожного домену (можна легко порівняти CDN-елементи з доменними), кількість запитів на домен. А також, який тип контенту виконував найбільша кількість запитів:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

4. GTmetrix

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Він перевіряє як показники PageSpeed, так і YSlow, привласнюючи сайту категорію від F до A. Зведений звіт розбитий на п’ять розділів, що включають PageSpeed, YSlow, розбиття процесу завантаження, відео та історію.

При безкоштовної реєстрації можна перевірити швидкість завантаження сайту з семи різних локацій. GTmetrix також дозволяє вибрати браузер, Chrome або Firefox.

Ви можете перевірити та порівняти показники сайту для різних типів з’єднань (наприклад, кабель проти dial-up), щоб визначити, як це впливає на швидкість завантаження сторінки. У числі інших функцій можна відзначити відтворення відео для аналізу та виявлення проблем при завантаженні, а також можливість запуску Adblock Plus. При відключеній рекламі можна побачити, як вона впливає на завантаження аналізованого сайту:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

5. WebPagetest

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Пропонує на вибір для тестування понад 40 локацій і 25 браузерів (включаючи мобільні). Інструмент присвоює сайту категорію від F до А на основі різних тестів продуктивності, таких як FTTB, стиснення, кешування, ефективне використання CDN і т. д. Фінальний звіт розбитий на шість розділів, які включають в себе загальну оцінку, деталізацію, огляд продуктивності, проблеми при завантаженні контенту і скріншоти.

Сервіс допомагає діагностувати, які затримки виникають під час першого пошуку DNS (про що згадувалося раніше). WebPagetest містить також більш просунуті функції, такі як захоплення відео, відключення Javascript, ігнорування сертифікатів:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

6. DareBoost

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

При аналізі швидкості сайту він враховує більше 100 контрольних параметрів. З них складається загальна оцінка від 1 до 100 балів. Можна порівняти показники завантаження сайту на стаціонарних і мобільних пристроях, в Firefox і Chrome, а також для п’яти різних географічних точок.

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

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

7. Varvy Pagespeed Optimization

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

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

Сервіс надає документацію та рекомендації про те, як покращити сайт з допомогою оптимізації процесу візуалізації, використання кешу в браузері, відкладеного завантаження JavaScript і багато чого іншого:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності
15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

8. Uptrends

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Пропонує більше 35 географічних точок для тестування швидкості сайту. Надається звіт складається з двох розділів: розбивка процесу завантаження і групи доменів. Розділ «Групи доменів» містить унікальну інформацію, так як в ньому ресурси класифікуються за різними джерелами: власні, статистика, CDN, соціальні, реклама:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

9. dotcom-monitor

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

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

Загальний звіт перевірки швидкості завантаження сайту розбитий на п’ять розділів, які включають в себе дані про продуктивність, діаграми процесу завантаження (розбиття), хостинг і помилки:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

10. PageScoring

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Пропонує простий і зрозумілий звіт про продуктивності. В ньому відображається:

  • Пошук домену;
  • Час з’єднання;
  • Час перенаправлення;
  • Розмір сторінки;
  • Час завантаження.

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

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

11. Yellow Tools Lab

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Це новий інструмент для тестування швидкості завантаження і якості front-end. Yellow Lab Tools надає багато корисної інформації й містить унікальні функції, яких немає в інших інструментах. Наприклад, відстеження того, як взаємодіє JavaScript з DOM під час завантаження сторінки.

Сайт отримує сумарну оцінку на основі наступних критеріїв:

  • Вага сторінки;
  • Запити;
  • DOM;
  • Неякісні скрипти Javascript;
  • Неякісні стилі CSS;
  • Конфігурація сервера.

Графік JavaScript показує фактичні взаємодії DOM під час завантаження сторінки:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

12. DevTools Google Chrome

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Це дуже простий у використанні інструмент для перевірки швидкості сайту. Його можна запустити в Google Chrome, використовуючи поєднання клавіш:

  • Windows: F12, Ctrl + Shift + I;
  • Mac: Cmd + Opt + I.

В останньому оновленні інструментів для розробників у графіки процесу завантаження були додані панелі зведених даних. Це дозволяє побачити, на завантаження якогось елемента потрібно більшого часу. Щоб перевірити цю інформацію, клацніть по панелі шкали часу та натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Потім можна клікнути по панелі «Зведення» і «Зведені дані«:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Інструменти для розробників можна побачити точний час завантаження контенту DOM і загальний час завантаження. Для перегляду цієї інформації клікніть по панелі «Мережа«, натисніть на кнопку «Показати огляд» і Ctrl + R (Ctrl + R), щоб оновити сторінку. Синя лінія буде показувати час завантаження контенту DOM, а червона — загальне часу завантаження. Зазвичай все, що знаходиться ліворуч або стикається з синьою лінією — це елементи, які блокують DOM (ресурси блокуючі висновок):

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

13. Sucuri Load Time Tester

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

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

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

14. Pagelocity

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Інструмент перевірки швидкості завантаження сайту оцінює ресурс за 100-бальною шкалою, яка складається з таких параметрів, як соціальні функції, SEO, ресурси і код. Він також дозволяє відслідковувати сайти конкурентів. Можна завести безкоштовний акаунт, щоб скористатися додатковими функціями.

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

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

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

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

15. YSlow

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

YSlow виконує тестування швидкості сайту в три етапи:

  • Сканує DOM, щоб знайти всі компоненти (зображення, скрипти тощо);
  • Отримує інформацію про розмір кожного з компонентів (Gzip, неактуальні заголовки тощо);
  • Приймає дані і дає оцінки по кожному з правил.

YSlow оперує 23 різними правилами, як показано нижче на прикладі тесту. Можна використовувати безкоштовне розширення для Chrome або отримати результати YSlow від GTMetrix.

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Тестування швидкості сайту за допомогою розширень для браузера Google Chrome

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

Ось деякі з них:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

  • Page Load Time;
  • app.telemetry Page Speed Monitor;
  • Performance-Analyser;
  • LoadFocus Load Testing.

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

Це дозволяють зробити наступні інструменти:

  • WebPageTest;
  • GTMetrix;
  • DareBoost;
  • dotcom-monitor.

Інший спосіб перевірити швидкість сайту — використовувати інструменти для розробників Chrome в режимі пристрою. Щоб увійти в режим пристрою, клацніть по іконці телефону в Chrome DevTools або натисніть Ctrl + Shift + M (Cmd + Shift + M). Після цього можна вибрати пристрій, який потрібно імітувати. Також можна змінити налаштування мережі, щоб побачити, як сайт буде відображатися при 2G або 4G з’єднанні.

Потім на вкладці «Мережа» можна запустити тест швидкості:

15 інструментів тестування швидкості сайту для веб-аналізу продуктивності

Висновок

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

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

Переклад статті «15 Website Speed Test Tools for Analyzing Web Performance» був підготовлений дружною командою проекту Сайтостроение від А до Я.