Про работу с Network (Сеть) в браузере

Этот пост для тех, кто открывает вкладку Network и не понимает, что и где смотреть.

Проблемы, которые он помогает решить:
1) Отслеживать что отправляется на сервер и что приходит в ответ.
2) Ненужные CSS и JS файлы, которые добавляет WordPress и влияют на скорость загрузки страниц.
3) Неоптимальная загрузка изображений. Все картинки грузятся сразу, даже те, которые не видны сразу.
4) Низкая скорость загрузки страниц сайта.

Fetch/XHR — для отладки API, форм и AJAX-запросов.
Можно отслеживать что отправляю на сервер и что получаю в ответ.

CSS/JS — показывает, какие CSS/JS файлы загрузились на странице.
Если сайт на Wordpress, то по умолчанию он подключает 5-10 лишних файлов. Про другие CMS не знаю, сказать нечего. К примеру — это файл стилей Гутенберг блоков. Вы можете не использовать эти блоки, но стили к ним он загрузит.
❗️ДЛЯ ТИЛЬДЫ. Можно увидеть, когда вы подключаете два раза jQuery к сайту.

Img — показывает какие картинки загрузились на странице.
Она показывает все загруженные картинки на странице. Зная это, можно настроить отложенные картинки.
Ещё здесь видно, какая картинка очень много весит и её стоит оптимизировать.
❗️ДЛЯ ТИЛЬДЫ. Можно увидеть, какие картинки с отложенной загрузкой, а какие нет.

Font — показывает какие шрифты загрузились на странице.
Полезно для тех, кто использует 10+ шрифтов на сайте. Все они загружаются здесь и влияют на скорость загрузки страницы.
❗️ДЛЯ ДИЗАЙНЕРОВ. Здесь можно посмотреть какие шрифты используются на сайте и скачать их себе. Просто кликните 2 раза по нему и потом ctrl (cmd) + s — сохранить.

Набросайте огня, если всё понятно 👇