Skip to content

Astarta0/site-analysis

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

Разбор со скриншотами тут - https://www.notion.so/astarta0/lifehacker-ru-Chrome-DevTools-Network-Performance-Coverage-e99ba3053bda48229b5d2899726fa1c0

Ниже скопированный текст из отчета.

Вкладка Network


HAR архив - профиль загрузки ресурсов:

lifehacker.ru.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 данных, что довольно много.


При включении Slow 3G

HAR архив - профиль загрузки ресурсов:

lifehacker.ru_slow3G.har

Сравнение времени с соединением без ограничения скорости

  • Появились отмененные запросы

Вкладка Performance


Профиль загрузки страницы:

PXWiuTcKujVPSQ

C включенными опциями Slow 3G & 4x slowdown:

57EBqrSd1a4xVA

  • Есть множество предупреждений, о неоптимальной работе с анимацией, пересчетом лайаута, стилей

Время в миллисекундах от начала навигации до событий

Метрики загрузки страницы

Рекомендуемое время для наступления события Load - до 5 секунд

Cколько времени тратится на разные этапы обработки документа


  • При замедлении CPU видно что на сайте есть js-код, который блокирует event loop более чем на 350ms. Это говорит о том, что FPS на слабых мобильных устройствах будет примерно 2-3 кадра в секунду (1000 / 350 ms)

Вкладка Coverage


Объём неиспользованного CSS ~ 228 KB

Объём неиспользованного JS ~ 2132 KB


При замедлении сети итоговые цифры такие же(2.4 MB из 3.6 MB не используются, что составляет 66%).