Можно ли ресурс загрузить раньше но оставить его в том же месте где он используется

Да, можно использовать <link rel="preload"> для предзагрузки ресурса, сохранив его стандартное использование в коде. Например:

<!-- Предзагрузка шрифта -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Обычное использование -->
<style>
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
}
</style>

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

• preload загружает ресурс с высоким приоритетом
• Браузер кэширует ресурс и использует его при обычном обращении
• Важно указывать правильный as (font, script, style и т.д.)
• Для кросс-доменных ресурсов нужен crossorigin

Аналогично работает для скриптов, стилей, изображений и других ресурсов.