Як використовувати файли HAR для аналізу продуктивності з плином часу

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

Вкладка Мережа Chrome

На вкладці мережі ви отримаєте таблицю, що містить усі активи, завантажені на сторінку. Він також покаже вам відповідну інформацію про походження цих активів (домен, код стану HTTP, розмір), які ініціювали запит, та порядок їх завантаження у поданні водоспаду.

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

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

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

Покращення продуктивності помітне за змінами у вашому коді / середовищі. То як ми можемо відстежувати те, що аналізується на вкладці Мережа? Експортуючи сторінку у форматі HAR.

Що таке файл HAR?

Файл HAR (скорочення від HTTP Archive) - це файл JSON, що містить всю інформацію про взаємодію браузера зі сторінкою. Він міститиме документ HTML та відповідні файли JS та CSS.

Разом із цим вмістом файл HAR також міститиме всю інформацію заголовків та метадані браузера (тобто час кожного запиту).

Тут важливо зазначити, що файли cookie та дані форми також будуть записані у файл, тому будьте обережні, щоб не включати конфіденційну інформацію (особисті дані, паролі, номери кредитних карток) під час перевірки сторінок.

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

Створення файлів HAR

Гугл хром

  • Закрийте всі вікна анонімного перегляду в Google Chrome.
  • Відкрийте нове вікно анонімного перегляду в Google Chrome.
  • Перейдіть до Перегляд> Розробник> Інструменти розробників.
  • На панелі Інструменти розробника виберіть вкладку Мережа.
  • Установіть прапорці Зберегти журнал та Вимкнути кеш, щоб записати всі взаємодії.
  • Оновіть сторінку.
  • Клацніть на Export HAR (значок стрілки вниз), щоб експортувати файл HAR.
  • Збережіть файл HAR.

Firefox

  • Закрийте всі приватні вікна у Firefox.
  • Відкрийте нове приватне вікно у Firefox.
  • Перейдіть до Інструменти> Розробник> Мережа або ctrl-shift-E.
  • Оновіть сторінку.
  • На піктограмі Cog (у верхній правій частині сторінки) виберіть Save All As Har.
  • Збережіть файл HAR.
Вкладка Firefox Network

Сафарі

  • Переконайтеся, що в меню Safari> Налаштування> Додатково встановлено прапорець Показати меню «Розробка» на рядку меню.
  • Виберіть «Файл»> «Відкрити нове приватне вікно».
  • Відвідайте веб-сторінку, де виникає проблема.
  • Виберіть Розробити> Показати веб-інспектор. З'явиться вікно Web Inspector.
  • Оновіть сторінку.
  • Клацніть Експорт у верхній правій частині панелі.
  • Збережіть файл HAR.
Вкладка Safari Network

Читання файлів HAR

Коли у вас є файл HAR, ви можете спробувати кілька глядачів HAR в Інтернеті. Мій особистий улюблений - той, який створив Ян Одаварко.

HAR Viewer

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

Використання файлів HAR для аналізу продуктивності сторінки

Файли HAR можуть бути корисними для збору інформації про активи сторінки. Оскільки ви маєте детальну інформацію про їх вміст, ви можете порівняти, що покращилось (або в деяких випадках - не покращилось) після запуску нової функції або завершення редизайну, наприклад.

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

Більше інформації

  • Виміряйте час завантаження ресурсу
  • Вихідний код HAR Viewer

Також розміщено в моєму блозі. Якщо вам подобається цей вміст, підпишіться на мене у Twitter та GitHub. Фото обкладинки Вільяма Дайньо / Unsplash