Hafen

13 kilobytes: lo que de verdad tiene que pesar un tema de WordPress

Casi todos los temas presumen de ser rápidos. Pocas veces se puede comprobar, porque casi nadie da cifras que uno pueda medir por su cuenta. Así que aquí van las cifras de Hafen, en bytes, con la versión y la fecha de medición al lado. Y la parte honesta: dónde ayuda de verdad un tema ligero y dónde no salva absolutamente nada.

Ante las promesas de tiempo de carga conviene preguntar qué se ha medido exactamente. «Menos de un segundo» depende del servidor y del lugar desde el que se mide. Una puntuación de Lighthouse depende del contenido de la página de prueba. Lo que en cambio pertenece de forma fija al tema y no admite discusión es la cantidad de CSS y JavaScript que coloca en cada página. Justo eso es lo que hemos medido.

Las cifras

Medido el 6 de septiembre de 2026 en el paquete publicado de Hafen 1.0.0, es decir, en la versión que estuvo en el directorio oficial de temas del 4 al 22 de septiembre. El navegador necesita exactamente dos archivos para mostrar la página, los dos desde tu propio servidor:

ArchivoEn el paquetegzipBrotli
style.css28.873 bytes8.671 bytes7.642 bytes
assets/js/hafen.js1.948 bytes862 bytes786 bytes
Suma, dos peticiones30.821 bytes9.533 bytes8.428 bytes
inter-variable.woff2, solo en el look estándar48.256 byteswoff2 ya viene comprimido

Por la red viajan, por tanto, 9.533 bytes en dos peticiones. gzip es aquí la cifra prudente, porque la ofrece cualquier hosting; el valor de Brotli de al lado está medido con el nivel máximo de compresión, y los servidores que comprimen sobre la marcha se quedan en el día a día algo por encima. Para que llegues a las mismas cifras: medido sobre el paquete hafen-1.0.0.zip con node:zlib, gzip en el nivel estándar 6, Brotli en el nivel 11. Otras herramientas se desvían unos pocos bytes; con el mismo archivo hemos medido entre 9.522 y 9.555 bytes según el programa. A la conclusión no le afecta, a una comparación de cifras sí, y por eso la herramienta figura aquí. Un tercer archivo no aparece en la tabla a propósito: a partir de theme.json, WordPress genera los estilos globales y los escribe en la cabecera de la página. Así cuentan en el peso transferido del documento HTML y no cuestan una petición propia.

Nota del 25 de septiembre de 2026: Desde el 22 de septiembre está en el directorio de temas Hafen 1.1.0, la versión del menú, con nueva navegación móvil, cabecera que acompaña al hacer scroll y estilos para tablas. Siguen siendo dos archivos más la fuente en el look estándar, pero los dos han crecido: style.css tiene ahora 38.191 bytes (gzip 11.496, Brotli 10.241), assets/js/hafen.js 3.344 bytes (gzip 1.491, Brotli 1.302). Por la red viajan así 12.987 bytes en dos peticiones, medidos con el mismo método sobre los archivos de la versión 1.1.0 del directorio de temas. La fuente sigue en 48.256 bytes. La tabla de arriba muestra el estado de la 1.0.0, para el que se escribió este artículo.
Nota del 7 de septiembre de 2026: Cuando este artículo se publicó en agosto, aquí figuraban las cifras de Hafen 0.8.1, en concreto 20.534 bytes de CSS y 1.948 bytes de JavaScript. Esas cifras brutas eran correctas, la suma de debajo no: como peso transferido el artículo daba 7.149 bytes, aunque en la misma sección indicaba 6.461 bytes gzip para style.css y 870 bytes para hafen.js, es decir, 7.331 bytes en total. Esa suma ya estaba mal hecha entonces; la corregimos aquí de forma visible en lugar de hacerla desaparecer en silencio. Desde entonces el tema ha recibido 33 looks adicionales y el refuerzo de una migración real, por eso hoy vale la tabla de arriba.

Lo que se ha añadido desde la 0.8.1

Hasta la 1.0.0, algo más de dos kilobytes más por la red; con la 1.1.0, casi tres y medio más: quien tenga en la cabeza la cifra antigua puede preguntar para qué. La misma medición a lo largo de las versiones, siempre style.css y hafen.js juntos, a partir de los paquetes publicados:

VersiónEn el paquetegzipVariaciones de estilo
0.8.022.227 bytes7.341 bytes5
0.9.126.866 bytes8.614 bytes5
0.10.028.084 bytes8.787 bytes37
1.0.030.821 bytes9.533 bytes38
1.1.041.535 bytes12.987 bytes38

Hasta la 1.0.0, el mayor salto estuvo entre la 0.8.0 y la 0.9.1, y ahí no hay un paquete de funciones nuevo, sino lo aprendido en una migración real: una cuadrícula de revista para el listado del blog, un recurso visual diseñado para entradas sin imagen, zonas cómodas de pulsar en la paginación. El salto de cinco a 37 looks, en cambio, costó solo 1.218 bytes de CSS, porque un look es un archivo JSON y no una línea más de hoja de estilos.

Y hay una cifra que durante mucho tiempo no se movió en absoluto: hafen.js se mantuvo sin cambios en 1.948 bytes desde la 0.8.0 hasta la 1.0.0, en todos los looks y en todas las versiones. No es casualidad, sino el límite que nos pusimos. Lo que puede hacer el CSS no lleva JavaScript. Con la 1.1.0 el archivo creció por primera vez, hasta 3.344 bytes: la cabecera ahora acompaña al hacer scroll, y el script mide su altura para que un salto a un encabezado no quede tapado por ella. Eso el CSS solo no lo puede hacer.

La fuente es la excepción, no la regla

El look estándar, es decir, el valor predeterminado de theme.json, trae Inter como un único archivo de fuente variable, 48.256 bytes para todos los grosores del 100 al 900. Con Hafen 1.1.0, la parte total del tema en una página queda en este único caso en 61.243 bytes. Esa es la cantidad completa, no se suma nada de fuera: ni Google Fonts, ni fuentes de iconos, ni CDN.

En cuanto eliges uno de los 38 looks en el editor del sitio, en Estilos, el archivo de fuente desaparece. Cada una de las 38 variaciones sustituye la Inter predeterminada por una pila de fuentes del sistema, sin fontFace propio, y el tema lo detecta por sí solo: la indicación de precarga en la cabecera de la página se desactiva en ese caso, en lugar de pedir 48 kilobytes para una fuente que no se usa en ninguna parte. Con Hafen 1.1.0 quedan los 12.987 bytes de CSS y JavaScript. Qué 38 looks son y en qué se diferencian en color, tipografía, forma y densidad lo cuenta Hafen 1.0: un tema, 38 looks, cero archivos de fuentes.

Si quieres conservar los colores del estándar y deshacerte solo de la fuente, elige la variación Launch. No cambia nada más que la tipografía: Segoe UI en Windows, San Francisco en dispositivos Apple, Roboto en Android. Los otros 37 looks traen además su propia paleta de colores y sus propios radios de esquina, pero tampoco cargan ningún archivo de fuente.

De dónde viene normalmente el peso

Como comparación, merece la pena mirar lo que trae un tema habitual sin que nadie haya hecho nada mal. Un tema de page builder carga su propio framework, además un set de iconos, a menudo jQuery y una librería de sliders, casi siempre en cada página, tenga la página un slider o no. Lo caro ni siquiera es el tamaño, sino el tiempo que el navegador dedica a ejecutar todo eso.

Una cifra medida sobre esto sí la tenemos, aunque no de un page builder, sino de Neve, un tema que con razón se considera uno de los clásicos más rápidos. Al migrar a Hafen una web de producción con años de recorrido, mismo día, mismo método, sin tocar los plugins, el JavaScript de la página de inicio en móvil bajó de 621 a 382 kilobytes y el First Contentful Paint de 3,9 a 1,3 segundos. La diferencia de 239 kilobytes procede solo de la capa del tema, los plugins no se tocaron. La serie completa de mediciones en cuatro tipos de página está en nuestro caso real de cambio de tema. Para un tema de page builder no tenemos una serie de mediciones propia, y por eso aquí tampoco hay una cifra.

Hafen viene de otra dirección. El diseño, los colores, los espaciados y la tipografía están por completo en theme.json, y WordPress genera a partir de ahí el CSS necesario. No hay framework, porque no existe ninguno que el editor de bloques no traiga ya de serie. Y no hay JavaScript para cosas que puede hacer el CSS; los 3.344 bytes del paquete de Hafen 1.1.0 se ocupan de la cabecera fija, incluida la medición de su altura para los enlaces de anclaje, y del suave fundido al hacer scroll, nada más. Además, dos filtros del tema se encargan de que WordPress cargue solo el CSS de los bloques que de verdad aparecen en la página, en lugar de toda la biblioteca de bloques.

Todo lo que no es presentación está a propósito fuera del tema, en el plugin complementario Hafen Core: datos estructurados, llms.txt, bloques de respuesta. No es un capricho, sino una regla del directorio, porque las funciones tienen que sobrevivir a un cambio de tema. Todo sobre el tema, sus looks y el plugin complementario está en la página de Hafen.

Y ahora, la parte honesta

Un tema ligero no hace rápida una web lenta. Solo elimina una de varias causas, y casi nunca la mayor.

En la práctica dominan otras tres partidas. Las imágenes, cuando se suben a resolución completa de cámara y se reducen con CSS; una sola imagen así pesa más que todo el tema. Los plugins que cargan sus scripts en cada página en lugar de solo donde hacen falta. Y el hosting, porque ninguna optimización en el frontend ayuda contra una respuesta del servidor que se hace esperar un segundo.

Quien quiera acelerar una web existente no empieza, por tanto, por el tema. El camino está en nuestro artículo Cómo acelerar WordPress: guía completa 2026, y sirve sea cual sea el tema instalado. Este artículo responde a la otra pregunta: qué aporta un tema cuando se empieza de cero o se cambia de tema.

Mídelo tú mismo

Hafen está en el directorio oficial de temas de WordPress desde el 4 de septiembre de 2026, y desde el 22 de septiembre en la versión 1.1.0. Instálalo, abre el análisis de red del navegador y cuenta cuántas peticiones vienen del tema. Son dos.

Hafen en WordPress.org

Preguntas frecuentes

¿Cómo puedo comprobar las cifras yo mismo?

Descarga el tema y mira el tamaño de los archivos. En el servidor, el peso transferido real lo mides en las herramientas para desarrolladores del navegador, en Red, columna Transferido. Ahí ves también cuántas peticiones vienen de verdad del tema. Las cifras de este artículo proceden del paquete de la versión 1.0.0, medido el 6 de septiembre de 2026, y de los archivos de la versión 1.1.0, medidos el 25 de septiembre de 2026.

¿Por qué Hafen sirve la fuente él mismo en lugar de usar Google Fonts?

Por dos motivos. Primero, con Google Fonts los datos de conexión llegan a un tercero, algo que en Alemania ha acabado varias veces en los tribunales. Segundo, una conexión a un servidor ajeno también es técnicamente más cara que un archivo del propio. Eso sí, la pregunta solo se plantea en el look estándar: cada una de las 38 variaciones de estilo sustituye Inter por una pila de fuentes del sistema y entonces no carga ningún archivo de fuente.

¿Cambia el tiempo de carga con otro look?

Solo en una dirección, hacia abajo. Las 38 variaciones de estilo son archivos JSON a partir de los cuales WordPress genera los estilos globales; el navegador no carga ningún archivo adicional para ello, elijas el look que elijas. La única diferencia medible es la fuente: en el look estándar se suman 48.256 bytes para Inter, en cada uno de los 38 looks no.

¿Necesito Hafen Core para que el tema sea rápido?

No. Hafen Core es el plugin complementario para todo lo que no es presentación, es decir, datos estructurados, llms.txt y bloques de respuesta. Para la velocidad no hace falta, el tema funciona por completo sin el plugin. La separación es una regla del directorio de WordPress: las funciones tienen que sobrevivir a un cambio de tema y por eso no pertenecen al tema.

¿Aporta algo un tema ligero a las Core Web Vitals?

Ayuda, pero no decide. Menos CSS y JavaScript acortan sobre todo el tiempo hasta que la página responde. El Largest Contentful Paint y la estabilidad del diseño dependen, en cambio, de tus imágenes y de si hay elementos que saltan después de cargar.

¿Se pierde contenido al pasar a un tema de bloques?

El contenido no, está en la base de datos y se queda. Lo que hay que reconstruir son los diseños que en el tema anterior dependían de sus propios ajustes. Por eso una prueba en una copia no es exceso de prudencia, sino el camino normal.

Volver al blog Un artículo de hafenstudios