Core Web Vitals є одним із факторів ранжування в Google. Це означає, що проведення тестів продуктивності стає обов’язковим для всіх власників вебсайтів, які хочуть краще оптимізувати пошукову систему (SEO).
Протягом більше ніж десятиліття GTmetrix був основною рекомендацією для всіх, кому потрібно було швидко перевірити швидкість свого сайту. Це було швидко, просто і, що найважливіше, щедро — але ми кажемо “було“, оскільки наприкінці 2023 та середині 2024 року ця щедрість зникла.
З новими платними бар’єрами, які блокують важливі функції, суворими обмеженнями на безплатне тестування та аналізом для мобільних пристроїв, який тепер доступний тільки за підпискою, інструмент, який ми всі додали до закладок, вже не той ідеал, яким він колись був.
На щастя, існує WebPageTest.org (WPT), платформа, яка з 2008 року працює у фоновому режимі, забезпечуючи найсуворіші перевірки продуктивності в інтернеті.
Отже, ми протестували WPT за основними параметрами продуктивності сайту, щоб визначити, чи може він замінити інші інструменти тестування швидкості, такі як GTmetrix, без будь-яких компромісів.
Йди з нами.
Які Походження WebPageTest.org?
WebPageTest.org — це платформа тестування продуктивності з відкритим кодом, яка надає глибокі діагностики для веб-сторінок. Вона почалася як проект в AOL і згодом була розроблена Патриком Міненом у Google для допомоги інженерам зрозуміти поведінку браузера.
Інструмент залишається активним понад шістнадцять років, оскільки його підтримує спільнота спеціалістів із продуктивності, які вірять у внесок у відкритий код.
Насправді інженери з продуктивності створили цей інструмент спеціально для інших інженерів з продуктивності, яким потрібні дані високої точності. Кожен тест проводиться на справжньому браузері, чи то Chrome, Firefox, чи Safari, а не на безголовій симуляції, яка може пропустити помилки відтворення. Таке технічне підґрунтя гарантує, що результати відображають те, що реальний відвідувач відчуває на своєму пристрої.
Проєкт перейшов до Catchpoint у 2020 році, щоб гарантувати наявність ресурсів для безкоштовного користування громадськістю. Тепер, замість просто підписок, WPT фінансується материнською компанією, яка використовує дані для власних досліджень.
Як Функціональність Порівнюється Для Щоденного Використання?
Нам також потрібно подивитися, як WPT обробляє метрики сайту, які насправді мають значення для твого щоденного робочого процесу. Якщо ти прийшов з GTmetrix, набір функцій тут тобі здасться знайомим, але глибина даних значно вища.
Моніторинг Основних Веб-Віталій
WebPageTest не просто дає тобі оцінку “пройшов/не пройшов” — він деталізує Core Web Vitals (LCP, CLS, INP) з рівнем деталізації, який Insights часто приховує.
Коли ти проводиш тест, WPT візуалізує ці метрики вебсайту на часовій шкалі. Замість того, щоб просто сказати тобі “Твій кумулятивний зсув компонування становить 0.25”, він підсвічує точний кадр у послідовності завантаження, де стався зсув.
Це критично для налагодження, оскільки ти можеш побачити точний макет до стрибка та макет після.
Він також вводить “Можливості”, розділ, який відображає “Рекомендації” від GTmetrix, до яких ми звикли, але з кращим пріоритетом.
Якщо у тебе є 10 проблем, WPT допоможе визначити, які з них не мають значення для негайного підвищення продуктивності та на що зосередитися, щоб насправді покращити SEO та швидкість сайту.
Діаграми Водоспаду та Аналіз Запитів
Діаграма водоспаду є коронною прикрасою WebPageTest: вона щільна, кольорова та спочатку лякає. Але як тільки ти навчишся її читати, ти більше ніколи не захочеш повертатися до спрощеного списку.
Безкоштовний рівень GTmetrix показав тут лише основний список файлів. WebPageTest показує кожний окремий запит, розбитий на п’ять-десять чітко визначених фаз, забарвлених для діагностики:
- DNS та Підключення: Це показує, скільки часу знадобилося, щоб знайти сервер. Довгі лінії тут означають, що твій DNS-провайдер працює повільно.
- Переговори SSL: Це показує час, витрачений на встановлення безпечного з’єднання. Якщо цей час великий, конфігурація TLS сервера може бути застарілою.
- Час до Першого Байта: TTFB — це час, який потрібен браузеру, щоб отримати перший байт відповіді сервера. Довга лінія вказує на повільний час відповіді сервера, що часто вказує на проблеми з запитами до бази даних або обробкою на стороні сервера (що вказує на необхідність оптимізації бази даних)
- Завантаження Контенту: Браузер фактично отримує дані.
Найпотужнішою функцією тут є “Підключення”.
Ти можеш побачити, як саме браузер відкриває паралельні з’єднання для завантаження зображень і визначити точний момент, коли скрипт стороннього відстеження блокує завантаження решти твого сайту.
Рекомендації Щодо Продуктивності
Усі пропозиції від WPT враховують контекст. Замість загального контрольного списку, WebPageTest використовує свій двигун “Можливості” та “Експерименти”.
Замість пропозиції “Відкласти JavaScript,” він вказує на конкретні пакети, які блокують основний потік, і пропонує провести тест без них.
Ще більш вражаючою є функція “Експерименти без кодування”. Це дозволяє тобі “тестувати” виправлення без фактичної зміни коду. Вона буде переписувати HTML на льоту та надавати результат. Це економить години часу на розробку. Ти можеш довести, що виправлення працює, перш ніж просити свого розробника впровадити його.
✏️Примітка: Це платна функція, тому тобі треба буде визначити, чи виправдані витрати для твого випадку використання.
Місця та Пристрої Для Тестування
Це ключова функція. Більшість безкоштовних інструментів просто не можуть дозволити собі пропонувати кілька місць тестування та пристроїв. WPT може. Відкрийте модальне вікно місць, і ви побачите всі доступні міста та країни.
Щоб доповнити це, компанія також пропонує ISP і Node, якщо ти хочеш тестувати на конкретних мережах. Крім того, WPT емулює сотні пристроїв та версій браузерів (а також використовує кілька реальних пристроїв), щоб проводити твої тести.
Якщо твоя аудиторія з Лондона та більшість користувачів мають iPhone 14, ти можеш створити цю конкретну комбінацію для проведення тестів та отримання найточніших результатів.
Розширені Функції на WebPageTest.org
Є дві функції, які відрізняють WPT для розробників: «Скриптинг» та «Перегляд стрічки».
Скриптування – це розширена функція, яка дозволяє автоматизувати складні завдання. Наприклад, ти можеш написати короткий скрипт, щоб сказати браузеру увійти на твій сайт перед початком тесту. Це дозволяє тобі вимірювати швидкість роботи панелі керування учасниками або сторінки оформлення покупки.
Більшість безкоштовних інструментів дозволяють тестувати лише публічні сторінки, які не потребують пароля. Ця можливість робить платформу потужним діагностичним інструментом для веб-додатків.
Перегляд у вигляді стрічки – це ще одна розширена функція, яка робить знімок екрану вашого сайту кожні 0.1 до 0.5 секунди під час завантаження. Ти можеш прокручувати ці зображення, кадр за кадром, щоб побачити точно те, що бачить відвідувач у своєму браузері.
Ця функція допомагає тобі виявляти візуальні проблеми, такі як зміна розміру шрифтів або затримка зображень, які можуть бути непомітні в коді. Ти також можеш використовувати режим порівняння, щоб подивитися на два різних тести поруч. Це корисно, коли ти хочеш перевірити, чи дійсно зміна, яку ти зробив, покращила швидкість.
“Зелена” Перевага З Контролем Вуглецю
WPT представила функцію, яка стосується впливу наше цифрової інфраструктури на довкілляпід назвою Carbon Control.
Він використовує бібліотеку CO2.js від Green Web Foundation для оцінки викидів вуглекислого газу, що генеруються одним завантаженням сторінки.
Обчислення залежить від двох основних факторів для визначення твого рахунку.
- Розмір передання даних: Загальна кількість даних (в кілобайтах або мегабайтах), яка має бути передана з сервера на пристрій користувача. Важчі сторінки потребують більше електроенергії для передачі та обробки.
- Статус зеленого хостингу: Чи працює дата-центр, який розміщує сайт, на відновлюваних джерелах енергії (таких як вітер або сонце) або на викопному паливі.
Це додає цінний вимір до аудиту вашої продуктивності. Ти можеш продемонструвати клієнту, що оптимізація їхнього коду робить більше, ніж лише покращує їхній рейтинг у Google. Це помітно зменшує фізичні відходи, які їхня компанія виробляє, та допомагає їм досягти власних цілей сталого розвитку.
Які Обмеження WebPageTest?
WebPageTest не ідеальний. Насправді, іноді ти ненавидітимеш його.
- Черги: Оскільки він використовує реальні пристрої та є загальнодоступним ресурсом, тобі доведеться чекати в черзі. Якщо ти проводиш тест у годину пік, можеш побачити “Позиція 100”. Можливо, доведеться чекати 10 або 20 хвилин на один тест. GTmetrix (в старі часи) був миттєвим. WPT… скажімо так, це вчить тебе терпінню.
- Відсутність “моніторингу” у безкоштовному плані: Ти не можеш налаштувати WPT на автоматичне тестування твого сайту щоранку та отримання результатів електронною поштою, якщо не оплатиш API або Pro план. Це діагностичний інструмент, а не система моніторингу. Якщо ти хочеш отримувати щоденні діаграми, тобі доведеться проводити тести вручну.
- Візуальна складність: Ти не можеш надіслати посилання на WebPageTest не технічно обізнаному клієнту та очікувати, що він його зрозуміє. Для непідготовленого ока воно виглядає зламаним. Тобі завжди доведеться інтерпретувати дані для них, тоді як інші інструменти створюють PDF-звіти, які виглядають достатньо привабливо, щоб виставляти рахунок за них.
Чи Занадто Крута Крива Навчання Для Початківців?
Ми маємо бути чесними: WebPageTest складний.
Коли ти вперше потрапляєш на головну сторінку, скрізь з’являються випадаючі меню. Сторінка результатів – це стіна чисел. Немає посміхаючогося талісману, який каже тобі “Молодець!”
Як почати, щоб не відчути перевантаження:
- Ігноруй “Розширені Налаштування” на початку: Просто вибери своє місцезнаходження та браузер (Chrome підійде).
- Зосередься на “Підсумку Веб-Показників”: Верхня частина сторінки результатів має червоно/зелену/жовту графіку, схожу на ту, до якої ти звик. Почни звідси.
- Використовуй вкладку “Аналіз Зображень”: Вона візуальна і зрозуміла. Тут чітко показано, які зображення занадто великі та скільки місця ти можеш зекономити. Якщо ти бачиш тут великі файли, ти знаєш, що потрібно оптимізувати зображення для вебу негайно.
Для власника малого або середнього бізнесу без технічних знань цей інструмент може виявитися занадто складним. Однак для когось, хто професійно управляє сайтом, витрачений час на навчання того вартий. Ти обмінюєш простоту на точність.
Як Інтегрувати WebPageTest У Твій Робочий Процес
Нам потрібно бути реалістичними щодо того, як це вписується у завантажений день. Ти не можеш чекати 20 хвилин на результат тесту кожного разу, коли зберігаєш файл CSS. Це не надто ефективний спосіб працювати. Найефективніший спосіб використання WebPageTest — як спеціалізований діагностичний інструмент, а не як щоденний монітор.
Почни свою рутину зі швидкого інструменту, як PageSpeed Insights або вкладка Lighthouse у твоєму інструменті розробника браузера. Ці платформи дають тобі миттєву оцінку “пройдено” або “не пройдено”. Коли ця оцінка падає, або ти бачиш червоне попередження, яке не можеш пояснити, саме час відкрити WebPageTest.
Навіть з повним звітом, стримай своє бажання виправити кожне окреме попередження. Поглянь на графік водоспаду і знайди найбільшу за часом смугу. Це може бути велике зображення, або повільний сторонній скрипт, а можливо навіть твій сервер.
Більшу частину часу, достатньо виправити лише ту одну панель, щоб вирішити свої проблеми. Ти навіть можеш виявити, що просте перетворення файлів на сучасні формати зображень вирішує половину проблеми.
Чи Варто Використовувати WebPageTest?
Ми не можемо мати “один інструмент для всього” зараз, оскільки веб є дуже складним. Замість цього тобі потрібно вибрати інструменти, які найбільш відповідають твоїм щоденним робочим процесам.
У випадку WebPageTest:
- Розробникам слід перейти на це: Можливість скриптувати процеси входу, тестувати на реальному мобільному обладнанні та безкоштовно переглядати детальні з’єднання робить це професійно кращим. Це єдиний безкоштовний інструмент, який надає тобі дані, необхідні для виправлення проблем, а не просто для їх ідентифікації.
- Власникам малих та середніх бізнесів можна використовувати WebPageTest для вашої квартальної “перевірки здоров’я”: Але не зациклюйтесь на цьому щодня. Запустіть тест, перегляньте основні веб-вітальності та надішліть посилання своєму розробнику, якщо все виглядає червоним.
Коли Оптимізація Недостатня
Оптимізація — це, по суті, боротьба з затримками — ти можеш витратити тижні на те, щоб зменшити час виконання своїх скриптів на мілісекунди, але існує лише один вихід із проблеми обладнання — перехід на краще обладнання.
Віртуальний приватний сервер (VPS) забезпечує необхідну віддану потужність для перетворення твого оптимізованого дизайну в швидкий та відгуковий досвід. WebPageTest доводить свою цінність, точно вказуючи, коли твоя інфраструктура стримує тебе. Він відокремлює проблеми, які ти можеш вирішити за допомогою текстового редактора, від тих, що вимагають кращої інфраструктури.
Це, чесно кажучи, єдиний спосіб перестати переслідувати випадкові рядки у твоєму коді та надати твоєму сайту двигун, який він заслуговує.
Коли Ви Очікуєте Продуктивності, Оберіть DreamHost VPS
Великий чи малий, сайт чи додаток – у нас є конфігурація VPS для вас.
Дізнатися більшеЧасті запитання
Чи надійний WebPageTest.org?
Так, WebPageTest широко вважається одним із найнадійніших інструментів для перевірки продуктивності, оскільки він використовує справжні браузери на реальному споживчому обладнанні, а не симуляції. На відміну від деяких інструментів, що оцінюють продуктивність на основі аналізу коду, WebPageTest точно записує, що відбувається, коли справжні браузери Chrome, Firefox або Safari завантажують ваш сайт через реальне мережеве з’єднання.
Яка різниця між WebPageTest і PageSpeed Insights?
PageSpeed Insights — це в основному засіб звітності, який надає тобі оцінку “Здано/Не здано” на основі даних реального користування Google Core Web Vitals (CrUX) та швидкого лабораторного тесту. WebPageTest — це діагностичний інструмент, який надає тобі детальні технічні дані (наприклад, діаграми водоспаду та перегляди з’єднань), щоб допомогти пояснити, чому твій бал низький.
Що таке хороший бал Core Web Vitals?
Згідно з бенчмарками Google, “добрий” результат означає, що час найбільшого візуально стабільного вмісту (LCP) становить менше 2,5 секунд, час від взаємодії до наступного відтворення (INP) менше 200 мілісекунд, а зсув кумулятивного макета (CLS) менше 0,1. Для проходження оцінки основних веб-вітальностей необхідно дотримуватися цих порогів для щонайменше 75% ваших відвідувачів.
Як часто мені слід тестувати швидкість мого сайту?
Тобі слід проводити швидку перевірку (використовуючи PageSpeed Insights) кожного разу, коли ти публікуєш новий контент або оновлюєш плагіни. Однак, тобі слід виконувати глибокий діагностичний тест за допомогою WebPageTest один раз на місяць, або відразу після будь-яких великих змін у дизайні або міграцій хостингу. Це допомагає виявити приховані регресії продуктивності, перш ніж вони вплинуть на твої SEO позиції.
Чи справді WebPageTest безкоштовний?
Так. План “Starter” безкоштовний та включає 150 тестових запусків на місяць, доступ до реальних мобільних пристроїв та глобальні локації для тестування. Вони пропонують платні плани “Pro” від $180/рік, які включають такі функції, як доступ до API, пріоритетне ставлення в чергу та “Експерименти без коду”, але безкоштовна версія більш ніж достатня для більшості розробників та власників сайтів.
