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 requisições de fetch no <head> do HTML, dizendo ao browser para começar a carregar recursos críticos precocemente no ciclo de vida da página—antes da maquinaria principal de renderização entrar em ação. Isto pode melhorar significativamente o desempenho ao garantir que recursos-chave estão disponíveis mais cedo e são menos propensos a bloquear a renderização.

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

Priorização de requisições: Os browsers atribuem diferentes prioridades a diferentes tipos de recursos. Uma folha de estilos é tipicamente de prioridade mais alta que uma imagem. Sem as, o browser não pode aplicar a prioridade correta, e o recurso pré-carregado pode ser obtido com uma prioridade baixa por defeito, 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 browser não pode aplicar a política apropriada.
Cabeçalho Accept correto: O valor as determina qual cabeçalho Accept o browser envia com a requisição. Por exemplo, uma requisição de imagem envia um cabeçalho Accept diferente de uma requisição de script. Um cabeçalho incorreto ou em falta pode levar a respostas inesperadas do servidor.
Correspondência de cache: Quando o recurso é posteriormente requisitado por um <script>, <link rel="stylesheet">, ou outro elemento, o browser precisa de o corresponder ao recurso pré-carregado no seu cache. Sem as, o browser pode não reconhecer o recurso pré-carregado e pode obtê-lo novamente, resultando numa requisição duplicada—o oposto do que pretendia.

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

Valores `as` comuns

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

Valor	Tipo de Recurso
`script`	Ficheiros JavaScript
`style`	Folhas de estilos CSS
`font`	Fontes 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 irá despoletar o erro de validação porque o browser 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 browser 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 fontes e `crossorigin`

Ao pré-carregar fontes, deve também incluir o atributo crossorigin, mesmo que a fonte esteja alojada na mesma origem. Isto é porque as obtenções de fontes são requisições CORS por defeito. Sem crossorigin, a fonte pré-carregada não irá corresponder à requisição de fonte posterior e será obtida duas vezes:

<!-- Correto: inclui tanto as como crossorigin para fontes -->

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

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

Escolher o valor as correto é simples—basta correspondê-lo à forma como o recurso será finalmente usado na página. Se está a pré-carregar uma folha de estilos, use as="style"; se é um script, use as="script", e assim por diante.