Qué es
Antes de que un navegador pueda mostrar cualquier parte de una página, primero tiene que descargar el documento HTML de la página entero (o al menos lo suficiente para empezar a trabajar) — esto es independiente de las imágenes, vídeos u otro contenido multimedia, que cargan después. Esta comprobación se fija concretamente en el tamaño de ese documento HTML inicial, señalándolo cuando ha crecido de forma inusualmente grande.
Los documentos HTML suelen inflarse cuando se incrusta mucho contenido directamente en línea — grandes bloques de código de estilos, scripts o contenido repetido pegado directamente en la página — en lugar de mantenerse en archivos separados y reutilizables que el navegador pueda cargar una vez y guardar en caché.
En qué afecta
Un documento HTML más grande tarda medible y notablemente más en descargarse y procesarse antes de que el navegador pueda empezar a renderizar nada en absoluto, lo que retrasa lo primero que ve un visitante, no solo el contenido secundario más abajo en la página. Este efecto es más pronunciado en conexiones móviles lentas, donde cada dato extra añade un tiempo real y perceptible antes de que la página empiece a sentirse fluida.
Un archivo HTML abultado también suele ser síntoma de un problema estructural más profundo — contenido o código que debería haberse organizado en archivos separados y cacheables, pero que en cambio se ha duplicado en línea en toda la página, o incluso en todas las páginas del sitio.
Cómo solucionarlo
- Identifica qué está engrosando la mayor parte del archivo — las herramientas de desarrollador del navegador pueden mostrar el desglose de tamaño de los recursos de una página, incluido el propio documento HTML base.
- Traslada los grandes bloques de CSS en línea (código de estilos) a un archivo
.cssseparado que el navegador pueda cargar una vez y reutilizar en varias páginas, en lugar de repetirlo en línea en cada página. - Traslada el JavaScript en línea de gran tamaño a archivos
.jsseparados por la misma razón. - Revisa si hay contenido duplicado por accidente en el código de la página (el mismo bloque repetido más de una vez) y elimina las duplicaciones.
- Si estás en un creador de webs, esto normalmente ya está gestionado por ti — una página inusualmente grande aquí suele deberse más a un bloque de código personalizado pesado que a la propia plataforma, así que revisa cualquier bloque de código personalizado que hayas añadido.