Как использовать вкладку Network в DevTools? Как определить, почему страница медленно загружается?

Вкладка Network в DevTools позволяет отслеживать все сетевые запросы, которые делает страница: загрузка HTML, CSS, JS, изображений, API-запросы и т.д.

Чтобы определить, почему страница медленно загружается, нужно:

• Посмотреть время загрузки каждого ресурса (столбец Time).
• Обратить внимание на статус запросов — есть ли ошибки или долгие ожидания.
• Проверить, какие ресурсы загружаются дольше всего (например, большие изображения или тяжелые скрипты).
• Использовать фильтры, чтобы выделить типы ресурсов (JS, CSS, XHR).
• Посмотреть на последовательность загрузки — возможно, есть блокирующие скрипты или ресурсы.

Например, если основной HTML загружается быстро, а потом долго грузятся изображения, можно оптимизировать их размер или использовать ленивую загрузку. Если API-запросы отвечают медленно — проблема на сервере или в сети.