Швидкість сайту може стати вирішальним фактором його успіху. Швидкі сайти більш ранжуються високо в пошукових системах, мають високий коефіцієнт конверсії і менший відсоток відмов. Ось чому так важливо використовувати різні інструменти для тестування швидкості сайту:
Як тестування швидкості сайту може допомогти в аналізі?
Ось лише кілька способів тестування швидкості сайту за допомогою різних інструментів:
- Визначення макросів, шрифтів і плагінів, що викликають збільшення часу завантаження (HTML, JavaScript, CSS);
- Перевірка мінімізації скриптів;
- Виявлення великих зображень;
- Тестування часу до отримання першого байта (TTFB);
- Аналіз загального часу завантаження, розміру сторінок і запитів;
- Перевірка продуктивності для різних географічних точок;
- Перевірка швидкості виведення в різних браузерах;
- Аналіз HTTP-заголовків;
- Вимірювання продуктивності мережі («доставка» контенту);
- Перевірка елементи, які коректно завантажуються з CDN.
Концепції швидкості сайту
Перед початком перевірки швидкості сайту важливо розібратися в концепціях, на основі яких працюють ці інструменти. З їх допомогою ви можете не тільки перевірити швидкість свого хостингу, але й виміряти продуктивність 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
Це швидкий і простий спосіб тестування швидкості, щоб отримати уявлення про продуктивність сайту. Він пропонує на вибір 14 місць для тестування по всій земній кулі. Тест включає в себе розбивку процесу завантаження і візуалізацію перегляду сайту. Можна швидко дізнатися, скільки HTTP-запитів було виконано, а також повний розмір запитуваної сторінки і час завантаження.
Це один з небагатьох інструментів, нарівні з PageSpeed, який є адаптивним і відмінно працює на мобільних пристроях:
2. Google Insights PageSpeed
Сервіс дозволяє перевірити швидкість сайту і виставляє йому за шкалою від 1 до 100. Чим більше число, тим краще оптимізований ваш сайт. Все, що вище 85, вказує на те, що ресурс працює добре.
PageSpeed надає звіти, як для стаціонарного, так і мобільного версій сайту. Можна переглянути рекомендації по поліпшенню компонентів.
PageSpeed Insights визначає, наскільки сторінка може бути оптимізована за такими показниками:
- час початку завантаження: час, що минув з моменту, коли користувач запросив нову сторінку, і до моменту, коли браузер почав відображати контент;
- час повного завантаження сторінки: час, що минув з моменту, коли користувач запросив нову сторінку, і до моменту, коли сторінка була повністю виведена браузером.
Мобільний звіт включає в себе додаткову категорію під назвою «Досвід користувача«. У цю оцінку включається аналіз конфігурації вікон перегляду розміру цільових елементів (кнопок, посилань), а також оптимізація розмірів шрифтів:
3. Pingdom
Один з найбільш відомих інструментів для тестування швидкості сайту. Надаються їм звіти розбиті на чотири розділи, які включають в себе розбивку процесу завантаження, оцінку продуктивності, аналіз сторінок і історію.
В аналізі сторінки наведено детальний огляд з додатковою інформацією: аналіз розміру, розмір кожного домену (можна легко порівняти CDN-елементи з доменними), кількість запитів на домен. А також, який тип контенту виконував найбільша кількість запитів:
4. GTmetrix
Він перевіряє як показники PageSpeed, так і YSlow, привласнюючи сайту категорію від F до A. Зведений звіт розбитий на п’ять розділів, що включають PageSpeed, YSlow, розбиття процесу завантаження, відео та історію.
При безкоштовної реєстрації можна перевірити швидкість завантаження сайту з семи різних локацій. GTmetrix також дозволяє вибрати браузер, Chrome або Firefox.
Ви можете перевірити та порівняти показники сайту для різних типів з’єднань (наприклад, кабель проти dial-up), щоб визначити, як це впливає на швидкість завантаження сторінки. У числі інших функцій можна відзначити відтворення відео для аналізу та виявлення проблем при завантаженні, а також можливість запуску Adblock Plus. При відключеній рекламі можна побачити, як вона впливає на завантаження аналізованого сайту:
5. WebPagetest
Пропонує на вибір для тестування понад 40 локацій і 25 браузерів (включаючи мобільні). Інструмент присвоює сайту категорію від F до А на основі різних тестів продуктивності, таких як FTTB, стиснення, кешування, ефективне використання CDN і т. д. Фінальний звіт розбитий на шість розділів, які включають в себе загальну оцінку, деталізацію, огляд продуктивності, проблеми при завантаженні контенту і скріншоти.
Сервіс допомагає діагностувати, які затримки виникають під час першого пошуку DNS (про що згадувалося раніше). WebPagetest містить також більш просунуті функції, такі як захоплення відео, відключення Javascript, ігнорування сертифікатів:
6. DareBoost
При аналізі швидкості сайту він враховує більше 100 контрольних параметрів. З них складається загальна оцінка від 1 до 100 балів. Можна порівняти показники завантаження сайту на стаціонарних і мобільних пристроях, в Firefox і Chrome, а також для п’яти різних географічних точок.
Загальний звіт поділений за пріоритетами. За допомогою безкоштовної облікового запису можна експортувати звіт в формат PDF і навіть порівняти показники сайту з іншими ресурсами. Інструмент пропонує великий перелік інформації та прикладів для кожного з 100 різних контрольних параметрів. Крім оцінки швидкості сайту звіти також включають в себе рекомендації по SEO, доступності і якості коду:
7. Varvy Pagespeed Optimization
Наданий сервісом звіт розбитий на 5 розділів, що включають в себе діаграми ресурсів, аналіз CSS, JavaScript, виявлені проблеми зі швидкістю сторінки і використовувані сервіси.
Сервіс надає документацію та рекомендації про те, як покращити сайт з допомогою оптимізації процесу візуалізації, використання кешу в браузері, відкладеного завантаження JavaScript і багато чого іншого:
8. Uptrends
Пропонує більше 35 географічних точок для тестування швидкості сайту. Надається звіт складається з двох розділів: розбивка процесу завантаження і групи доменів. Розділ «Групи доменів» містить унікальну інформацію, так як в ньому ресурси класифікуються за різними джерелами: власні, статистика, CDN, соціальні, реклама:
9. dotcom-monitor
Пропонує для тестування 23 різних географічних точки і сім браузерів. Унікальною особливістю цього інструменту є те, що він дозволяє запустити всі географічні тести і переглянути звіт по кожному тесту окремо.
Загальний звіт перевірки швидкості завантаження сайту розбитий на п’ять розділів, які включають в себе дані про продуктивність, діаграми процесу завантаження (розбиття), хостинг і помилки:
10. PageScoring
Пропонує простий і зрозумілий звіт про продуктивності. В ньому відображається:
- Пошук домену;
- Час з’єднання;
- Час перенаправлення;
- Розмір сторінки;
- Час завантаження.
Після цього можна переглянути, скільки часу знадобилося для завантаження окремих елементів сторінки:
11. Yellow Tools Lab
Це новий інструмент для тестування швидкості завантаження і якості front-end. Yellow Lab Tools надає багато корисної інформації й містить унікальні функції, яких немає в інших інструментах. Наприклад, відстеження того, як взаємодіє JavaScript з DOM під час завантаження сторінки.
Сайт отримує сумарну оцінку на основі наступних критеріїв:
- Вага сторінки;
- Запити;
- DOM;
- Неякісні скрипти Javascript;
- Неякісні стилі CSS;
- Конфігурація сервера.
Графік JavaScript показує фактичні взаємодії DOM під час завантаження сторінки:
12. DevTools Google Chrome
Це дуже простий у використанні інструмент для перевірки швидкості сайту. Його можна запустити в Google Chrome, використовуючи поєднання клавіш:
- Windows: F12, Ctrl + Shift + I;
- Mac: Cmd + Opt + I.
В останньому оновленні інструментів для розробників у графіки процесу завантаження були додані панелі зведених даних. Це дозволяє побачити, на завантаження якогось елемента потрібно більшого часу. Щоб перевірити цю інформацію, клацніть по панелі шкали часу та натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Потім можна клікнути по панелі «Зведення» і «Зведені дані«:
Інструменти для розробників можна побачити точний час завантаження контенту DOM і загальний час завантаження. Для перегляду цієї інформації клікніть по панелі «Мережа«, натисніть на кнопку «Показати огляд» і Ctrl + R (Ctrl + R), щоб оновити сторінку. Синя лінія буде показувати час завантаження контенту DOM, а червона — загальне часу завантаження. Зазвичай все, що знаходиться ліворуч або стикається з синьою лінією — це елементи, які блокують DOM (ресурси блокуючі висновок):
13. Sucuri Load Time Tester
Інструмент надасть повну оцінку продуктивності за шкалою від A до F. Тест вимірює, скільки часу проходить від підключення до сайту або одній сторінці до повного завантаження. Параметр «час до отримання першого байта«, показує, скільки часу знадобилося для початку обробки сторінки:
14. Pagelocity
Інструмент перевірки швидкості завантаження сайту оцінює ресурс за 100-бальною шкалою, яка складається з таких параметрів, як соціальні функції, SEO, ресурси і код. Він також дозволяє відслідковувати сайти конкурентів. Можна завести безкоштовний акаунт, щоб скористатися додатковими функціями.
Інструмент показує, чи працює сайт через HTTPS, яке значення TTFB, і через діаграму у графічній формі відображає час завантаження елементів DOM:
Уявлення ресурсів дозволяє швидко визначити, які елементи становлять загальний вага сторінки. На наведеному нижче скріншоті тесту видно, що обсяг зображень більш ніж в 4 рази перевищує обсяг зовнішніх скриптів:
15. YSlow
YSlow виконує тестування швидкості сайту в три етапи:
- Сканує DOM, щоб знайти всі компоненти (зображення, скрипти тощо);
- Отримує інформацію про розмір кожного з компонентів (Gzip, неактуальні заголовки тощо);
- Приймає дані і дає оцінки по кожному з правил.
YSlow оперує 23 різними правилами, як показано нижче на прикладі тесту. Можна використовувати безкоштовне розширення для Chrome або отримати результати YSlow від GTMetrix.
Тестування швидкості сайту за допомогою розширень для браузера Google Chrome
Існує багато безкоштовних розширень для браузера Google Chrome, з допомогою яких можна перевірити швидкість сайту.
Ось деякі з них:
- 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 Website Speed Test Tools for Analyzing Web Performance» був підготовлений дружною командою проекту Сайтостроение від А до Я.