Página de inicio de BlackPrint.ai Página de inicio de BlackPrint.ai

Resumen

Construyó el sitio de marketing bilingüe de BlackPrint como una experiencia de mapas con datos reales, que muestra capas catastrales, de actividad y de mercado de la compañía con deck.gl y MapLibre.

Puntos clave

1. 01

   Desarrolló 16 componentes de sección en React 19, Vite y Tailwind 4 con escenas de deck.gl, MapLibre y h3-js guiadas por scroll, alimentadas por un pipeline de exportación de solo lectura con lista blanca que excluye datos personales; el sitio publica 27 capas de datos precalculadas, entre ellas 1,500 predios reales de la CDMX extruidos según su valor de suelo.

2. 02

   Redujo el JavaScript de carga inicial de 793 KB a 187 KB comprimidos mediante el montaje diferido de mapas con póster previo y chunking manual, y comprimió los logos de clientes de 1.9 MB a 190 KB, con una suite headless de 13 verificaciones y un presupuesto de rendimiento en el despliegue.

3. 03

   Optimizó el sitio de producción en Astro: difirió la inicialización de MapLibre y deck.gl hasta la interacción del usuario (LCP de 7.8 s a 0.5 s) y aplicó carga y decodificación diferidas a imágenes temáticas para ahorrar 1.2 MB en la carga inicial.

Tecnologías

• React 19
• TypeScript
• Vite
• deck.gl
• MapLibre GL JS
• h3-js
• Tailwind CSS 4
• Motion
• Astro
• Vercel
• Rendimiento Web
• Puppeteer