La primera web que puedo enseñar entera, con sus tripas y sus vergüenzas, es la mía. Así que vamos a empezar la bitácora por donde toca: contando cómo he montado esto, qué decisiones he tomado y — sobre todo — las tres meteduras de pata que me he pegado por el camino. Con sus números, que si no, esto sería un cuento.
Las reglas del juego
Antes de tocar nada me puse tres condiciones, porque una web sin condiciones acaba siendo lo que el tema quiera:
- Que cargue rápido de verdad. Soy consultor SEO: si mi web va lenta, lo demás sobra.
- Que tenga cara. Un blog más con plantilla de catálogo no me hacía falta.
- Que no dependa de un constructor. Nada de arrastrar bloques que luego meten quince ficheros para pintar un botón.
WordPress con GeneratePress (el gratuito), el editor de bloques de toda la vida y CSS escrito a mano. Y sí, con inteligencia artificial de por medio: yo llevo el criterio y ella la pala. Que de eso va esta casa.
Metedura de pata nº1: un logo de 2,9 MB para verse a 54 píxeles
Esta es la buena. Generé la insignia de la marca en alta resolución, la subí tal cual a la biblioteca de WordPress y la puse como logo del sitio. Todo correcto… salvo que ese PNG pesaba 2.917 KB y en pantalla se ve a 54 píxeles de ancho. El navegador se descargaba casi tres megas para pintar una miniatura del tamaño de un sello.
Lo peor es que no me di cuenta mirando la web —se veía perfecta—, sino midiéndola. Y la medí de casualidad, comparándola con una plantilla de pago. La web entera pesaba 3.215 KB y el logo era el 90 % de la culpa.
La solución fue de manual: redimensionar a 220 px, aplicar paleta adaptativa y volver a subir. De 2.917 KB a 16 KB. El mismo logo, 182 veces más ligero.
La lección: las imágenes generadas con IA salen a 2 y 3 megas por defecto. Si las subes sin tocarlas, te comes el rendimiento sin enterarte. Y si no mides, no existe.
Metedura de pata nº2: dos H1 que no se veían (pero Google sí)
En la portada quería que el titular grande fuera el H1, no el título de la página que pinta el tema. Así que hice lo fácil: ocultar el del tema con CSS. display: none y a otra cosa.
Craso error. Ese H1 seguía en el HTML. Google no lee lo que se ve, lee el código. Resultado: dos H1 en la portada. Y cuando audité en serio, salió algo peor: la página de la bitácora no tenía ningún H1.
| Página | H1 antes | H1 ahora |
|---|---|---|
| Portada | 2 | 1 |
| Aliquindoi | 2 (repetido) | 1 |
| Bitácora | 0 | 1 |
| Resto | 1 | 1 |
La solución correcta no era CSS, era quitarlo del HTML: un filtro del tema para que no imprima el título donde el H1 lo pone el contenido, y una cabecera propia para la bitácora.
La lección: cuando audites encabezados, cuéntalos en el código fuente. Si los cuentas con el inspector mirando lo visible, te van a colar goles como me los colaron a mí.
Metedura de pata nº3: la barra lateral fantasma
El contenido de las entradas se veía descuadrado, pegado a la izquierda, con un hueco muerto a la derecha. El motivo: había quitado la barra lateral página a página, y las entradas y los archivos seguían con el ajuste por defecto, reservando el sitio para una barra que no existía.
La lección: en GeneratePress —y en casi cualquier tema— el diseño se fija en los ajustes globales. Si lo vas parcheando pantalla a pantalla, siempre se te queda una fuera.
La tentación de la plantilla premium
A mitad de camino me entró la duda de todo el mundo: ¿no sería más rápido comprar una plantilla bonita y olvidarme? Cogí una de las que más entran por los ojos —de esas de agencia creativa, con scroll suave y animaciones— y la medí contra la mía.
| Plantilla premium | Esta web | |
|---|---|---|
| Peticiones | 70 | 11 |
| Archivos JavaScript | 35 | 2 |
| Archivos CSS | 21 | 1 |
| DOM interactivo | 2,5 s | 0,56 s |
| Evento load | 3,75 s | 1,97 s |
La plantilla cargaba jQuery, jQuery Migrate, Elementor, WooCommerce, Swiper, Isotope, GSAP, ScrollTrigger y Locomotive Scroll. Y un detalle que me preocupó más que el peso: el contenido no se veía hasta que el JavaScript terminaba. En mi navegador estuvo la pantalla en blanco dieciséis segundos.
Así que no. El scroll con inercia, los hover y el parallax que tiene esta web están hechos a mano y ocupan menos de 4 KB de JavaScript, sin una sola librería. Lo que hace que una web parezca cara no es la plantilla: es la composición.
Cómo quedó la cosa
| Concepto | Antes | Después |
|---|---|---|
| Peso de la portada | 3.215 KB | 906 KB |
| Logo | 2.917 KB | 16 KB |
| H1 por página | 0, 1 o 2 según la página | 1 siempre |
| Alto de cada entrada en el listado | 1.541 px | 428 px |
| Librerías JavaScript de terceros | — | ninguna |
Ese último dato del listado tiene su miga: la bitácora mostraba la imagen destacada dos veces, porque el tema ya la pintaba y yo le había añadido otra encima sin comprobarlo. Mil píxeles de imagen duplicada. Otra para la colección.
Lo que me llevo
- Medir no es opcional. Los tres fallos gordos se veían perfectos en pantalla. Ninguno se veía a ojo.
- Antes de añadir, comprueba qué hace ya tu tema. Media hora de leer te ahorra duplicados como el de la imagen.
- El HTML manda. Ocultar con CSS no es quitar. Para Google, lo que no está en el código no existe… y lo que está, cuenta aunque no se vea.
- El peso se cuela por las imágenes. Casi nunca por el código.
Nada de esto es una hazaña técnica: es oficio, paciencia y mirar los números. Pero prefiero contarlo con las meteduras de pata dentro, porque los posts en los que todo sale a la primera suelen ser los que menos enseñan.
Si quieres ver el próximo experimento cuando salga —y enterarte de lo que de verdad se mueve en SEO e IA sin el dramatismo de los titulares—, te espero en Aliquindoi.