Сталкивался ли с Preload

«Сталкивался ли с Preload» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, preload — это атрибут <link>, который позволяет заранее загружать критически важные ресурсы (шрифты, скрипты, стили) до их фактического использования. Это ускоряет загрузку страницы, так как браузер начинает загрузку раньше.

Пример:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Ключевые моменты:

  • Указывается as для типа ресурса (font, script, style и т.д.)
  • Для шрифтов обязателен crossorigin
  • Лучше использовать для критических ресурсов, иначе можно ухудшить производительность
  • Поддерживается современными браузерами

Preload отличается от prefetch тем, что prefetch загружает ресурсы с низким приоритетом для будущих навигаций, а preload — с высоким приоритетом для текущей страницы.