Cómo logré un 100/100 en Lighthouse, mi stack WPO con Laravel Jigsaw

Cómo logré un 100/100 en Lighthouse, mi stack WPO con Laravel Jigsaw

Jorge Gómez López • 25 de diciembre de 2025

wpo desarrollo

En el mundo del SEO la velocidad no es un lujo, es un requisito.

Cuando decidí lanzar mi marca personal, JorgeSEO, tenía claro que no podía ser "otro consultor más con un WordPress lento". Para dar ejemplo con el rendimiento, mi propia casa tiene que volar.

El resultado es lo que estás viendo: una web que carga en menos de 100ms, con un coste de hosting de 0€ y una puntuación perfecta en Core Web Vitals. No me creas a mí, verifica el test oficial en Google PageSpeed, donde verás que como poco, la parte de rendimiento tiene una puntuación de 97 (a veces 100); y accesibilidad, prácticas recomendadas y SEO no bajan de 100.

Captura de pantalla de la puntuación 100/100 en Google PageSpeed Insights
Haz clic en la imagen para ejecutar la auditoría en tiempo real.

1. El Stack: Adiós base de datos, abrazando el sitio estático

La decisión más radical fue eliminar el backend dinámico. No hay MySQL. No hay PHP procesándose en cada visita. Lejos de la complejidad que requieren otros proyectos, afinando al máximo, con sencillez y precisión. Dejé de lado React y otras soluciones priorizando la sencillez, pero sin abandonar mi lado de programador.

2. Decisiones WPO: Cirugía de rendimiento

Para alcanzar el 100/100, tuve que tomar decisiones de diseño agresivas que la mayoría de plantillas estándar ignoran, y aplicar un poco de bisturí en blade.

Apoyándome en los consejos de Page Speed Insight fue relativamente sencillo conseguir los tan ansiados circulitos verdes.

Tipografías nativas (System Fonts)

¿Sabías que cargar Google Fonts te penaliza con cientos de milisegundos de bloqueo? Tomé la decisión de usar la Pila de fuentes del sistema. Esta web usa la tipografía que tu sistema operativo ya tiene instalada (San Francisco en Mac, Segoe UI en Windows, Roboto en Android).

CSS Crítico e inlining: La petición más rápida es la que no existe

Aunque mi CSS pesa apenas 6KB, el navegador tenía que detenerse a pedirlo al servidor antes de "pintar" nada. Implementé esta solución radical: CSS inlining. He configurado mi proceso de compilación para que, en producción, lea el archivo CSS final y lo inyecte físicamente dentro de una etiqueta style en el HTML. No se carga un archivo CSS, por pequeño y optimizado que esté.

Advertencia: esta solución no es siempre necesaria; de hecho, en este sitio no lo era estrictamente. Sin embargo, en otros sitios puede ser muy útil. De hecho, esta técnica llevada al extremo fue la clave para solucionar la velocidad de carga en PrestaShop en un proyecto reciente.

Imágenes responsivas: concepto fácil y efectivo

Servir una imagen de escritorio de 840px a un móvil que solo necesita 360px es un desperdicio de ancho de banda y penaliza el LCP (Largest Contentful Paint). Para solucionarlo, no basta con comprimir. He implementado una estrategia con el uso del tag srcset con formatos de imagen WebP. Para cada imagen, genero hasta tres variaciones (pequeña, mediana y grande). Mediante el atributo sizes, le doy instrucciones al navegador para que calcule la densidad de pantalla y el ancho disponible, descargando únicamente la versión más ligera posible que garantice la calidad.

Gestión de Cookies "artesana"

Tomé esta decisión basada en mi experiencia como consultor. En lugar de instalar un plugin pesado de consentimiento que carga 200KB de JavaScript externo, programé mi propia solución de Consent Mode v2.

3. Analítica sin sacrificar velocidad

Muchos SEOs temen instalar Google Tag Manager (GTM) porque ralentiza la web. El truco no es evitarlo, sino implementarlo bien.

Toda la medición de esta web (GA4, Conversiones de Ads) se gestiona a través de un contenedor GTM optimizado, disparándose solo cuando es estrictamente necesario y respetando la privacidad del usuario mediante señales de consentimiento (Granted/Denied) antes de cargar cualquier tracker.

Conclusión: El WPO vende

Esta web es mi tarjeta de visita. Demuestra que es posible tener un sitio bonito, funcional y legal sin sacrificar el rendimiento.

Si tu proyecto sufre de tiempos de carga lentos, tasas de rebote altas o campañas de Ads caras por un bajo nivel de calidad, el problema puede estar en los cimientos.

¿Quieres que audite tu arquitectura web? Hablemos.