Про работу с 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 — сохранить. Набросайте огня, если всё понятно 👇