La Feria Viajera 2026

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 móvil. 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 celulares 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 gestor de contenidos y sí necesitaba control total sobre el rendimiento. Opté por código completamente personalizado: cada elemento existe por una razón, sin dependencias innecesarias ni capas que encarecen la carga.

La landing se estructuró en secciones con una progresión lógica: portada 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 la experiencia, aposté por scroll narrativo: el usuario va leyendo la historia del evento mientras baja. En escritorio el fondo de la portada es una imagen estática de alta calidad; en celular 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 de la portada entran con movimientos sutiles que no afectan el tiempo de carga que mide Google. Esa distinción significó la diferencia entre un rendimiento de 85 y uno de 90+.

Rendimiento

El objetivo de rendimiento desde el inicio fue claro: 90+ en Google Lighthouse en celular. Para lograrlo, cada decisión de implementación se tomó con ese número en mente. El JavaScript inicial que descarga el usuario es mínimo porque solo se incluye lo que realmente se usa.

Implementé carga diferida en todas las imágenes fuera de la primera pantalla, compresión calibrada y fuentes optimizadas con precarga explícita. El contenido principal tiene prioridad de carga alta y nunca se carga de forma diferida.

SEO

El 100 en SEO de Lighthouse no es magia: es implementar correctamente lo que Google pide. Agregué datos estructurados de evento, que le dicen a Google exactamente qué es el evento, cuándo es, dónde es y quién lo organiza. Eso habilita resultados enriquecidos en el buscador.

Además: meta tags completos, Open Graph para compartir en redes con la imagen de vista previa correcta, etiquetas geográficas para Costa Rica y velocidad de carga como factor de posicionamiento.

Aprendizaje

Lo más satisfactorio fue resolver la tensión entre animaciones visualmente ricas y rendimiento real. Entender que el tipo de propiedad CSS que animás en la primera pantalla 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.