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 carga previa de los recursos acelera los tiempos de carga de las páginas y mejora las métricas empresariales.

Guilherme Moser de Souza

Thierno Thiam

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 demostraron 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 y 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 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 cargados previamente: Terra usó la API de Intersection Observer para detectar la visibilidad de la sección que contenía los artículos que quería cargar 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 cargas previas que no se usan.

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ó esta función por primera vez en la sección “Contenido relacionado” de la página del artículo. Un código de la AUA 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 función 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):

Cuando se usa con cuidado, la carga previa mejora considerablemente 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 le 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, no se necesitaba una biblioteca de JavaScript con todas las funciones para satisfacer 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

Cuando se usa con cuidado, la carga previa puede reducir significativamente los tiempos de carga para futuras solicitudes de navegación, 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.