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 las páginas y mejora las métricas empresariales.

Guilherme Moser de Souza

Thierno Thiam

La carga previa es una técnica que se usa para acelerar la carga de páginas mediante la descarga de recursos (o incluso páginas completas) que probablemente sean necesarias en un futuro cercano. Algunas investigaciones muestran que los tiempos de carga más rápidos generan porcentajes de conversiones más altos y mejores experiencias del usuario.

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

En este caso de éxito, se describe la implementación del recorrido de Terra, que logró un aumento del 11% en la tasa de clics (CTR) de los anuncios en dispositivos móviles, en el 30% en la CTR de los anuncios en computadoras y en un 50% menos en el Largest Contentful Paint (LCP).

Estrategia de carga previa

La carga previa existe hace un tiempo, pero es importante usarla con cuidado, ya que consume ancho de banda adicional para los recursos que no son inmediatamente necesarios. Esta técnica se debe aplicar cuidadosamente para evitar el uso innecesario de datos. En el caso de Terra, los artículos se cargan previamente si se cumplen las siguientes condiciones:

• Visibilidad de vínculos a artículos precargados: Terra usó la API de Intersection Observer para detectar la visibilidad de la sección que contiene los artículos que querían precargar.
• Condiciones favorables para un mayor uso de datos: Como se mencionó anteriormente, la carga previa es una mejora del rendimiento especulativa que consume datos adicionales y que puede no ser 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 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 tiene iOS.
• CPU inactiva: Por último, Terra verifica si está inactiva y puede realizar un trabajo adicional con requestIdleCallback, que solicita que se procese una devolución de llamada cuando el subproceso principal está inactivo o antes de un plazo específico (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 cargas previas que terminan sin usarse.

Cuando se cumplen estas condiciones, Terra realiza una carga previa de los artículos presentes en las secciones "Contenido relacionado" y "Recomendado para ti" destacados en azul a continuación.

Impacto en el negocio

Para medir el impacto de esta técnica, Terra lanzó primero la función en la sección "Contenido relacionado" de la página del artículo. Un código UTM los ayudó a diferenciar entre los artículos con carga previa y los no cargados previamente para fines de comparación. 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 carga previa 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	Computadoras
CTR de los anuncios	Más de 11%	30%
Visibilidad de los anuncios	Más del 10.5%	+6%
LCP	−51%	−73%
TTFB	−83%	−84%

Cuando se utiliza con cuidado, la carga previa mejora considerablemente el tiempo de carga de la página, aumenta las métricas de anuncios y reduce el tiempo de LCP.

Detalles técnicos

La carga previa 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 hizo esta elección, ya que les permite admitir Safari, que aún no admite otros métodos de carga previa, como rel=prefetch o la API de Speculation Rules. Además, una biblioteca de JavaScript con funciones completas no era necesaria para las necesidades de Terra.

El siguiente código de 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 comprueba una calidad de conexión y memoria del dispositivo mínimas antes de iniciar la carga previa.
• Luego, usa un IntersectionObserver para supervisar cuándo se vuelven visibles los elementos en el viewport, y, luego, 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

Cuando se usa con cuidado, la carga previa 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 precarga genera una carga de bytes adicionales que podrían no usarse, por lo que Terra tomó pasos adicionales para realizar la carga previa solo en buenas condiciones de red y en dispositivos capaces, donde esta información está disponible.

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