Чем отличаются атрибуты rel=”preload” и rel=”prefetch”?

Атрибуты rel=”preload” и rel=”prefetch” отличаются по назначению и приоритету загрузки ресурсов. doka.guide habr.com

rel=”preload” говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). doka.guide habr.com Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы, и нужно ускорить процесс. doka.guide habr.com Браузер обязан загрузить ресурс, указанный в rel=”preload”. habr.com

rel=”prefetch” просит браузер загрузить и кэшировать ресурс в фоновом режиме. doka.guide Загрузка происходит с низким приоритетом, поэтому не мешает более важным ресурсам. doka.guide habr.com Это полезно, если ресурс понадобится на следующей странице, а нужно заранее его кэшировать. doka.guide habr.com Браузер не обязан следовать этой инструкции, он может проигнорировать её, например, на медленном соединении. habr.com

Таким образом, preload используют, когда ресурс нужен сразу, а prefetch — когда он понадобится позже.