Чтобы обеспечить максимально быстрое время первого рендеринга, нам нужно минимизировать три переменные:
- Количество критических ресурсов.
- Длина критического пути.
- Количество критических байтов.
Критический ресурс — это ресурс, который может заблокировать первоначальный рендеринг страницы. Чем меньше этих ресурсов, тем меньше работы приходится на браузер, процессор и другие ресурсы.
Точно так же длина критического пути является функцией графа зависимости между критическими ресурсами и их размером в байтах: загрузка некоторых ресурсов может быть инициирована только после обработки предыдущего ресурса, и чем больше ресурс, тем больше циклов обработки требуется для загрузки.
Наконец, чем меньше критических байтов должен загрузить браузер, тем быстрее он сможет обрабатывать контент и отображать его на экране. Чтобы уменьшить количество байтов, мы можем уменьшить количество ресурсов (устранить их или сделать некритическими) и гарантировать минимизацию размера передачи путем сжатия и оптимизации каждого ресурса.
Общая последовательность шагов по оптимизации критического пути рендеринга такова:
- Проанализируйте и охарактеризуйте свой критический путь: количество ресурсов, байты, длину.
- Минимизируйте количество критически важных ресурсов: удалите их, отложите загрузку, пометьте как асинхронные и т. д.
- Оптимизируйте количество критических байтов, чтобы сократить время загрузки (количество обращений туда и обратно).
- Оптимизируйте порядок загрузки оставшихся критически важных ресурсов: загружайте все критически важные ресурсы как можно раньше, чтобы сократить длину критического пути.