Инструменты разработчика в браузере — девтулы — полезны не только разработчикам, но и всем, кто работает над сайтом: дизайнерам, редакторам, руководителям.
Руст Кулматов когда‑то рассказал о самых полезных для не‑разработчиков функциях: как менять текст, прятать и добавлять элементы, менять стили прямо на открытой странице — прочитайте советы по ссылкам, если не умеете этого делать.
А я сегодня расскажу про менее известную, но крайне полезную функцию девтулов — монитор сетевых запросов.
На нужной странице откройте девтулы клавишами F12, Command+Shift+I или Ctrl+Shift+I, в зависимости от системы. Перейдите во вкладку «Сеть», поставьте галочку «Отключить кэш» и обновите страницу. Вы увидите список сетевых запросов, которые браузер делает по ходу загрузки:
Обычно чем больше ресурсов требует страница, тем больше запросов, тем дольше страница загружается — тем хуже пользовательский опыт. К тому же, поисковики отдают предпочтение быстрым страницам: при прочих равных, более быстрая страница будет выше в поиске.
Вкладка «Сеть» позволяет увидеть проблемы с сетевыми запросами и найти способы оптимизировать загрузку страницы. Вот основные вещи, на которые можно обратить внимание даже не‑разработчику:
Тяжёлые ресурсы
Отсортируйте список по колонке «Размер». Подумайте, как можно уменьшить размер загружаемых файлов: попросить разработчиков оптимизировать картинки, включить сжатие кода или разбить его на части и загружать постепенно, по мере необходимости.
Медленные запросы
Обычно самые тяжёлые ресурсы и приводят к самым медленным запросам. Но бывает, что медленный запрос не связан с размером загружаемого файла. Например, это может быть запрос на сторонний сервер, который долго отвечает. Поговорите с разработчиками, как ускорить запрос или кэшировать ответ, не делать запрос без веской причины.
Сломанные запросы
Красным подсвечены запросы с ошибками. Почти всегда это проблема — недоступен файл или отвалился сторонний сервис. Обсудите с разработчиком, исправьте ошибку или предусмотрите её в коде, если исправить нельзя.
Проверка данных в запросах
Нажмите на запрос, чтобы увидеть его параметры, содержимое и ответ, если он имеется. Так можно проверять обмен данными между сайтом и другими сервисами.
Если не закрывать девтулы, в них будет видно все новые запросы. Так можно изучить запросы, которые отправляются по мере работы с сайтом. Например, если сайт отправляет данные о действиях пользователя в систему аналитики — вы увидите, когда это происходит и какие данные отправляются.
Заглядывайте во вкладку «Сеть» при приёмке задачи от разработчиков и периодически для профилактики. Ничего подозрительного? :‑)
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.