Аналізатор водоспаду запитів з HAR-файлу
Завантажте .har-файл, експортований з панелі DevTools вашого браузера, щоб побачити реальний водоспад запитів, побудований на основі власних часових даних кожного запиту, а також перевірки на відсутні заголовки кешування, нестиснуті відповіді та скрипти, що блокують рендеринг.
Результат
HAR (HTTP Archive) — це JSON-експорт усього, що панель DevTools "Мережа" вашого браузера зафіксувала під час завантаження сторінки: усі заголовки запитів і відповідей, точний розмір і MIME-тип кожного тіла відповіді, а також розбивку часу для кожного запиту. Такий файл можна отримати в Chrome, Firefox, Edge чи Safari: відкрийте DevTools, перезавантажте сторінку на вкладці "Мережа", а потім клацніть правою кнопкою на списку запитів і виберіть "Save all as HAR with content". Цей інструмент читає експортований файл напряму — нічого не завантажується й не запитується повторно.
Графік водоспаду будується повністю з даних, які вже є у файлі: власний об'єкт timings кожного запису розбиває запит на фази blocked, пошук DNS, connect, узгодження SSL/TLS, send, wait (час до першого байта) і receive, і кожна фаза малюється як окремий кольоровий сегмент. Згідно зі специфікацією HAR, час ssl також включений усередину connect, тому його спершу віднімають назад — інакше частина TLS враховувалася б двічі, і ширина сегментів більше не відповідала б реальній тривалості запиту. Пунктирні вертикальні мітки показують DOMContentLoaded і Load, зчитані прямо з власних таймінгів сторінки у файлі, тож ви бачите, які саме запити завершилися до того, як сторінка стала інтерактивною.
Окрім графіка, інструмент застосовує три правила перевірки до полів, які формат HAR вже фіксує. Він позначає придатні для кешування відповіді (статус 200, 203 або 206), що не мають ні заголовка Cache-Control, ні Expires, а це означає, що повторний візит змушений завантажувати їх заново з нуля. Він позначає текстові відповіді — HTML, CSS, JavaScript, JSON, SVG тощо — розміром понад 1 КБ, надіслані без Content-Encoding, тобто просту можливість стиснення, яку більшість серверів можна увімкнути одним рядком конфігурації. І він позначає запити CSS чи JavaScript, що почалися до власного зсуву DOMContentLoaded сторінки — класичну ознаку ресурсу, що блокує рендеринг.
Усе це працює на даних, які вже містяться у завантаженому вами файлі — немає ні мережевого доступу, ні зовнішнього сервісу пошуку, ні повторного завантаження вихідної сторінки. HAR-файл читається, розбирається й відображається повністю у вкладці вашого браузера і ніколи нікуди не завантажується.
Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.
Нюанси та Формати
- Водоспад запитів, намальований на canvas і розфарбований за фазою таймінгу, з мітками DOMContentLoaded і Load.
- Три групи перевірок за правилами: відсутні заголовки кешування, нестиснуті текстові відповіді та кандидати на блокування рендерингу.
- Повністю офлайн: завантажений .har-файл розбирається й аналізується повністю у вашому браузері — нічого нікуди не надсилається.
Наші переваги
Сценарії використання
- • Діагностуйте, чому сторінка здається повільною, завантаживши її експортований HAR-файл і переглянувши реальну розбивку часу для кожного запиту замість здогадів із відеозапису екрана.
- • Перевірте стратегію кешування сайту, знайшовши кожну відповідь, надіслану без Cache-Control чи Expires, яку довелося б завантажувати заново під час кожного повторного візиту.
- • Виявіть CSS чи JavaScript, що блокують рендеринг, ще до повного аудиту продуктивності, перевіривши, які запити почалися до DOMContentLoaded у захопленому HAR-файлі.
Оцініть інструмент
