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 la declaración de codificación de caracteres resuelve este problema.

Cómo falla la auditoría de charset de Lighthouse

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

La auditoría de codificación de caracteres con errores.

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

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

Cómo aprobar la auditoría de charset

Agrega un elemento <meta charset> a tu código HTML

Agrega un elemento <meta charset> dentro de los primeros 1,024 bytes de tu documento HTML. El elemento debe estar contenido por completo dentro de los primeros 1,024 bytes. La práctica recomendada es hacer que el elemento <meta charset> 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 encabezado de respuesta HTTP Content-Type que incluya una directiva charset.

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

Recursos