Оптимизация критического пути рендеринга

Опубликовано: 31 марта 2014 г.

Чтобы обеспечить максимально быстрое время первого рендеринга, нам нужно минимизировать три переменные:

  • Количество критических ресурсов.
  • Длина критического пути.
  • Количество критических байтов.

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

Аналогично, длина критического пути является функцией графа зависимости между критическими ресурсами и их размером в байтах: загрузка некоторых ресурсов может быть инициирована только после обработки предыдущего ресурса, и чем больше ресурс, тем больше циклов туда и обратно требуется для загрузки.

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

Общая последовательность шагов по оптимизации критического пути рендеринга такова:

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

Обратная связь