Hace dos meses, buscar algo común en el marketplace, una bicicleta, por ejemplo, era un juego de adivinanzas. La barra lateral mostraba todas las categorías que tenemos, de arriba abajo, en forma de árbol. Elegías una, hacías scroll, llegabas a un callejón sin salida, volvías atrás, probabas la siguiente, y vuelta a empezar. La barra lateral describía nuestro catálogo, no tus resultados.
Eso nos molestaba. Así que desmontamos la barra lateral y la reconstruimos. Por el camino recortamos los bytes de cada foto del sitio, hicimos que la cabecera se aparte de tu vista mientras haces scroll, e incorporamos un puñado de pequeños trucos de navegador que se suman para lograr esa sensación de "aquí algo se siente diferente". Esto es el resumen.
Imágenes más rápidas
Todas las imágenes pasan por nosotros. Los usuarios suben un JPEG de 4 MB de la mesa de su cocina; nosotros lo redimensionamos para las tarjetas de producto, las páginas de producto y las miniaturas, y servimos esas copias para siempre. La canalización se montó hace años y funcionaba, pero tenía dos problemas que habíamos estado ignorando.
Problema uno: estábamos conservando cada imagen en el formato en el que se había subido. El JPEG seguía siendo JPEG, el PNG seguía siendo PNG. Redimensionábamos de forma agresiva, pero nunca habíamos recodificado a un formato moderno más pequeño, dejando sin aprovechar aproximadamente un tercio de los bytes de cada foto.
Problema dos: el navegador no tenía ni idea de cuál era la imagen más importante en una página de producto. La gran imagen principal, las cuatro miniaturas a su lado, la fila de productos recomendados de abajo: todas se cargaban con la misma prioridad, compitiendo entre sí por la misma conexión. La imagen principal aparecía cuando le apetecía.
Ambos solucionables.
Un único formato para cada foto
Estandarizamos un único formato de imagen moderno en la entrada. Sea cual sea el formato que subas, JPEG, PNG, GIF animado, lo recodificamos al más pequeño. En el caso de los GIF animados conservamos el primer fotograma; las fotos de producto no son animaciones, y preferimos tener una imagen fija más ligera que un bucle pesado que nadie pidió.
Decirle al navegador qué importa
Esta fue la mayor victoria. A los navegadores se les puede indicar cuál es la imagen más importante de una página, la "principal", para que la descarguen antes que todo lo demás. Añadimos estas indicaciones en tres lugares:
- La imagen principal de una página de producto: prioridad máxima. Las miniaturas laterales explícitamente más bajas para que no compitan.
- La primera fila de tarjetas en los feeds de inicio y de búsqueda: alta. Las filas por debajo del pliegue esperan a que hagas scroll hacia ellas.
- Las imágenes decorativas (los pequeños iconos de categoría, etc.): baja, y cargadas solo bajo demanda.
The hero downloads first; thumbnails wait their turn.
Un error silencioso que detectamos por el camino
La galería de la página de producto elegía el tamaño de una foto según el orden en que el servidor las devolvía por casualidad, y no según el tamaño que realmente necesitaba. A veces la imagen principal era una miniatura de 300 píxeles; a veces una miniatura era la versión a resolución completa. Ahora una vista recién cargada "se siente" más nítida porque el tamaño correcto acaba en el lugar correcto.
Filtrado de búsqueda más inteligente
Volvamos al ejemplo de la bicicleta. Una búsqueda así cruza muchas categorías, bicicletas de adulto, bicicletas de niño, piezas, accesorios, y la antigua barra lateral no tenía ni idea de cuáles de ellas tenían resultados de verdad. Lo descubrías haciendo clic en cada una. La nueva barra lateral simplemente muestra el conjunto que coincide, con sus recuentos.
La misma idea se despliega para cada atributo que conocemos. Marca, color, talla, tamaño del cuadro, peso: si los resultados que coinciden tienen valores para él, ese atributo aparece en la barra lateral con casillas de verificación y recuentos.
Para los atributos numéricos (precio, peso, capacidad, etc.) reemplazamos los antiguos campos de "introduce un mínimo y un máximo" por un control deslizante cuyos límites coinciden con el rango real presente en los resultados. Si el anuncio más barato que coincide cuesta 120 €, el deslizante empieza en 120 €. Se acabó teclear un mínimo de 10 € cuando, de todas formas, ningún resultado es más barato que 120 €.
Árbol de categorías estático (cada nodo del catálogo). Campos de mín/máx vacíos para el precio. Sin saber qué categorías tenían resultados de verdad hasta hacer clic en ellas una por una.
Solo las categorías con resultados que coinciden, ordenadas por recuento. Selección múltiple para ampliar. Deslizante acotado por el mín/máx real de los anuncios que coinciden. La barra lateral es un mapa del conjunto de resultados, no un directorio del catálogo.
Cuando el conjunto de resultados está vacío
Un detalle más: si filtras de más y acabas con cero resultados, toda la barra lateral desaparece. No hay nada que afinar: las etiquetas de filtro y las casillas serían solo ruido visual. La página se reduce a un único botón "Borrar todos los filtros", centrado. Un clic y vuelves a donde la barra lateral puede ayudarte.
Una experiencia de navegación más pulida
Este sprint llegaron cinco pequeñas cosas que, juntas, cambian la sensación del sitio. Ninguna es una funcionalidad estrella; cada una es una o dos declaraciones de CSS. Están enumeradas según la frecuencia con la que un usuario típico se las encontrará.
La cabecera se aparta del camino
La barra de navegación blanca de la parte superior de cada página ahora se desliza hacia arriba y desaparece de la pantalla cuando haces scroll hacia abajo, y vuelve a aparecer cuando haces scroll hacia arriba: el clásico patrón de "la cabecera se aparta de mi camino mientras leo". Los navegadores que no soportan la funcionalidad subyacente simplemente mantienen la barra visible; nada se rompe.
Transiciones más fluidas de tarjeta → producto
Haz clic en una tarjeta de producto en el feed de inicio o de búsqueda y su imagen principal ahora se anima suavemente hasta su sitio en la página de detalle del producto, en lugar del antiguo corte brusco. El título, el precio y el botón de "me gusta" de la tarjeta hacen lo mismo. Es la diferencia entre una página que "se carga" y una que "se transforma".
Los títulos se ajustan mejor
Los títulos de producto, los títulos de tarjeta, los encabezados de sección: ninguno deja ya una palabra huérfana en la última línea. El navegador equilibra los saltos de línea por nosotros. Una declaración de CSS, aplicada en todo el sitio, visible al instante allá donde un título se ajusta.
Se acabó el salto horizontal al abrir los modales
Antes: abrías el modal para compartir, la página daba un tirón de 15 píxeles hacia la derecha al desaparecer la barra de desplazamiento, y todo lo de debajo se movía. Ahora: un margen reservado mantiene el espacio, esté o no la barra de desplazamiento. Los modales se abren sin que la página dé el tirón.
Cambios de idioma más rápidos
El formateo de fechas en tu idioma solía enviarse empaquetado junto con los datos de formateo de todos los demás idiomas soportados, unos 100 KB de datos de localización, aunque solo necesitaras uno. Ahora cargamos únicamente el idioma que estás usando. Paquete más pequeño, primer renderizado más rápido.
Limpieza interna
Un montón de pequeños ajustes que costaría notar individualmente, pero que aparecen como trazas más limpias en nuestros paneles de rendimiento. Ninguno cambió ningún comportamiento que pudieras ver. Las cifras destacadas:
Lo que no lanzamos (todavía)
Algunos elementos se empezaron pero no llegaron a este sprint:
- Filtrado de atributos con varios valores. La interfaz acepta varios valores marcados por atributo (puedes marcar tres marcas), pero hoy solo se respeta uno en el lado del servidor. El próximo sprint.
- Recálculo de facetas más inteligente. Ahora mismo, marcar "ASUS" elimina el resto de opciones de marca de la lista. La versión pulida vuelve a contar cada faceta excluyendo su propio filtro para que las opciones sigan visibles. Es factible; solo que la ruta de consulta es más costosa.
- Imágenes AVIF. Aún más ligeras que las que servimos hoy. Suponen más trabajo de codificación en el lado del servidor; en pausa hasta que hagamos benchmarks.
Eso es todo por este sprint. La próxima publicación debería tratar sobre el trabajo que empezamos en los anuncios compartidos entre usuarios, discretamente la funcionalidad más solicitada del último trimestre, en cuanto esté lo bastante avanzado como para hablar de ello.