El puntaje mobile de Lighthouse bajó por cumulative layout shift después de un despliegue que, hasta donde pude ver, no había tocado nada relacionado con el layout. El puntaje de desktop no se movió en absoluto. Mismo commit, mismo HTML, mismo CSS —una plataforma regresionó y la otra no, que es un lugar genuinamente confuso para empezar a depurar.
Descartando cosas
Revisé los sospechosos obvios primero: ninguna imagen nueva sin dimensiones, ningún anuncio o embed inyectado tarde (este sitio no tiene ninguno), ningún intercambio de web font que no hubiera contemplado ya. Nada en el diff tocaba CSS que afectara el layout en absoluto. El cambio que se publicó fue, hasta donde el diff mostraba, una corrección de texto en una entrada.
Cuando el diff dice que nada cambió y la métrica dice que algo sí, lo que cambió suele ser el entorno, no el código.
Lo que realmente era distinto
Lighthouse mobile corre contra una conexión limitada artificialmente, lo que significaba que la fuente de heading auto-alojada llegaba más tarde en relación al primer paint que en la conexión simulada más rápida de desktop. La fuente de fallback —una sans-serif genérica del sistema— tiene métricas de carácter distintas a Bricolage Grotesque, así que los headings se renderizaban más angostos en el fallback y después se reacomodaban más anchos una vez que entraba la fuente real, solo en mobile, porque el throttling de mobile era la única condición lo bastante lenta como para exponer la diferencia.
El arreglo real
font-size-adjust y métricas de fallback ajustadas a mano resultaron ambos más frágiles que el arreglo más simple: reservar el espacio de layout de forma que no dependa de qué fuente se esté renderizando en ese momento.
h1, h2 {
font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
line-height: 1.2;
min-height: 1.2em;
}Eso solo no cerró del todo la brecha —el arreglo real fue font-display: optional en la fuente de heading específicamente, que le dice al navegador que se salte el intercambio por completo si la fuente no está lista lo bastante rápido, en lugar de mostrar un fallback y reacomodar después. Los headings a veces se renderizan en la fuente de fallback en una conexión muy lenta ahora. Nunca se reacomodan después del hecho. Un layout silenciosamente correcto que se lee en la fuente “equivocada” le gana a un layout brevemente elegante que salta.