La Feria Viajera es el evento de viajes más grande de Costa Rica, un espacio donde agencias, aerolíneas y operadores turísticos se reúnen para conectar directamente con miles de viajeros. El objetivo del sitio era claro: convertir visitas en asistentes al evento, posicionar el nombre en Google antes del lanzamiento y dar una primera impresión que estuviera a la altura del evento.
El reto
El cliente llegó con una necesidad concreta: un sitio que funcionara como punto central de información del evento, que apareciera en Google cuando alguien buscara "feria de viajes Costa Rica" y que cargara rápido en celular porque la mayoría del tráfico iba a ser mobile. El tiempo era un factor crítico: el evento tiene fecha fija y el sitio tenía que estar listo con semanas de anticipación para que el SEO tuviera tiempo de rendir.
El reto técnico principal era balancear una experiencia visual de alto impacto con rendimiento real en dispositivos de gama media. Costa Rica tiene una penetración de móviles muy alta pero con conexiones que no siempre son las mejores, así que no había espacio para un sitio pesado que tardara en cargar. A eso se suma que el cliente quería animaciones, video de fondo y una galería de expositores, todo eso sin sacrificar el score de Lighthouse.
Además, había que trabajar la arquitectura de información desde cero: organizar el contenido para que un visitante llegara, entendiera en segundos qué era el evento, se convenciera de asistir y supiera cómo llegar. Sin tienda, sin formularios complejos. Una sola meta de conversión.
La solución
El proyecto no necesitaba un CMS y sí necesitaba control total sobre el rendimiento. Opté por código completamente personalizado: cada elemento del bundle existe por una razón, sin dependencias innecesarias ni capas de abstracción que encarecen la carga.
La landing se estructuró en secciones con una progresión lógica: Hero con llamada a la acción inmediata, información del evento, lista de expositores, galería, preguntas frecuentes y ubicación con mapa interactivo. Cada sección tiene un propósito de conversión claro. El Hero carga en menos de 1.5 segundos y el countdown al evento crea urgencia sin ser invasivo.
Para el UX, aposté por scroll narrativo: el usuario va leyendo la historia del evento mientras baja. En desktop el fondo del Hero es una imagen estática de alta calidad; en móvil el contenido se adapta para aprovechar mejor el espacio vertical. Ese tipo de decisión adaptiva, que no es obvia a primera vista, es lo que separa un diseño responsivo real de uno que "se ve bien en móvil".
Proceso de diseño
La identidad visual del evento ya tenía algunos elementos definidos, así que mi trabajo fue traducirlos a un lenguaje web coherente. Elegí una tipografía de alto impacto que funciona bien en títulos grandes y se mantiene legible en pantallas pequeñas. La paleta gira alrededor de azul marino y dorado, que transmiten viaje y aspiración sin caer en lo genérico.
Las animaciones están calibradas para sumar sin distraer. Los elementos principales del Hero entran con movimientos sutiles que no afectan el LCP medido por Lighthouse. Los elementos secundarios usan transiciones de opacidad. Esa distinción, que parece menor, significó la diferencia entre un Performance de 85 y uno de 90+.
En mobile, el carousel de expositores usa peek design para mostrar que hay más contenido a los lados, guiando el gesto de swipe de forma natural sin instrucciones explícitas.
Rendimiento
El objetivo de rendimiento desde el inicio fue claro: Performance 90+ en Google Lighthouse en mobile. Para lograrlo, cada decisión de implementación se tomó con ese número en mente. El JS inicial que descarga el usuario es mínimo porque solo se incluye lo que realmente se usa.
Implementé lazy loading en todas las imágenes que están fuera del viewport inicial, compresión de imágenes calibrada y fuentes optimizadas con preload explícito. El elemento principal del Hero, el que Google mide como LCP, tiene prioridad de carga alta y nunca se carga de forma diferida. Esos detalles, que no están en ningún tutorial genérico, son los que empujan el score de 80 a 90+.
El sitio se despliega en infraestructura de edge con CDN global. Sin configuración de servidor, sin mantenimiento de hosting: el cliente tiene un sitio que escala solo y que responde rápido desde cualquier ubicación.
SEO
El SEO 100/100 en Lighthouse no es magia: es implementar correctamente lo que Google pide. Agregué JSON-LD con Event schema, que le dice a Google exactamente qué es el evento, cuándo es, dónde es y quién lo organiza. Eso habilita rich results en los resultados de búsqueda: fechas y ubicación directamente en el snippet.
Además: meta tags completos, Open Graph para compartir en redes con imagen de preview correcta, geo tags para Costa Rica y velocidad de carga como factor de ranking. Un sitio que carga en 2 segundos en mobile ya tiene ventaja sobre uno que carga en 4.
Resultado
El sitio se entregó a tiempo para el lanzamiento, con Google Lighthouse marcando SEO 100/100 y Performance 90+ en mobile y desktop. El tráfico orgánico empezó desde el primer día indexado, sin campañas pagas iniciales. Para Andrey Fallas, este proyecto es un ejemplo claro de que una landing page bien construida técnicamente no solo se ve bien: posiciona y convierte.
Aprendizaje
Lo más satisfactorio fue resolver la tensión entre animaciones visualmente ricas y performance real. Las animaciones se ven hermosas, pero si no sabés exactamente cómo Lighthouse mide el LCP, podés destruir tu score sin darte cuenta. Entender que el tipo de propiedad CSS que animás en los elementos above-the-fold impacta directamente el puntaje de rendimiento, y entender el porqué, fue uno de esos momentos donde la teoría y la práctica se conectan de una forma que se queda con vos.
¿Tenés un proyecto similar?
Landing pages, sitios profesionales y apps web. Desde $350.
Solicitar propuesta gratuita