Falta la declaración del charset o aparece demasiado tarde en el código HTML

Los servidores y los navegadores se comunican entre sí enviando bytes de datos a través de Internet. Si el servidor no especifica qué formato de codificación de caracteres usa cuando envía un archivo HTML, el navegador no sabrá qué carácter representa cada byte. La especificación de declaración de codificación de caracteres resuelve este problema.

Cómo falla la auditoría charset de Lighthouse

Lighthouse marca las páginas que no especifican su codificación de caracteres:

Es la auditoría de codificación de caracteres que falló.

Lighthouse considera que la codificación de caracteres se declara si encuentra alguno de los siguientes elementos:

  • Un elemento <meta charset> en el <head> del documento que está completamente contenido en los primeros 1024 bytes del documento
  • Un encabezado de respuesta HTTP Content-Type con una directiva charset que coincida con un nombre IANA válido
  • Una marca de orden de bytes (BOM)

Cómo aprobar la auditoría charset

Agrega un elemento <meta charset> a tu HTML

Agrega un elemento <meta charset> dentro de los primeros 1024 bytes de tu documento HTML. El elemento debe estar completamente contenido dentro de los primeros 1024 bytes. La práctica recomendada es hacer que el <meta charset> elemento sea el primero en el <head> de tu documento.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    …

Agrega un encabezado de respuesta HTTP Content-Type

Configura tu servidor para agregar un Content-Type encabezado de respuesta HTTP que incluya una charset directiva.

Content-Type: text/html; charset=UTF-8

Recursos