Атрибуты rel='preload' и rel='prefetch' отличаются по назначению и приоритету загрузки ресурсов. 12

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

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

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