Избегайте цепочек критических запросов

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

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

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

Скриншот проверки Minimize critical request depth («Минимизируйте глубину критических запросов») в Lighthouse

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Как Lighthouse выявляет цепочки критических запросов

Lighthouse использует сетевой приоритет в качестве косвенного критерия для определения критических ресурсов, блокирующих рендеринг. Подробнее о том, как Chrome определяет сетевой приоритет, см. в статье Chrome Resource Priorities and Scheduling (Google).

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

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

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

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

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

Рекомендации по стекам

Magento

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

Ресурсы

Исходный код проверки Minimize critical request depth («Минимизируйте глубину критических запросов»)

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.