108: Проверить скорость сайта с WebPageTest

В этом видео вы узнаете почему 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 – Как проверить новую не опубликованную версию сайта с изменениями

• 19:30 – Разбор результатов тестирования Web Page Performance Test, подробно – 26:45

• 20:40 – Что главным образом повлияло на оценку

• 21:51 – Сравнение результатов WebPageTest с Google PageSpeed, подробнее – 25:55

• 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 отчета во временных рамках

• 38:33 – Что говорит разделение по зонам в показателях Page is Interactive, подробнее – 50:00

• 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)

• 52:00 – Рассматриваем и разбираем скриншот-отчеты, видеоотчеты – 53:50

• 58:27 – Lighthouse 6 от LOADING.express – сервис для замера скорости сайта также создает видеоотчет. Проверить можно по ссылке https://lh.loading.express/

• 1:03:20 – Заключение из выпуска о WebPageTest, как о сервисе с самым развернутым и детальным отчетом по замеру скорости загрузки сайта

• 1:06:30 – До следующего эфира!

Выводы про WebPageTest:

Сервис отличный. Современный и мощный. Так как последнее время разработчик этого сервиса не старается расширять географию проверок, то России в проверках нет.

После внедрения Web Vitals от Google — эти замеры появились в WPT. В нем есть видео загрузки сайта и сохраняется замер по ссылке, чтобы можно было сравнить до и после.