В современных браузерах существует механизм, известный как сканер предварительной загрузки или спекулятивный HTML парсер, который используется для оптимизации скорости загрузки страниц. В 2021 году этот механизм был определен в стандарте HTML, хотя он применяется уже довольно давно.
Начать следует с основного HTML парсера. Первое, что получает браузер при переходе на любую страницу, это HTML. Как только браузер получает HTML, запускается основной парсер, задача которого — пройти по всему HTML, построить DOM и найти ссылки на все внешние ресурсы для добавления в очередь загрузки.
Некоторые стили блокируют отрисовку, чтобы пользователи не видели нестилизованную страницу. Также синхронные скрипты блокируют и отрисовку, и основной парсер, поскольку неизвестно, как скрипт может изменить страницу в результате выполнения. Основной парсер во время блокировки ждет, пока скрипт выполнится.
Здесь на сцену выходит сканер предварительной загрузки. Это еще один, более легкий парсер, который ищет ссылки на внешние ресурсы, пока основной парсер заблокирован. Обнаруженные таким образом ресурсы передаются сетевому процессу, где они добавляются в очередь загрузки согласно приоритету.
В результате ресурсы могут начать загружаться и даже успеть загрузиться еще до того, как основной парсер их обнаружит. Применение этой оптимизации в свое время ускорило загрузку страниц до 20%. Сегодня эта оптимизация доступна во всех браузерах из коробки, ничего настраивать не нужно, главное — не мешать.
Как не мешать:
- Не подключать важные ресурсы через JS и CSS.
- Не подключать важные ресурсы через сторонние контейнеры (например Tag Manager).
- Не использовать
document.write().- Использовать подсказки ресурсов.
- Использовать
loading="lazy" для ленивой загрузки вместо библиотек.- Использовать статическую генерацию (SSG), рендеринг на стороне сервера (SSR) или гибридные подходы вместо только клиентского рендеринга (CSR).
#html #performance
