Избегайте объединения критических запросов в цепочку

Цепочки критических запросов — это серии зависимых сетевых запросов, важных для рендеринга страниц. Чем больше длина цепочек и больше размер загрузки, тем значительнее влияние на производительность загрузки страницы.

Lighthouse сообщает о критических запросах, загруженных с высоким приоритетом:

Скриншот аудита глубины критического запроса Lighthouse Minimize

Как Lighthouse идентифицирует критические цепочки запросов

Lighthouse использует приоритет сети в качестве прокси-сервера для идентификации критически важных ресурсов, блокирующих рендеринг. Дополнительную информацию о том, как Chrome определяет эти приоритеты, см. в разделе «Приоритеты и планирование ресурсов Chrome» Google.

Данные о критических цепочках запросов, размерах ресурсов и времени, потраченном на загрузку ресурсов, извлекаются из протокола удаленной отладки Chrome .

Как уменьшить влияние критических цепочек запросов на производительность

Используйте результаты аудита критических цепочек запросов, чтобы в первую очередь ориентироваться на ресурсы, которые оказывают наибольшее влияние на загрузку страницы:

  • Минимизируйте количество критически важных ресурсов: исключите их, отложите загрузку, пометьте как async и так далее.
  • Оптимизируйте количество критических байтов, чтобы сократить время загрузки (количество обращений туда и обратно).
  • Оптимизируйте порядок загрузки оставшихся критически важных ресурсов: загружайте все критически важные ресурсы как можно раньше, чтобы сократить длину критического пути.

Узнайте больше об оптимизации изображений , JavaScript , CSS и веб-шрифтов .

Рекомендации для конкретного стека

Магенто

Если вы не объединяете свои ресурсы JavaScript, рассмотрите возможность использования baler .

Ресурсы

Исходный код для минимизации критического аудита глубины запроса