Un boilerplate de HTML opinionado: el orden del head decide el rendimiento

Un desarrollador ha publicado la plantilla base de HTML que usa como punto de partida en cada documento que escribe. No hay lanzamiento ni version nueva de nada detras: es la estructura de head que arrastra de un proyecto a otro y que ahora ha desglosado etiqueta por etiqueta. La plantilla es opinionada, y el propio autor lo reconoce.

El contexto ayuda a entender por que el head de una pagina moderna acaba pesando tanto. Cuando nacio HTML, un documento valido podia ser un titulo, un encabezado y un parrafo. Con HTML 2.0, en 1995, llegaron la declaracion de tipo de documento y las secciones head y body. Desde entonces el principio que sostiene el estandar es el de no romper la web: un sitio de los noventa sigue abriendose en un navegador actual. Eso se consigue con elementos que activan funcionalidad nueva si estan presentes y caen al comportamiento antiguo si no, de modo que el boilerplate opta por lo moderno y declara de paso las preferencias del sitio.

Que lleva y por que

El doctype de HTML servivo abre el documento para no caer en el modo quirks. Le sigue html con el atributo lang, que debe ser una etiqueta conforme a RFC 5646 porque de ahi salen la traduccion automatica, la particion de palabras y los lectores de pantalla. Despues, meta charset en UTF-8 como primer elemento del head: tiene que aparecer dentro de los primeros 1024 bytes del documento y antes de cualquier cosa que pueda corromperse.

El viewport con width=device-width viene de una decision de Apple en 2007, cuando el primer iPhone renderizaba sitios de escritorio esperando que el usuario hiciera zoom. El autor sostiene, tras probarlo, que anadir initial-scale=1 no aporta nada y que solo sirve para tapar un elemento que desborda el ancho de pantalla, algo que directamente recomienda no permitir. Tambien carga la hoja de estilos, precarga la fuente con crossorigin, declara color-scheme y dos valores de theme-color segun prefers-color-scheme, fija la URL canonica, y mete Open Graph con imagen en webp de 1200x630 y su texto alternativo. Cierra con los feeds RSS y JSON, la descripcion de busqueda del navegador y el manifiesto de la aplicacion.

El orden tambien cuenta

Colocar estas etiquetas en cualquier orden no da lo mismo. El autor ordena el head segun su impacto en el rendimiento y recomienda Capo.js para revisar ese orden en cualquier documento. La idea es que el navegador empiece a descargar lo que bloquea el render cuanto antes y deje para el final lo que puede esperar.

La plantilla es una referencia util, sobre todo porque cada etiqueta viene con su justificacion en lugar de aparecer por inercia. Pero es la opinion de una persona: que initial-scale sobre, o que merezca la pena precargar una fuente concreta antes que otras cosas, depende del sitio. Lo aprovechable es el criterio de ordenacion y el recordatorio de que la compatibilidad hacia atras del estandar tiene un coste que alguien paga en cada documento.