Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Оптимизация процесса визуализации

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

  • число первоочередных ресурсов;
  • число байтов;
  • продолжительность обработки.

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

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

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

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

Чтобы оптимизировать процесс визуализации, нужно выполнить следующие действия:

  1. Выяснить количество ресурсов и байтов, определить продолжительность обработки.
  2. Минимизировать количество первоочередных ресурсов: устранить их, отложить их скачивание, использовать асинхронные скрипты и т. д.
  3. Найти оптимальный порядок загрузки оставшихся ресурсов. Чем быстрее браузер получит все ресурсы, тем меньше времени займет визуализация.
  4. Минимизировать число байтов, чтобы сократить время их скачивания и число соединений.