Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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

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

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

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

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

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

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

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

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