В данном проекте нужно проанализировать веб-страницу и дать рекомендации по ее оптимизации.
Страница открыта в режиме Инкогнито, для предотвращения нагрузки от сторонних плагинов браузера Chromium. На вкладке Network отключен cache, что эмулирует первый заход пользователя на страницу, когда у него пустой кэш.
-
Для начала записал
network.har, HAR архив профиль загрузки ресурсов при открытии страницы. Файлы HAR (HTTP Archive) фиксируют различные проблемы браузера, такие как неудачные входы и проблемы с отображением веб-страниц. -
Поиск неоптимальных мест:
-
Дублирование ресурсов. Вел поиск полных соответствий
name, url, параметров headers.Два одинаковых запроса, требующих высокий уровень степени защиты:
graphql— кэшируется 12 раз с разными тэгами, причемFPC— полный кэш страницы:Меняется только порядок правил доступа CORS к ресурсам между доменами —
tp23 запроса:Попарно одинаковые запросы на Google Fonts:
Каждый
.jpegи.pngна странице запрашивается по 2 раза: -
Лишний размер ресурсы, чаще всего
.pngи.jpegформаты, которые можно сжать, поиск по размеру Size выше 10kB:Сюда можно отнести неиспользуемые js файлы:
-
Медленно загружающиеся ресурсы, замедляют общую производительность. Это контент с большим ожиданием ответа от сервера, зеленая шкала
Waterflow: -
Ресурсы, блокирующие загрузку. В
Waterflowобозначены серой шкалойStalled:Скрипты от Яндекс, Google и от других сторонних источников также блокируют основной поток:
-
-
Другие не оптимальности, заблокированный запрос политикой CORS, ошибка доступа, доступ к геолокации отклонен, неудачная попытка создания WebGPU, неудачная попытка парса видео:
-
Записал файл загрузки
performance.json. -
Время в миллисекундах от начала навигации до событий (шкала
Timings):- First Paint (FP) – когда пользователь впервые что-то увидел,
2362.2 ms - First Contentful Paint (FCP) – когда браузер отображает первый элемент содержимого (текст, изображение, SVG, не пустой canvas),
2362.2 ms - Largest Contentful Paint (LCP) – время, необходимое для отображения на экране наибольшего элемента содержимого (изображение, текстовый блок и т.д.) при первом загрузке страницы,
6513.6 ms - DOM Content Loaded (DCL) – показывает, когда основной контент страницы готов к взаимодействию,
1863.8 ms - Load (L) – страница полностью загружена,
6720.2 ms
- First Paint (FP) – когда пользователь впервые что-то увидел,
-
LCP происходит на DOM-элементе
img.popup-metadata-type-slider__img: -
Сколько времени в миллисекундах тратится на разные этапы обработки документа (шкала Main, Summary):
- Loading, 23ms
- Scripting, 2816 ms
- Rendering, 323 ms
- Painting, 112 ms
-
Вкладка Coverage после загрузки страницы:
-
Объём в Кб неиспользованного CSS в ходе загрузки страницы — 45,4 Кб:
-
Объём в Кб неиспользованного JS в ходе загрузки страницы — 5900 Кб:
Этот анализ со включенным замедлением CPU 4x slowdown и эмуляцией сети Slow 3G.
Страница открыта в режиме Инкогнито, для предотвращения нагрузки от сторонних плагинов браузера Chromium. На вкладке Network отключен cache, что эмулирует первый заход пользователя на страницу, когда у него пустой кэш. Во вкладке Performance выставлены значения троттлинга Slow 3G и CPU 4x slowdown.
Увеличилось время для загрузки ресурсов, еще больше замедлилась общая производительность страницы.
Увеличилось время блокировки ресурсов, также добавился новый запрос 7733.
-
Записал новый файл загрузки performance-slowed.json
-
Время в миллисекундах от начала навигации до событий (шкала
Timings) значительно увеличилось:- First Paint (FP) – когда пользователь впервые что-то увидел,
26441.4 ms - First Contentful Paint (FCP) – когда браузер отображает первый элемент содержимого (текст, изображение, SVG, не пустой canvas),
26441.4 ms - Largest Contentful Paint (LCP) – время, необходимое для отображения на экране наибольшего элемента сод
4ABC
ержимого (изображение, текстовый блок и т.д.) при первом загрузке страницы,
26441.4 ms - DOM Content Loaded (DCL) – показывает, когда основной контент страницы готов к взаимодействию,
38115.6 ms - Load (L) – страница полностью загружена,
41673.2 ms
- Рендеры LCP и DCL поменялись местами
- First Paint (FP) – когда пользователь впервые что-то увидел,
-
LCP происходит на DOM-элементе
img: -
Сколько времени в миллисекундах тратится на разные этапы обработки документа (шкала Main, Summary):
- Loading, 33ms
- Scripting, 4160 ms
- Rendering, 99 ms
- Painting, 34 ms