<link rel="preload"> is a resource hint that triggers an immediate fetch of a resource the page will need, ahead of the parser discovering it through normal HTML / CSS / JS parsing. Used right, it shaves milliseconds off LCP for late-discovered critical resources (LCP image referenced inside a CSS background-image, an above-the-fold web font invoked through @font-face).
The as attribute is mandatory. Without it the browser either ignores the preload entirely or fetches the resource a second time when the real request fires -- the operator's preload effort gets wasted. Common as values: script, style, font, image, fetch, document.
The crossorigin attribute is required for any preload that will be fetched as a CORS request. Fonts always are: a font preload without crossorigin creates a different cache key than the actual @font-face request, and the browser silently downloads the font twice. This is the most common preload bug in production -- the operator gets the worst of both worlds (extra request AND no perceived perf benefit).
Use sparingly. Each preload competes with critical-path resources for bandwidth. A page with 10+ preloads usually has misidentified what's truly critical.