Lighthouse сообщает, сколько сетевых запросов было сделано и сколько данных было передано во время загрузки вашей страницы:
- Значения Requests и Transfer Size для строки Total вычисляются путем сложения значений строк Image , Script , Font , Stylesheet , Other , Document и Media .
- Столбец «Сторонний» не учитывается в значениях строки «Итог» . Его цель — сообщить вам, сколько общих запросов и какая часть общего размера передачи поступило со сторонних доменов. Сторонние запросы могут представлять собой комбинацию любых других типов ресурсов.
Как уменьшить количество ресурсов и размер передачи
Влияние большого количества ресурсов или больших размеров передачи на производительность нагрузки зависит от типа запрашиваемого ресурса.
CSS и JavaScript
Запросы файлов CSS и JavaScript по умолчанию блокируют рендеринг. Другими словами, браузеры не могут отображать контент на экране, пока не будут завершены все запросы CSS и JavaScript. Если какой-либо из этих файлов размещен на медленном сервере, этот медленный сервер может задержать весь процесс рендеринга. См. «Оптимизация JavaScript» , «Оптимизация сторонних ресурсов» и «Оптимизация CSS» , чтобы узнать, как отправлять только тот код, который вам действительно нужен.
Затронутые показатели: все
Изображений
Запросы изображений не блокируют рендеринг, как CSS и JavaScript, но они все равно могут отрицательно влиять на производительность загрузки. Распространенная проблема — когда мобильный пользователь загружает страницу и видит, что изображения начали загружаться, но для завершения требуется некоторое время. См. раздел Оптимизация изображений , чтобы узнать, как быстрее загружать изображения.
Затронутые показатели: первая содержательная отрисовка , первая значимая отрисовка , индекс скорости.
Шрифты
Неэффективная загрузка файлов шрифтов может привести к тому, что текст будет невидим во время загрузки страницы. См. раздел Оптимизация шрифтов , чтобы узнать, как по умолчанию использовать шрифт, доступный на устройстве пользователя, а затем переключиться на собственный шрифт после завершения его загрузки.
Затронутые метрики: первая контентная отрисовка.
Документы
Если ваш HTML-файл большой, браузеру придется потратить больше времени на анализ HTML и построение дерева DOM из проанализированного HTML.
Затронутые метрики: первая контентная отрисовка.
СМИ
Анимированные файлы GIF часто имеют очень большой размер. См. раздел «Замена GIF-файлов видео» , чтобы узнать, как быстрее загружать анимацию.
Затронутые метрики: первая контентная отрисовка.
Используйте бюджеты производительности, чтобы предотвратить регрессии
После того как вы оптимизировали свой код, чтобы уменьшить количество запросов и размер передачи, ознакомьтесь со статьей Установка бюджетов производительности , чтобы узнать, как предотвратить регрессии.
Ресурсы
Исходный код для поддержания низкого количества запросов и небольшого аудита размеров передачи