timursk / DevToolsAnalysis

DevToolsAnalysis

Использование Chrome DevTools - анализ открытия сайта

1. Network

1.1 HAR архив - файл

1.2 Неоптимальные места

1.2.1 Дублирование ресурсов

• Файлы Bootstrap
  
• Файлы cast_sender.js & code.js
  
• Шрифты
  
• Картинка
  
• Favicon
  
• JQuery
  
• openapi.js
  
• popper.min.js
  

1.2.2 Лишний размер ресурса

• Размер >100kb, js не разбит на чанки
  
• Грузится большой спрайт 84.7kb, большая часть иконок/картинок не используется. Картинки можно обрезать и загрузить отдельно для экономии размеров файлов. Иконки внизу картинки можно переделать в svg со сменой цвета через css color, для избежания скачивания задублированных картинок с разным цветом.
  
• Изначальный размер картинки 1280x720, а используется 560x315. Можно сэкономить ~56% от изначального размера, предварительно обрезав картинку
  

1.2.3 Медленно загружающиеся ресурсы

• Долгозагружающиеся запросы с ошибками
  
• Запросы >200ms. JQuery не минифицирован.
  

1.2.4 Ресурсы, блокирующие загрузку

• Запросы JS
  
• Запросы CSS
  

1.2.5 Дополнительно

• CORS ошибки
  
• Запросы с ошибками
  
• Запросы, возвращающие 302 из-за которого происходит редирект (+1 запрос)
  

2. Pefrormance

2.1 Файл загрузки файл

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

• First Paint (FP) 393.4ms
  
• First Contentful Paint (FCP) 393.4ms
  
• Largest Contentful Paint (LCP) 1711.5ms
  
• DOM Content Loaded (DCL) 1374.0ms
  
• Load 21154.0ms
  

2.3 DOM Element на котором происходит LCP

• image
  

2.4 Время в миллисекундах на этапы обработки документа

• Loading 44ms
• Scripting 1765ms
• Rendering 784ms
• Painting 81ms
  

3. Coverage

3.1 Файл загрузки

3.2 Неиспользованный CSS

• 547kb
  

3.3 Неиспользованный JS

• ~2300kb
  

Анализ открытия сайта с замедлением CPU 4x slowdown и эмуляцией сети Slow 3G

1. Network

1.1 HAR архив - файл

1.2 Неоптимальные места

1.2.1 Дублирование ресурсов

• Файлы Bootstrap
  
• Файлы cast_sender.js & code.js
  
• JQuery
  
• openapi.js
  
• popper.min.js
  
• Шрифты
  
• Картинка
  

1.2.2 Лишний размер ресурса

• Размер >100kb, js не разбит на чанки
  
• Грузится большой спрайт 84.7kb, большая часть иконок/картинок не используется. Картинки можно обрезать и загрузить отдельно для экономии размеров файлов. Иконки внизу картинки можно переделать в svg со сменой цвета через css color, для избежания скачивания задублированных картинок с разным цветом.
  
• Изначальный размер картинки 1280x720, а используется 560x315. Можно сэкономить ~56% от изначального размера, предварительно обрезав картинку
  

1.2.3 Медленно загружающиеся ресурсы

• Запросы, которые загружались >200ms без замедления.
  

1.2.4 Ресурсы, блокирующие загрузку

• Запросы JS
  
• Запросы CSS
  

1.2.5 Дополнительно

• Запросы, возвращающие 302 из-за которого происходит редирект (+1 запрос)
  

2. Pefrormance

2.1 Файл загрузки файл

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

• First Paint (FP) 49001.1ms
  
• First Contentful Paint (FCP) 49001.1ms
  
• Largest Contentful Paint (LCP) 69056.7ms
  
• DOM Content Loaded (DCL) 55395.3ms
  
• Load 91266.3ms
  

2.3 DOM Element на котором происходит LCP

• image
  

2.4 Время в миллисекундах на этапы обработки документа

• Loading 173ms
• Scripting 7220ms
• Rendering 4118ms
• Painting 620ms
  

3. Coverage

3.1 Файл загрузки

3.2 Неиспользованный CSS

• 554kb
  

3.3 Неиспользованный JS

• ~2300kb