Preloading

Preload tells the browser about a critical resource to fetch early (MDN).

Updated 

<link rel="preload" href="/img/hero.avif" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/police.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Preload sparingly, always set as and measure the effect: a misplaced preload hurts performance. Use cases: LCP image, fonts (CLS). Add preconnect to essential third-party origins.