El reto
Cuando el producto es artesanal, la fotografía pesa. Cada pieza necesita verse con detalle, en alta resolución, con la veta de la madera definida. El problema obvio: las imágenes pesadas matan la performance, y los sitios lentos matan la conversión. En estudios de diseño esto se nota más: quien busca mobiliario único entra desde el móvil, espera 3 segundos como mucho, y se va.
El reto técnico era claro. Mostrar la pieza con peso visual real, que el sitio cargara rápido en una conexión 4G de barrio, y que Google lo recompensara con buen posicionamiento orgánico.
Cómo lo abordamos
Mobile-first de verdad, no como etiqueta de venta. Diseñamos toda la experiencia desde el viewport del móvil hacia arriba. Esto cambia decisiones desde el inicio: peso del bundle, jerarquía visual, qué información se ve en el primer scroll, qué se posterga.
Cada imagen pasa por un pipeline de optimización antes de subirse.
Formatos modernos (WebP y AVIF con fallback a JPG), tamaños responsivos
servidos con srcset, lazy loading nativo para todo lo que
no esté above the fold. El navegador descarga sólo lo que necesita,
en la resolución exacta para la pantalla del usuario.
Qué se hizo en concreto
- Pipeline de imágenes optimizado. Compresión WebP con calidad visual indistinguible, dimensiones servidas según viewport, lazy loading nativo. Las imágenes que antes pesaban 2 MB pasaron a pesar 180 KB sin pérdida perceptible.
- CSS crítico inline. El CSS necesario para renderizar la primera vista va inline en el HTML. El navegador no espera al CSS externo para pintar. Resultado: First Contentful Paint en menos de 800ms.
- Fonts con display:swap. La tipografía custom no bloquea el render. El texto aparece con fallback del sistema y se sustituye cuando carga la fuente real, sin Cumulative Layout Shift.
-
JavaScript no bloqueante.
Todo el JS no esencial se carga con
defer. Las animaciones se ejecutan después de que el contenido principal esté visible, no antes. - Cache headers de Cloudflare configurados. Recursos estáticos cacheados al máximo, HTML con cache corto. La segunda visita es prácticamente instantánea.
Qué se optimizó para medir
La performance no se promete, se verifica. El sitio está construido apuntando a las tres métricas que Google usa para evaluar la experiencia (los Core Web Vitals):
- LCP (velocidad de carga del contenido principal): imágenes optimizadas, CSS crítico inline y fonts no bloqueantes para que el contenido aparezca cuanto antes.
- CLS (estabilidad visual): dimensiones reservadas para cada imagen y bloque, sin saltos de layout mientras carga.
- INP (respuesta a la interacción): JavaScript diferido y no bloqueante para que el sitio responda al instante al primer toque.
- Accesibilidad: contraste, navegación por teclado y etiquetas semánticas siguiendo las pautas WCAG.
Cualquiera puede comprobar el estado actual del sitio en tiempo real con PageSpeed Insights de Google. La transparencia es parte del trabajo: los números son los que la herramienta diga, no los que nosotros afirmemos.