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.
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.
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.
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.
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. Esa distinción significó la diferencia entre un Performance de 85 y uno de 90+.
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 fuera del viewport inicial, compresión calibrada y fuentes optimizadas con preload explícito. El LCP tiene prioridad de carga alta y nunca se carga de forma diferida.
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.
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.
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.
Aprendizaje
Lo más satisfactorio fue resolver la tensión entre animaciones visualmente ricas y performance real. Entender que el tipo de propiedad CSS que animás en los elementos above-the-fold impacta directamente el puntaje de rendimiento 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