Разбор со скриншотами тут - https://www.notion.so/astarta0/lifehacker-ru-Chrome-DevTools-Network-Performance-Coverage-e99ba3053bda48229b5d2899726fa1c0
Ниже скопированный текст из отчета.
HAR архив - профиль загрузки ресурсов:
Время до наступления события DOMContentLoaded(когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов) - 1.59s
Время до наступления события Load (когда ресурс и его зависимые ресурсы закончили загружаться) - 3.11s
- При запросе html время ответа сервера(TTFB) - 149.96 ms, а время загрузки файла составило 121.43ms
- Хорошо, что второстепенные скрипты подключены через async
- Но в то же врем реклама подключена без async
- Можно сократить кол-во запрашиваемых гугл-шрифтов, сейчас загружается много начертаний и много ненужных локалей(греческая, вьетнамская), но на сайте таких языков нет
- Подгружается 2 иконочных шрифта, но мы видим, что на странице используется только 1(icomoon):
- Очень большое количество запрашиваемых по одному css-файлов. Возможно, их можно было как-то объединить, чтобы не делать множество запросов и тем самым не блокировать загрузку других ресурсов. Так же возможно разделить на критические и не критические стили.
- Не все запрашиваемые css-файлы минимизированы
- Все это стоило перенести из в конец (скрипты)
- Можно было минифицировать саму html
- Загружается большое кол-во не сжатых картинок, а так же не сжатые картинки от сервисов рекламы
- Из-за большого количества подгружаемых ресурсов часть их них довольно долго стоит в очереди
- Часть запросов, связанная с отображением рекламы обращается к ресурсам, до которых долго устанавливается соединение
- Есть дублирующиеся запросы
- Всего при загрузке выполнено 158 запросов, и загружено 2,6 MB данных, что довольно много.
HAR архив - профиль загрузки ресурсов:
Сравнение времени с соединением без ограничения скорости
- Появились отмененные запросы
Профиль загрузки страницы:
C включенными опциями Slow 3G & 4x slowdown:
- Есть множество предупреждений, о неоптимальной работе с анимацией, пересчетом лайаута, стилей
Время в миллисекундах от начала навигации до событий
Рекомендуемое время для наступления события Load - до 5 секунд
Cколько времени тратится на разные этапы обработки документа
- При замедлении CPU видно что на сайте есть js-код, который блокирует event loop более чем на 350ms. Это говорит о том, что FPS на слабых мобильных устройствах будет примерно 2-3 кадра в секунду (1000 / 350 ms)
Объём неиспользованного CSS ~ 228 KB
Объём неиспользованного JS ~ 2132 KB
При замедлении сети итоговые цифры такие же(2.4 MB из 3.6 MB не используются, что составляет 66%).