Verificação HTML: Um elemento "link" com um atributo "as" deve ter um atributo "rel" que contenha o valor "preload" ou o valor "modulepreload".

Sobre este problema HTML

O atributo as especifica o tipo de conteúdo que um elemento <link> está a obter — como "style", "script", "font", ou "image". O navegador usa esta informação para definir os cabeçalhos de pedido corretos, aplicar a Política de Segurança de Conteúdo adequada, e atribuir a prioridade apropriada ao pedido. No entanto, a especificação HTML restringe o atributo as a elementos <link> cujo atributo rel seja "preload" ou "modulepreload". Usar as com qualquer outro valor de rel (como "stylesheet", "icon", ou um rel em falta) é HTML inválido.

Este erro de validação ocorre comumente em dois cenários:

Pretendia pré-carregar um recurso mas esqueceu-se de definir rel="preload" — por exemplo, escrever <link href="styles.css" as="style"> sem especificar rel.
Adicionou as a um <link> normal por engano — por exemplo, escrever <link rel="stylesheet" href="styles.css" as="style">, onde as é desnecessário porque rel="stylesheet" já informa o navegador sobre o tipo de recurso.

Fazer isto corretamente importa por várias razões. Os navegadores dependem de valores rel válidos para determinar como lidar com recursos ligados. Uma combinação incorreta pode fazer com que o navegador ignore completamente o atributo as, levando a dupla obtenção de recursos ou priorização incorreta. Adicionalmente, HTML inválido pode causar comportamento imprevisível entre diferentes navegadores.

Como corrigir

Se você quer pré-carregar um recurso (fonte, folha de estilo, imagem, script, etc.), defina rel="preload" e mantenha o atributo as.
Se você quer pré-carregar um módulo JavaScript, defina rel="modulepreload". O atributo as tem como padrão "script" para pré-carregamentos de módulos e é opcional nesse caso.
Se você está a usar um valor rel diferente como "stylesheet" ou "icon", remova o atributo as — não é necessário nem permitido.

Exemplos

Incorreto: atributo `as` sem `rel="preload"`

Este <link> tem as="style" mas nenhum atributo rel:

<link href="styles.css" as="style">

Incorreto: atributo `as` com `rel="stylesheet"`

O atributo as não é válido numa ligação de folha de estilo:

<link rel="stylesheet" href="styles.css" as="style">

Correto: pré-carregar uma folha de estilo

Use rel="preload" com o atributo as para indicar o tipo de recurso:

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

Note que pré-carregar uma folha de estilo não a aplica — você ainda precisa de um <link rel="stylesheet"> separado para realmente usar o CSS.

Correto: pré-carregar uma fonte

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

O atributo crossorigin é obrigatório ao pré-carregar fontes, mesmo que sejam servidas da mesma origem.

Correto: pré-carregar um módulo JavaScript

<link rel="modulepreload" href="app.js">

Com rel="modulepreload", o atributo as tem como padrão "script", por isso pode omiti-lo. Você ainda pode incluí-lo explicitamente se preferir:

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

Correto: folha de estilo normal (nenhum `as` necessário)

Se você simplesmente quer carregar uma folha de estilo, nenhum atributo as é necessário:

<link rel="stylesheet" href="styles.css">

Exemplo de documento completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preload Example</title>
<!-- Preload critical resources -->

  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="hero.jpg" as="image">
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Apply the stylesheet -->

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <img src="hero.jpg" alt="Hero banner">
</body>
</html>