Cofers.mx
Rediseño de la página de inicio y creación de una nueva página, construidas a partir de los diseños en Figma del cliente y adaptándolos para móvil, junto a una optimización de rendimiento completa.
Una página de inicio que cargaba lento, con recursos sin optimizar
La página en WordPress/Elementor arrastraba años de peso acumulado del maquetador, imágenes sin comprimir, recursos de plugins sin usar y efectos de animación añadidos poco a poco con el tiempo. El equipo de diseño del cliente ya había creado un rediseño completo en Figma: el trabajo de optimización consistía en una mejora de carga para las páginas respetando los recursos que usan.
- Sin migración de framework, mantenerse en WordPress/Elementor, la herramienta que el equipo de marketing ya conoce y edita día a día.
- Ajustarse fielmente a los diseños de Figma, incluido añadir animaciones activadas por scroll y hover, no solo la maquetación estática.
- Conservar integraciones de software y plugins con los que trabajan, aunqué ralenticen notablemente la velocidad de carga del sitio.
Una nueva página de inicio y otra página adicional, creadas desde Figma con una optimización de rendimiento meticulosa
Elementos y animaciones personalizados para adptarse al diseño de Figma, que Elementor no ofrece de serie, compresión y optimización de imágenes y videos, junto a una nueva página construida del mismo modo para que el equipo de marketing pueda seguir editando ambas sin tocar código.
Tres decisiones, y lo que costó cada una
Widgets personalizados en lugar de un plugin de animación
Los plugins de animación para Elementor suelen incluir todos los efectos que soportan, se usen o no en una página concreta. Construir las secciones con scroll y hover como widgets a medida hizo que la página solo cargara el JavaScript que este diseño realmente necesitaba.
Reservar dimensiones explícitas en lugar de solo comprimir imágenes
Comprimir bajó el peso, pero varias imágenes seguían causando saltos de layout (CLS) porque no tenían `width`/`height` declarados y el navegador no podía reservar el espacio antes de cargarlas. Fijar las dimensiones explícitas fue lo que realmente estabilizó la puntuación, no solo el peso del archivo.
WebP animado en lugar de animaciones Lottie
El diseño requería transparencia en las animaciones. El camino obvio era video (WebM/VP9 con canal alpha), y así se construyó primero. Pero el elemento <video> de HTML no compone el canal alpha en la práctica totalidad de navegadores, sin importar que el archivo lo tenga codificado correctamente. Una limitación real de la plataforma web, no un error de codificación. WebP animado resolvió el problema de raíz: se renderiza como imagen, compone transparencia de forma nativa, y no depende de ninguna librería ni script en el cliente.
Medido con PageSpeed Insights, mismas condiciones simuladas (Moto G Power, red 4G lenta)
El objetivo no era solo bajar la puntuación de velocidad, sino que se mantuviera baja sin intervención técnica constante: widgets ligeros, imágenes con dimensiones reservadas y animaciones en formatos nativos, para que el equipo de marketing pudiera seguir publicando sin volver a introducir los mismos problemas de rendimiento.