Кращі 15 безкоштовних інструментів швидкості тестування сайту з 2018 року

  1. Що може перевірити швидкість веб-сайту?
  2. Концепція швидкості веб-сайту
  3. Час до першого байта (TTFB)
  4. Render-Blocking JavaScript & CSS
  5. JavaScript
  6. CSS
  7. Запити HTTP
  8. 1. Тест швидкості сайту KeyCDN
  9. 2. Google PageSpeed ​​Insights
  10. 3. Тест швидкості Pingdom
  11. 4. GTmetrix
  12. 5. WebPageTest
  13. 6. Оптимізація Varvy Pagespeed
  14. 7. Підвищення
  15. 9. PageScoring
  16. 12. Тестер часу навантаження Сукурі
  17. 13. Пагельованість
  18. 14. YSlow
  19. Тест швидкості веб-сайту з розширеннями Chrome
  20. Тест швидкості веб-сайту для мобільних пристроїв
  21. Резюме

Брайан Джексон

Оновлено 4 березня 2019 року

Оновлено 4 березня 2019 року

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

Google хоче, щоб ваш сайт завантажився Менше ніж на секунду

Що може перевірити швидкість веб-сайту?

Нижче наведено лише деякі з поширених способів використання веб-сайтів тестів швидкості:

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

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

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

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

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

Детальніше про це час до першого байта і час останнього байта.

Render-Blocking JavaScript & CSS

Блокування візуалізації посилається на JavaScript і CSS, які не дозволяють завантажувати сторінку так швидко, як це можливо.

JavaScript

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

Приклад відкладання JavaScript, розмістивши його безпосередньо перед тегом </body>.

function downloadJSAtOnload () {var element = document.createElement ("script"); element.src = "defer.js"; document.body.appendChild (елемент); } if (window.addEventListener) window.addEventListener ("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent ("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;

CSS

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

  1. Правильно викликайте свої файли CSS
  2. Зменшити кількість файлів CSS
  3. Використовуйте менше CSS в цілому

Ось чудова стаття CSS, що блокує візуалізацію Ілля Григорик, інженер з веб-продуктивності в Google.

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

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

  • Символи пробілу
  • Нові символи рядка
  • Коментарі
  • Блокувати роздільники

Це прискорює час завантаження, оскільки зменшує кількість коду, який потрібно запросити на сервері. Ви можете скористатися таким інструментом, як CS CS від Dan JavaScript Minify щоб видалити всі непотрібні символи. Або якщо ви використовуєте WordPress, ви можете використовувати плагін, як Оптимізувати який зменшить всі HTML, JavaScript і CSS для вас.

Запити HTTP

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

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

  • Об'єднуючи файли CSS і JavaScript
  • Вставте JavaScript (лише якщо він дуже маленький)
  • Використання CSS Sprites
  • Зменшення активів, таких як плагіни третьої сторони, які створюють велику кількість зовнішніх запитів

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

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

1. Тест швидкості сайту KeyCDN

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

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

2. Google PageSpeed ​​Insights

Google PageSpeed ​​Insights це інструмент швидкості тестування сайту, який оцінює ваш сайт за шкалою від 1 до 100. Чим вище число, тим краще оптимізується ваш сайт. Все, що перевищує 85, свідчить про те, що ваш сайт працює добре. PageSpeed ​​надає звіти як для робочого столу, так і для мобільних версій вашого сайту. Можна переглянути рекомендації щодо поліпшень, наприклад, щоб зменшити CSS або оптимізуйте зображення .

PageSpeed ​​Insights визначає, як сторінка може покращити свою ефективність:

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

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

Команда PageSpeed ​​Insights також нещодавно запустила новий тест швидкості сайту подумайте з Google "Ви можете перевірити. Однією приємною особливістю є красиві звіти, які він створює. Може бути відмінним для відправки клієнтам.

3. Тест швидкості Pingdom

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

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

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

  • Даллас, Техас, США,
  • Мельбурн, Австралія
  • Сан-Хосе, Каліфорнія, США
  • Стокгольм, Швеція

Результати тесту швидкості Pingdom надають вам уявлення про продуктивність, подібні до статистики Google PagesSpeed ​​Insights, в якій ви можете побачити, де можна зробити поліпшення. Результати також розбивають розмір сторінки за типом вмісту, розміром сторінки за доменом, запитами за типом вмісту та запитами за доменом.

4. GTmetrix

GTmetrix переходить до деталей, оскільки перевіряє як PageSpeed, так і YSlow метрики , призначення вашого сайту класу від F до A. Це звіти поділяються на п'ять різних розділів, включаючи PageSpeed, YSlow, розбиття водоспаду, відео та історію.

За допомогою безкоштовної реєстрації ви можете протестувати з семи різних місць. Вони також дозволяють вибрати браузер, Chrome vs Firefox. Ви можете перевірити та порівняти продуктивність веб-сайту з різними типами підключень (наприклад, до кабельного або комутованого), щоб дізнатися, як це впливає на завантаження сторінки. Інші розширені функції включають відтворення відео, щоб проаналізувати, де відбувається вузьке місце, а також можливість запускати Adblock plus. З відключеними оголошеннями ви можете побачити, як вони впливають на завантаження вашого сайту.

Примітка: Рекомендується зробити безкоштовний обліковий запис, оскільки ви отримаєте додаткові опції, такі як згадані вище.

5. WebPageTest

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

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

6. Оптимізація Varvy Pagespeed

Оптимізація Varvy Pagespeed є інструментом, розробленим і підтримуваним Патріком Секстоном, який також створив GetListed.org, який тепер відомий як Moz Local.

Звіти розділені на 5 різних розділів, включаючи діаграму ресурсів, доставку CSS, використання JavaScript, знайдені питання швидкості сторінки та використані служби. Цей інструмент використовує більше ** ** графічного представлення того, що може бути виправлено на вашому сайті, наприклад блокування візуалізації .

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

7. Підвищення

Перехід досить просто, але вони пропонують більше 35 місць на вибір, коли ви виконуєте тест швидкості. Їх доповідь розбивається на дві секції: розбиття водоспаду та групи доменів. Групи доменів надають унікальну перспективу, оскільки класифікують ресурси на різні джерела : 1-а партія, статистика, CDN, соціальна, реклама, загальна партія та загальна третя сторона.

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

Їх доповіді розділені на п'ять різних розділів, які включають резюме, показники, графік водоспаду (розбивка), хост та помилки.

9. PageScoring

PageScoring - це простий і легкий для розуміння звіт про ефективність з мінімалістським дизайном . Вони показують загальний час завантаження, а потім такі відомості:

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

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

Жовтий лабораторні інструменти є новим веб-продуктивністю та інструментом тестування якісного інтерфейсу Gaël Métais . Цей інструмент дає вам багато інформації та деяких унікальних функцій, які не бачили в інших інструментах, таких як уявлення про взаємодію JavaScript з DOM під час завантаження сторінки та інші питання перевірки коду. Отримати загальний показник на основі наступних кваліфікаторів.

  • Вага сторінки
  • Запити
  • DOM
  • Поганий JavaScript
  • Поганий CSS
  • Конфігурація сервера

Шкала часу JavaScript показує, як саме взаємодіє DOM під час завантаження сторінки.

І, звичайно, ми не можемо забути Google Chrome DevTools . Це дуже простий у використанні інструмент (з розширеними функціями), і ви можете швидко запустити його в будь-який час у броузері Chrome за допомогою наступних клавіш швидкого доступу.

  • Windows: F12 або також Ctrl + Shift + I
  • Mac: Cmd + Opt + I

З останнім оновлення інструментів розробника , вони додали панель зведених деталей до часової шкали водоспаду. Це дозволяє вам легше бачити те, що коштує вам найбільше часу, після чого ви можете розбити його на домени, піддомени тощо. Щоб запустити цей клік на панелі "Timeline", натисніть Ctrl + R (Cmd + R) ), щоб оновити сторінку. Потім можна натиснути на панель "Резюме" і панель "Агреговані".

Ми також маємо великий пост на що блокує DOM і як це виправити. У інструментах розробника ви можете побачити саме час DOMContentLoaded і загальний час завантаження. Щоб запустити цей клік на панелі "Мережа", клацніть на опції "Показати огляд" і натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Синя лінія відображатиметься для DOMContentLoaded і червону лінію для загального часу завантаження. Зазвичай все, що залишилося від блакитної лінії або торкається її, - це активи, які блокують DOM, або також іменуються ресурсами блокування візуалізації.

12. Тестер часу навантаження Сукурі

The Тестер часу навантаження Сукурі надає швидкий і простий спосіб перевірити ефективність ваших сайтів з усього світу. Це дасть вам глобальну оцінку продуктивності, від A до F. Тест вимірює, скільки часу потрібно для підключення до вашого сайту і для однієї сторінки, щоб повністю завантажити. Дуже важливим є звернути увагу на "час до першого байта" , який дає вам, скільки часу потрібно для того, щоб вміст був відправлений назад у браузер, щоб почати обробку сторінки.

13. Пагельованість

The Інструмент Pagelocity пропонує інший унікальний підхід до тесту швидкості веб-сайту. Це дає вам загальний бал з 100, що складається з таких факторів, як соціальні, SEO, ресурси та код. Інструмент також пропонує можливість відстежувати ваших конкурентів. Ви можете зареєструватися для безкоштовного облікового запису, щоб скористатися додатковими функціями. Перегляд коду особливо унікальний, оскільки він покаже вам, якщо ваш сайт працює через HTTPS, що таке ваш TTFB, і графічний інтерфейс ваших елементів DOM зі стовпчиковою діаграмою.

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

14. YSlow

YSlow є відкритим проектом та інструментом, який аналізує веб-сторінки та допомагає зрозуміти, чому вони повільні, на основі правил Yahoo! для високопродуктивних веб-сайтів. В даний час його підтримує Марсель Дюран, який також бере участь у проекті WebPageTest. YSlow діє в три етапи для отримання результатів тестування продуктивності:

  1. YSlow сканує DOM, щоб знайти всі компоненти (зображення, сценарії тощо).
  2. YSlow отримує інформацію про розмір кожного компонента (Gzip, закінчується заголовки тощо)
  3. YSlow приймає дані та генерує оцінку для кожного правила, яке, у свою чергу, дає загальну оцінку.

YSlow має 23 різних правила, якими він керує на вашому сайті, щоб оцінити його, наприклад, використовуючи CDN і зменшуючи пошук DNS. GTmetrix пропонує інструмент онлайн-аналізу, щоб перевірити ваш показник YSlow. Не забудьте ознайомитися з нашим поглибленим посібником як покращити свій показник YSlow .

PerfTool є проектом інструменту продуктивності клієнта з відкритим кодом, розміщений на GitHub. Він збирає різноманітну інформацію про ваш веб-сайт і відображає її у зручному для перегляду способі на сторінці звітів. Він поєднує три джерела даних в одному, PageSpeed ​​Insights, devperf і W3CJS. Загалом, це дає вам понад 200 різних показників ефективності.

Одна велика перевага PerfTool полягає в тому, що ви можете запускати кілька тестів сторінок одночасно для звіту Google PageSpeed ​​Insights. Потім порівняйте результати роботи веб-сайту з попередніми тестами, встановіть поріг оцінки та отримайте докладний звіт про свої тести. Це може заощадити багато часу, якщо ви оцінюєте ефективність веб-сайту всього сайту, оскільки вам не доведеться перевіряти сторінки один за одним.

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

Є чимало безкоштовних розширень Chrome, в яких можна аналізувати швидкість веб-сайту. Ось кілька з них. Ви можете легко їх запускати праворуч у вашому веб-переглядачі.

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

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

  • WebPageTest
  • GTmetrix
  • дотком-монітор

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

Після цього ви можете скористатися вкладкою «Мережа» та пробою водоспаду для тестування швидкості.

Резюме

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

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

  • Стиснення зображень і файлів
  • Вибір швидкого веб-хостингу
  • Оптимізація коду та скриптів
  • Використання a Мережа доставки вмісту
  • Кешування
  • Зменшення кількості запитів HTTP

Що може перевірити швидкість веб-сайту?