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 Content Security Policy 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 rel (como "stylesheet", "icon", ou um rel em falta) é HTML inválido.

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

Você pretendia precarregar um recurso mas esqueceu-se de definir rel="preload" — por exemplo, escrever <link href="styles.css" as="style"> sem especificar rel.
Você adicionou as a um <link> comum por engano — por exemplo, escrever <link rel="stylesheet" href="styles.css" as="style">, onde as é desnecessário porque rel="stylesheet" já informa ao navegador que tipo de recurso é.

Fazer isto corretamente é importante 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. Além disso, HTML inválido pode causar comportamento imprevisível em diferentes navegadores.

Como corrigir

Se você quer precarregar um recurso (fonte, folha de estilos, imagem, script, etc.), defina rel="preload" e mantenha o atributo as.
Se você quer precarregar um módulo JavaScript, defina rel="modulepreload". O atributo as tem como padrão "script" para precarregamentos 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 e não é 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 estilos:

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

Correto: precarregar uma folha de estilos

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

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

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

Correto: precarregar uma fonte

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

O atributo crossorigin é obrigatório ao precarregar fontes, mesmo que sejam servidas a partir da mesma origem.

Correto: precarregar 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. Pode ainda incluí-lo explicitamente se preferir:

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

Correto: folha de estilos comum (não é necessário `as`)

Se você simplesmente quer carregar uma folha de estilos, não é necessário o atributo as:

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