В этом видео вы узнаете почему WebPageTest хороший инструмент для проверки скорости сайта. Как им правильно пользоваться. Какие настройки надо активировать и что именно смотреть в аудите для анализа скорости сайта.
Проверьте скорость сайта сейчас:
Временные метки для видео:
- 0:00 – Музыкальное приветствие наших зрителей! Мы начинаем
- 2:00 – Вспоминаем о трех сервисах для замера скорости сайта с прошлого эфира https://www.youtube.com/watch?v=xCt_A…
- 4:11 – Вкратце о легендарном WebPageTest
- 7:10 — Демонстрация работы с сервисом WebPageTest, настраиваем параметры поиска
- 9:30 – Интерфейс сервиса: адрес сайта, локация проверки, тип браузера
- 10:50 – Настройки теста: скорость соединения, количество замеров, запись теста, тип повтора теста (с кэшем/без)
- 13:40 — Расширенные настройки: отключить JavaScript, очистить SSL кэш, игнорировать сертификат SSL и т.д.
- 14:50 – Настройки браузера Chrome: Lighthouse отчет, DevTools Timeline и другие параметры
- 16:27 – Вопрос из зала: «Почему не обязательно эмулировать мобильный браузер?»
- 16:59 – Как проверить новую не опубликованную версию сайта с изменениями
- 20:40 – Что главным образом повлияло на оценку
- 26:10 – Ответ на вопрос: «Мне lighthouse вывел оценку 32, а в PageSpeed Insights 65. Чудеса, с которыми нужно разобраться»
- 26:45 – Продолжение разбора отчетов по тесту на WebPageTest: XSS уязвимость, версия JavaScript библиотек
- 27:10 — Отчет по First Byte Time (Время первого ответа)
- 27:33 – Репорт по Keep Alive (Разрыв соединения/ответа). Немного о стороннем сервисе CDN Callibri, подробнее – 29:07
- 28:14 – Результат тестирования по кэшированию
- 29:33 – Обобщенный анализ сайта с суммарной оценкой показателей скорости
- 30:18 – Вопрос из зала: «Это отчет lighthouse из webpagetest?»
- 31:15 – Кратко о показателях: время полученного первого байта (First Byte), первая прорисовка (Start Render), прорисовка визуального контента (First Contentful Paint — FCP), скорость прорисовки (Speed Index), полная погрузка экрана (Last Painted Hero)
- 32:00 – Web Vitals: LCP (Largest Contentful Paint – время до отрисовки самого большого содержимого), CLS (Cumulative Layout Shift — нестабильность контента), TBT (Total Blocking Time – общее время блокировки)
- 32:22 – Стандартные метрики загрузки документа (Document Complete ) и полной загрузки (Fully Loaded)
- 33:23 – Объясняем результаты Waterfall отчета во временных рамках
- 39:00 – Комментарий из зала: «Желтая подсветка для строк, значит есть замечания у сервиса?»
- 39:26 – Детализация запросов: тип данных, начало запроса, время проверки SSL/установления соединения/DNS обращение
- 40:30 – Заголовки по каждому запросу и детали запроса
- 41:07 – Performance Review, суммарный чек-лист: отсутствие CDN, кэширование, сжатие
- 41:55 – Отрицательная оценка теста: неиспользование CDN, насколько это важно
- 42:23 – Легче анализируется детализация оценки по параметрам или суммарная оценка
- 43:19 – Как LOADING.express формирует оценку скорости сайта
- 44:14 – Content Breakdown по двум типам: по запросам и переданным байтам. Подробнее об uncompressed data (несжатые данные) – 45:00
- 45:43 – Отчет по доменам, с которыми устанавливается соединение
- 47:21 – Основной поток (Main-thread processing breakdown) и его процессы. Сколько времени занимает определенные категории данных
- 50:00 — Какие значения допустимы по блокировке главного потока (Page is Interactive)
- 58:27 – Lighthouse 6 от LOADING.express – сервис для замера скорости сайта также создает видеоотчет. Проверить можно по ссылке https://lh.loading.express/
- 1:03:20 – Заключение из выпуска о WebPageTest, как о сервисе с самым развернутым и детальным отчетом по замеру скорости загрузки сайта
- 1:06:30 – До следующего эфира!
Выводы про WebPageTest:
Сервис отличный. Современный и мощный. Так как последнее время разработчик этого сервиса не старается расширять географию проверок, то России в проверках нет.
После внедрения Web Vitals от Google — эти замеры появились в WPT. В нем есть видео загрузки сайта и сохраняется замер по ссылке, чтобы можно было сравнить до и после.