Verificação HTML: Um elemento "link" com um atributo "rel" que contém o valor "preload" deve ter um atributo "as".

Sobre este problema HTML

O valor preload do atributo rel do elemento <link> permite-lhe declarar pedidos de fetch no <head> HTML, instruindo o navegador a começar a carregar recursos críticos cedo no ciclo de vida da página—antes que o mecanismo principal de renderização entre em ação. Isto pode melhorar significativamente o desempenho ao garantir que os recursos-chave estão disponíveis mais cedo e têm menor probabilidade de bloquear a renderização.

No entanto, uma sugestão de preload está incompleta sem o atributo as. O atributo as diz ao navegador que tipo de recurso está a ser obtido. Isto importa por várias razões importantes:

Priorização de pedidos: Os navegadores atribuem diferentes prioridades a diferentes tipos de recursos. Uma folha de estilo tem tipicamente prioridade mais alta que uma imagem. Sem as, o navegador não consegue aplicar a prioridade correta, e o recurso pré-carregado pode ser obtido com uma prioridade padrão baixa, minando o propósito do pré-carregamento.
Content Security Policy (CSP): As regras CSP são aplicadas com base no tipo de recurso (por exemplo, script-src, style-src). Sem conhecer o tipo, o navegador não consegue aplicar a política apropriada.
Cabeçalho Accept correto: O valor as determina qual cabeçalho Accept o navegador envia com o pedido. Por exemplo, um pedido de imagem envia um cabeçalho Accept diferente de um pedido de script. Um cabeçalho incorreto ou em falta pode levar a respostas inesperadas do servidor.
Correspondência de cache: Quando o recurso é posteriormente solicitado por um <script>, <link rel="stylesheet"> ou outro elemento, o navegador precisa de corresponder este com o recurso pré-carregado na sua cache. Sem as, o navegador pode não reconhecer o recurso pré-carregado e pode obtê-lo novamente, resultando num pedido duplicado—o oposto do que pretendia.

A especificação HTML exige explicitamente o atributo as quando rel="preload" é usado, tornando isto um erro de conformidade.

Valores comuns de `as`

O atributo as aceita um conjunto específico de valores. Aqui estão os mais comumente usados:

Valor	Tipo de Recurso
`script`	Ficheiros JavaScript
`style`	Folhas de estilo CSS
`font`	Tipos de letra web
`image`	Imagens
`fetch`	Recursos obtidos via `fetch()` ou `XMLHttpRequest`
`document`	Documentos HTML (para `<iframe>`)
`audio`	Ficheiros de áudio
`video`	Ficheiros de vídeo
`track`	Faixas de legendas WebVTT
`worker`	Web workers ou shared workers

Exemplos

Incorreto: Atributo `as` em falta

Isto vai desencadear o erro de validação porque o navegador não sabe que tipo de recurso está a ser pré-carregado:

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

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

Correto: Atributo `as` incluído

Adicionar o valor as apropriado diz ao navegador exatamente que 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 tipos de letra e `crossorigin`

Ao pré-carregar tipos de letra, deve também incluir o atributo crossorigin, mesmo que o tipo de letra esteja alojado na mesma origem. Isto porque os pedidos de tipos de letra são pedidos CORS por padrão. Sem crossorigin, o tipo de letra pré-carregado não vai corresponder ao pedido de tipo de letra posterior e será obtido duas vezes:

<!-- Correto: inclui tanto as como crossorigin para tipos de letra -->

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

Exemplo completo de documento

<!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>

Escolher o valor as correto é direto—apenas corresponda-o a como o recurso será finalmente usado na página. Se está a pré-carregar uma folha de estilo, use as="style"; se for um script, use as="script", e assim por diante.