Cómo la carga previa ayudó a Terra a aumentar la tasa de clics de los anuncios en un 30% y a acelerar el Largest Contentful Paint.

La precarga de recursos acelera los tiempos de carga de la página y mejora las métricas empresariales.

Guilherme Moser de Souza
Guilherme Moser de Souza

La precarga es una técnica que se usa para acelerar la carga de páginas descargando recursos, o incluso páginas completas, que es probable que se necesiten en un futuro cercano. Las investigaciones demuestran que los tiempos de carga más rápidos generan mayores porcentajes de conversiones y mejores experiencias del usuario.

Terra es uno de los portales de contenido más grandes de Brasil, que ofrece entretenimiento, noticias y deportes con más de 63 millones de visitantes únicos por mes. Colaboramos con el equipo de ingeniería de Terra para mejorar el tiempo de carga de los artículos mediante técnicas de precarga en ciertas secciones de su sitio web.

En este caso de éxito, se describe la implementación del recorrido de Terra, que generó un aumento del 11% en la tasa de clics (CTR) de los anuncios en dispositivos móviles, un 30% en las computadoras de escritorio y una reducción del 50% en los tiempos de Procesamiento de imagen con contenido más grande (LCP).

Estrategia de precarga

La precarga existe desde hace tiempo, pero es importante usarla con cuidado, ya que consume ancho de banda adicional para recursos que no son necesarios de inmediato. Esta técnica debe aplicarse con cuidado para evitar el uso innecesario de datos. En el caso de Terra, los artículos se precargan si se cumplen las siguientes condiciones:

  • Visibilidad de los vínculos a los artículos almacenados previamente: Terra usó la API de Intersection Observer para detectar la visibilidad de la sección que contiene los artículos que quería almacenar previamente.
  • Condiciones favorables para aumentar el uso de datos: Como se mencionó anteriormente, la precarga es una mejora de rendimiento especulativa que consume datos adicionales, y es posible que no sea un resultado deseable en todas las situaciones. Para reducir la probabilidad de desperdiciar ancho de banda, Terra usa la API de Network Information junto con la API de Device Memory para determinar si se debe recuperar el siguiente artículo. Terra solo recupera el siguiente artículo en los siguientes casos:
    • La velocidad de conexión es de al menos 3G y el dispositivo tiene al menos 4 GB de memoria.
    • o si el dispositivo ejecuta iOS.
  • CPU inactiva: Por último, Terra verifica si la CPU está inactiva y puede realizar trabajo adicional con requestIdleCallback, que toma una devolución de llamada para procesarse cuando el subproceso principal está inactivo o por una fecha límite específica (opcional), lo que ocurra primero.

El cumplimiento de estas condiciones garantiza que Terra solo recupere datos cuando sea necesario, lo que ahorra ancho de banda y duración de batería, y minimiza el impacto de las precargas que no se usan.

Cuando se cumplen estas condiciones, Terra precarga los artículos presentes en las secciones "Contenido relacionado" y "Recomendado para ti", que se destacan en azul a continuación.

Captura de pantalla de las dos secciones del sitio web de Terra en las que se recuperaron previamente los vínculos. A la izquierda, se destaca la sección "Contenido relacionado", mientras que a la derecha, se destaca la sección "Recomendado para ti".

Impacto en el negocio

Para medir el impacto de esta técnica, Terra lanzó esta función por primera vez en la sección “Contenido relacionado” de la página del artículo. Un código de UTM los ayudó a diferenciar entre los artículos que se habían recuperado previamente y los que no, para realizar comparaciones. Después de dos semanas de pruebas A/B exitosas, Terra decidió agregar la funcionalidad de carga previa a la sección "Recomendado para ti".

Como resultado de la precarga de artículos, se observó un aumento general de las métricas de anuncios y una reducción de los tiempos de LCP y tiempo hasta el primer byte (TTFB):

Métrica Dispositivos móviles Computadora de escritorio
CTR de los anuncios Más de 11% +30%
Visibilidad de los anuncios +10.5% +6%
LCP -51% -73%
TTFB -83% -84%

La precarga, cuando se usa con cuidado, mejora en gran medida el tiempo de carga de la página, aumenta las métricas de los anuncios y reduce el tiempo de LCP.

Detalles técnicos

La precarga se puede lograr mediante el uso de sugerencias de recursos, como rel=prefetch o rel=preload, a través de bibliotecas como quicklink o Guess.js, o con la API de Speculation Rules más reciente. Terra decidió implementar esto con la API de recuperación con una prioridad baja en combinación con una instancia de Intersection Observer. Terra tomó esta decisión porque les permite admitir Safari, que aún no admite otros métodos de precarga, como rel=prefetch o la API de Speculation Rules, y no era necesaria una biblioteca de JavaScript con todas las funciones para las necesidades de Terra.

El siguiente código JavaScript es aproximadamente equivalente al código que usa Terra:

function prefetch(nodeLists) {
  // Exclude slow ECTs < 3g
  if (navigator.connection &&
    (navigator.connection.effectiveType === 'slow-2g'
      || navigator.connection.effectiveType === '2g')
  ) {
    return;
  }

  // Exclude low end device which is device with memory <= 2GB
  if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
    return;
  }

  const fetchLinkList = {};

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        if (!fetchLinkList[entry.target.href]) {
          fetchLinkList[entry.target.href] = true;

          fetch(entry.target, {
            priority: 'low'
          });
        }

        observer.unobserve(entry = entry.target);
      }
    });
  });
}

const idleCallback = window.requestIdleCallback || function (cb) {
  let start = Date.now();

  return setTimeout(function () {
    cb({
      didTimeout: false,
      timeRemaining: function () {
        return Math.max(0, 50 - (Date.now() - start));
      }
    });
  }, 1);
}

idleCallback(function () {
  prefetch(nodeLists)
})
  • La función prefetch primero verifica una calidad de conexión y una memoria del dispositivo mínimas antes de iniciar la carga previa.
  • Luego, usa un IntersectionObserver para supervisar cuándo los elementos se vuelven visibles en la ventana de visualización y, posteriormente, agrega URLs a una lista para la carga previa.
  • El proceso de carga previa se programa con requestIdleCallback, con el objetivo de ejecutar la función prefetch cuando el subproceso principal esté inactivo.

Conclusión

Si se usa con cuidado, la precarga puede reducir significativamente los tiempos de carga de las solicitudes de navegación futuras, lo que reduce la fricción en el recorrido del usuario y aumenta la participación. La carga previa genera la carga de bytes adicionales que pueden no usarse, por lo que Terra tomó medidas adicionales para realizar la carga previa solo en condiciones de red óptimas y en dispositivos compatibles, donde esta información está disponible.

Agradecimientos especiales a Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner, Leonardo Bellini y Lucca Paradeda del equipo de Ingeniería de Terra por su contribución a este trabajo.