La nueva arquitectura de Jetpack Search

¿Alguna vez has utilizado una tecnología nueva y al instante has deseado poder curiosear por dentro —«¿Cómo lo han hecho?»—? ¡Nosotros también! Por suerte, el espíritu del código abierto que inspira todo lo que hacemos significa que los entresijos del nuevo Jetpack Search están ahí para que curiosees. 

Ante un cambio de esta magnitud, también nos pareció útil explicar por qué consideramos necesario modificar a fondo nuestra arquitectura para mejorar la experiencia de búsqueda.

¿Por qué cambiarla?

Lanzamos Jetpack Search hace dos años, principalmente como una capa sobre una API de búsqueda de Elasticsearch que integramos en la forma habitual en que los temas de WordPress gestionan las búsquedas. Este enfoque permitía al administrador del sitio personalizar fácilmente la consulta de búsqueda e integrarla con los temas existentes como quisiera, pero tenía sus contrapartidas:

• Era anticuada. Los resultados de búsqueda del núcleo de WordPress no parecen modernos: están diseñados como un listado de archivo de entradas. No indican qué términos han coincidido. No corrigen la ortografía. Los resultados suelen ocupar demasiado espacio en la página, por lo que resultan especialmente difíciles de consultar en dispositivos móviles. En casi todos los temas, la búsqueda y el descubrimiento de contenido son secundarios.
• Podía ser más rápida. Sustituimos MySQL por Elasticsearch para acelerar el proceso, pero seguía habiendo mucho más retraso del necesario. El visitante enviaba una solicitud de búsqueda a tu servidor; este enviaba una solicitud a nuestra API; se generaba la página completa y, después, se devolvía al visitante. Según la ubicación del usuario, el servidor y nuestra API, los datos podían dar varios saltos por todo el planeta.
• No aprovechaba todo su potencial. La investigación sobre la experiencia del usuario demuestra que los filtros facilitan mucho el descubrimiento y la exploración, pero la mayoría de los temas carecen de barras laterales o tienen barras laterales que no funcionan en dispositivos móviles.

Sí, con solo sustituir MySQL por Elasticsearch los usuarios obtenían resultados mejores y más rápidos. Sin embargo, una búsqueda excelente ofrece resultados pertinentes con gran rapidez para animar al visitante a seguir explorando, incluso desde un dispositivo móvil. Cualquier arquitectura de software diseñada para funcionar en muchos miles —y, con suerte, muchos millones— de sitios web tendrá contrapartidas. En la nueva arquitectura, quitamos al administrador del sitio parte del control sobre la consulta de búsqueda y utilizamos una superposición sobre el tema. A cambio, creemos haber creado la mejor experiencia de búsqueda para sitios de WordPress y la más fácil de implantar.

¿Qué ha cambiado?

Para crear esta nueva experiencia de búsqueda, rediseñamos por completo la arquitectura de Jetpack Search. Hay muchas mejoras pequeñas, pero estas son las principales: 

• Aplicación de búsqueda en la interfaz. Nuestra nueva superposición de búsqueda es una aplicación JavaScript basada en Preact que ofrece una experiencia de búsqueda moderna y con filtros, y funciona bien con cualquier tema, tanto en ordenadores como en dispositivos móviles.
• Una API optimizada. Jetpack Search ya no es solo una capa sobre una API de Elasticsearch, sino una API optimizada para sitios de WordPress que puede ejecutar varias consultas de búsqueda cuando sea necesario para generar los mejores resultados.
• Nueva indexación. Nuestro índice de Elasticsearch reconstruido permite buscar mientras escribes, encuentra coincidencias tanto en los comentarios como en las entradas y utiliza las estadísticas de páginas vistas para mejorar la clasificación de los resultados.
• Velocidad. Ahora las búsquedas y los filtros van directamente desde el navegador del visitante hasta nuestra API para reducir al mínimo el retraso.

La nueva y mejorada experiencia de búsqueda y descubrimiento

Estos cambios resuelven todos los problemas originales de Jetpack Search y mejoran en gran medida los objetivos más importantes de la búsqueda y el descubrimiento: mayor relevancia, búsquedas y filtros rápidos, y menos carga en tu servidor. 

Mayor relevancia de las búsquedas

Crear buenos resultados de búsqueda exige mucho trabajo, y la nueva arquitectura de Jetpack Search ayuda en varias áreas clave.

Clasificación de los resultados

Nuestro algoritmo de búsqueda predeterminado anterior utilizaba BM-25 para clasificar los resultados y, después, los reclasificaba ligeramente según la fecha de publicación. También teníamos código de ejemplo para dar más peso a los resultados según el número de comentarios y «Me gusta», que utilizábamos como indicador aproximado de popularidad. En algunos sitios funcionaba bien priorizar la actualidad; en otros, la popularidad. Sin embargo, era difícil predecir qué opción sería mejor, y elegir una u otra era una herramienta bastante rudimentaria.

Para seguir mejorando nuestro algoritmo de búsqueda, empezamos a experimentar incorporando al índice el porcentaje de páginas vistas durante los últimos 30 días. Descubrimos que las páginas vistas son una señal de clasificación mucho mejor porque, en cierta medida, combinan popularidad y actualidad. Por eso, ahora la clasificación de la mayoría de nuestros resultados depende en gran medida del número de páginas vistas que recibe una entrada o una página. Además, si recibes mucho tráfico de la Búsqueda de Google, nuestros resultados deberían verse muy influidos por el algoritmo de clasificación de Google.

Nuestro nuevo algoritmo de clasificación es bastante reciente, así que todavía lo ajustamos manualmente. A medida que recopilemos más datos, mejoraremos su funcionamiento en muchos tipos de sitios. No obstante, la nueva arquitectura también utiliza seguimiento anonimizado y pruebas A/B, lo que nos permitirá experimentar con el algoritmo de búsqueda a lo largo del tiempo para aplicar mejoras constantes y continuas.

Coincidencias de contenido

En última instancia, la búsqueda debe comparar el contenido del sitio con lo que busca el visitante. Hay muchos obstáculos posibles: errores tipográficos, usuarios que no conocen la ortografía correcta, variantes ortográficas regionales («favorite» frente a «favourite»), términos diferentes para describir lo mismo que el propietario del sitio («car» frente a «automobile»), ausencia de contenido coincidente y mucho más.

Nuestra API ahora ofrece una forma sencilla de corrección ortográfica. Gracias a otros experimentos, sabemos que entre el 20 y el 30 % de todas las búsquedas contienen algún error tipográfico u ortográfico. A finales de 2018 implementamos una versión de la corrección ortográfica para la antigua arquitectura de Jetpack Search, pero requería ejecutar varias consultas de Elasticsearch y nunca nos convenció su integración con el tema. Por eso nunca llegamos a publicarla.

Con la nueva arquitectura, si no hay resultados coincidentes, hacemos una estimación razonada de lo que quería decir el usuario y ejecutamos rápidamente una segunda consulta. Esperamos reducir considerablemente la frecuencia con la que los usuarios obtienen cero resultados.

Al buscar coincidencias, casi siempre ayuda disponer de más texto en el que buscar. También incluimos el contenido de los 100 comentarios más recientes de una entrada junto con el contenido de esta para aumentar aún más las probabilidades de encontrar coincidencias. Además, estamos experimentando con la incorporación de contenido de algunos metadatos habituales de las entradas, como los SKU de WooCommerce, las categorías de productos y varias decenas más.

Presentación de los resultados

La mayoría de los grandes sitios web públicos de búsqueda tienen algunos componentes comunes que no se pueden implementar sobre el núcleo de WordPress. Dos de los principales son el resaltado de los términos coincidentes y los resultados de búsqueda por facetas.

Resaltar los términos coincidentes ofrece a quien busca mucho más contexto sobre el motivo por el que un resultado coincide con la consulta. Puede ver el contexto que rodea los términos coincidentes y saber si proceden de un comentario, del título o del texto principal. Así podemos condensar los resultados para que ocupen menos espacio en la pantalla y el usuario pueda examinar rápidamente varios.

La navegación por facetas consiste en mostrar un conjunto de filtros en la barra lateral para que los usuarios puedan filtrar rápidamente listas largas de resultados y encontrar lo que necesitan. Afinar la consulta podría dar cero resultados; filtrar unos resultados amplios ayuda a evitar que el usuario llegue a un callejón sin salida.

La versión anterior de Jetpack Search ya incluía filtros y facetas, pero solo el 10 % de los sitios los configuraba. Además, no funcionaban si el usuario estaba en un dispositivo móvil o si el tema carecía de barra lateral. Nuestra nueva interfaz de superposición permite configurar automáticamente los filtros en todos los sitios sin impedir que los administradores personalicen los ajustes, con barra lateral o sin ella.

Búsquedas y filtros rápidos

Este es el diagrama de flujo de una consulta de búsqueda con la arquitectura anterior:

Y este es su aspecto con la nueva arquitectura:

Para un usuario final situado en Nueva Zelanda —donde vive uno de nuestros desarrolladores—, la búsqueda anterior tardaba varios segundos en mostrar un conjunto de resultados. Con la nueva arquitectura, el recorrido desde su navegador hasta nuestro centro de datos de California tarda aproximadamente medio segundo. Yo estoy en Colorado y recibo los resultados de búsqueda desde Texas en unos 0,2 segundos.

Además de rediseñar la arquitectura, implantamos otras tecnologías para acelerar los resultados de búsqueda:

• La aplicación de búsqueda en JavaScript utiliza Preact para reducir al mínimo el tamaño del paquete y permitirnos crear una interfaz rápida y adaptable.
• Almacenamos los resultados de búsqueda en la caché del navegador del usuario para que, si repite una búsqueda, ni siquiera tenga que enviar una nueva solicitud a la API.
• En cada solicitud a la API, utilizamos Memcache para almacenar en caché todas las consultas de Elasticsearch, por lo que alrededor del 50 % de las búsquedas de nuestra API no necesitan llegar a Elasticsearch.
• No utilizamos MySQL en absoluto para las solicitudes a la API. Todos los datos de respuesta proceden de Elasticsearch.
• Todas las imágenes que mostramos utilizan la CDN de Jetpack, implantada globalmente. (Aunque nuestros resultados de búsqueda actuales no muestran imágenes, tenemos un prototipo).
• Nuestro índice y algoritmo de búsqueda están optimizados para buscar mientras escribes, de modo que podamos mostrar resultados pertinentes con la mayor rapidez posible.

También adoptamos una visión amplia de la «búsqueda», por lo que aceleramos los filtros y el descubrimiento de contenido. Sabemos que solo el 1 % de las cargas de página de los millones de sitios de WordPress.com procede de búsquedas, mientras que el 9 % corresponde a páginas de etiquetas y categorías (a modo de comparación, el 13 % son páginas de inicio). Así, cuando el widget de búsqueda está configurado en la barra lateral de un sitio, todos los filtros y facetas que se muestran allí abren la superposición de búsqueda en lugar de exigir una nueva carga de la página. Cuanto más rápido sea el descubrimiento de contenido, más atractivo y ágil parecerá el sitio.

Elimina la carga de tu servidor

Los sitios pequeños de WordPress pueden funcionar con alojamientos de 5 $ al mes, mientras que los sitios enormes pueden utilizar alojamientos que cuestan miles de dólares al mes. En ambos casos, un uso intensivo de las búsquedas puede colapsar fácilmente la base de datos MySQL. Hemos visto búsquedas que tardaban entre 30 y 60 segundos en completarse con MySQL y menos de 100 ms al trasladarlas a Elasticsearch. Parte de la magia de Jetpack consiste en que tu día con más tráfico sigue siendo un día normal para nosotros. Con la nueva arquitectura, las consultas de búsqueda y filtrado ni siquiera llegarán a tu servidor: todas se trasladarán a nuestra API.

Para conseguir esa magia, almacenamos en nuestros servidores una gran cantidad de datos de tu sitio web y los utilizamos para crear un índice de búsqueda. Si actualizas una etiqueta presente en 10 000 entradas, volveremos a indexarlas todas para mantenerlo todo sincronizado. La caché inicial puede tardar un poco en crearse, pero, una vez lista, alivia considerablemente la carga de tu sitio.

Jetpack también ofrece otras funciones de rendimiento que utilizamos. Nuestro paquete de JavaScript para las búsquedas está creado con Preact para reducir al mínimo su tamaño. Además, lo almacenamos en caché en centros de datos de todo el mundo para que los usuarios finales lo carguen desde un servidor más cercano. Del mismo modo, todas las imágenes de los resultados de búsqueda se muestran a través de nuestra CDN para que se carguen lo antes posible.

Hacia el futuro

Creemos que la nueva arquitectura de Jetpack Search seguirá siendo útil para tu sitio en el futuro, ya que ofrece a tus visitantes una experiencia más ágil y moderna. Hemos aceptado algunas contrapartidas que reducen las opciones de personalización, pero consideramos que la experiencia de búsqueda es al menos diez veces mejor que antes y claramente superior a las demás opciones del mercado. También esperamos que esta nueva arquitectura nos ayude a seguir mejorando tu experiencia de búsqueda con el tiempo. Esperamos que Jetpack Search te guste tanto como a nosotros nos gustó crearlo.

Mejora tu experiencia de búsqueda en WordPress hoy.

¿Te ha parecido divertido? ¡Ven a trabajar con nosotros!