Validación HTML: Un elemento "link" con un atributo "rel" que contiene el valor "preload" debe tener un atributo "as".

Acerca de este problema HTML

El valor preload del atributo rel del elemento <link> te permite declarar solicitudes de fetch en el <head> HTML, indicando al navegador que comience a cargar recursos críticos temprano en el ciclo de vida de la página—antes de que se active la maquinaria principal de renderizado. Esto puede mejorar significativamente el rendimiento asegurando que los recursos clave estén disponibles antes y sea menos probable que bloqueen el renderizado.

Sin embargo, una pista de precarga está incompleta sin el atributo as. El atributo as le dice al navegador qué tipo de recurso se está obteniendo. Esto es importante por varias razones importantes:

Priorización de solicitudes: Los navegadores asignan diferentes prioridades a diferentes tipos de recursos. Una hoja de estilo es típicamente de mayor prioridad que una imagen. Sin as, el navegador no puede aplicar la prioridad correcta, y el recurso precargado puede ser obtenido con una prioridad baja por defecto, socavando el propósito de la precarga.
Content Security Policy (CSP): Las reglas CSP se aplican basándose en el tipo de recurso (ej., script-src, style-src). Sin conocer el tipo, el navegador no puede hacer cumplir la política apropiada.
Cabecera Accept correcta: El valor as determina qué cabecera Accept envía el navegador con la solicitud. Por ejemplo, una solicitud de imagen envía una cabecera Accept diferente que una solicitud de script. Una cabecera incorrecta o faltante podría llevar a respuestas inesperadas del servidor.
Coincidencia de caché: Cuando el recurso es solicitado posteriormente por un <script>, <link rel="stylesheet">, u otro elemento, el navegador necesita emparejarlo con el recurso precargado en su caché. Sin as, el navegador puede no reconocer el recurso precargado y podría obtenerlo de nuevo, resultando en una solicitud duplicada—lo opuesto a lo que pretendías.

La especificación HTML requiere explícitamente el atributo as cuando se usa rel="preload", haciendo esto un error de conformidad.

Valores `as` comunes

El atributo as acepta un conjunto específico de valores. Aquí están los más comúnmente utilizados:

Valor	Tipo de recurso
`script`	Archivos JavaScript
`style`	Hojas de estilo CSS
`font`	Fuentes web
`image`	Imágenes
`fetch`	Recursos obtenidos vía `fetch()` o `XMLHttpRequest`
`document`	Documentos HTML (para `<iframe>`)
`audio`	Archivos de audio
`video`	Archivos de video
`track`	Pistas de subtítulos WebVTT
`worker`	Web workers o shared workers

Ejemplos

Incorrecto: Falta el atributo `as`

Esto disparará el error de validación porque el navegador no sabe qué tipo de recurso se está precargando:

<link rel="preload" href="/fonts/roboto.woff2">

<link rel="preload" href="/js/app.js">

Correcto: Atributo `as` incluido

Añadir el valor as apropiado le dice al navegador exactamente qué tipo de recurso esperar:

<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

<link rel="preload" href="/js/app.js" as="script">

<link rel="preload" href="/css/main.css" as="style">

<link rel="preload" href="/images/hero.webp" as="image">

Nota sobre fuentes y `crossorigin`

Cuando precargas fuentes, también debes incluir el atributo crossorigin, incluso si la fuente está alojada en el mismo origen. Esto es porque las obtenciones de fuentes son solicitudes CORS por defecto. Sin crossorigin, la fuente precargada no coincidirá con la solicitud de fuente posterior y será obtenida dos veces:

<!-- Correcto: incluye tanto as como crossorigin para fuentes -->

<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

Ejemplo de documento completo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Preload Example</title>
    <link rel="preload" href="/css/main.css" as="style">
    <link rel="preload" href="/js/app.js" as="script">
    <link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="/js/app.js"></script>
  </body>
</html>

Elegir el valor as correcto es sencillo—simplemente emparéjalo con cómo el recurso será utilizado finalmente en la página. Si estás precargando una hoja de estilo, usa as="style"; si es un script, usa as="script", y así sucesivamente.