Как предварительная загрузка помогла Terra повысить рейтинг кликов по объявлениям на 30 % и ускорить работу Largest Contentful Paint.

Предварительная выборка ресурсов ускоряет загрузку страниц и улучшает бизнес-показатели.

Guilherme Moser de Souza

Thierno Thiam

Предварительная выборка — это метод, используемый для ускорения загрузки страниц путем загрузки ресурсов (или даже целых страниц), которые, вероятно, понадобятся в ближайшем будущем. Исследования показали, что более быстрое время загрузки приводит к более высоким показателям конверсии и улучшению пользовательского опыта.

Terra — один из крупнейших контент-порталов в Бразилии, предлагающий развлечения, новости и спорт, который посещают более 63 миллионов уникальных посетителей в месяц. Мы сотрудничали с командой инженеров Terra, чтобы сократить время загрузки статей, используя методы предварительной загрузки в определенных разделах их веб-сайта.

В этом тематическом исследовании описывается реализация путешествия Terra, которая привела к увеличению рейтинга кликов (CTR) объявлений на 11 % на мобильных устройствах, CTR объявлений на 30 % на настольных компьютерах и сокращению времени наибольшей прорисовки контента (LCP) на 50 %.

Стратегия предварительной выборки

Предварительная выборка существует уже давно, но важно использовать ее осторожно, поскольку она потребляет дополнительную полосу пропускания для ресурсов, которые не нужны немедленно. Этот метод следует применять продуманно, чтобы избежать ненужного использования данных. В случае с Terra статьи предварительно загружаются, если выполняются следующие условия:

• Видимость ссылок на предварительно загруженные статьи: Terra использовала API Intersection Observer для определения видимости раздела, содержащего статьи, которые они хотели предварительно загрузить.
• Благоприятные условия для увеличения использования данных. Как упоминалось ранее, предварительная выборка — это спекулятивное улучшение производительности, которое потребляет дополнительные данные и не в каждой ситуации может быть желательным результатом. Чтобы снизить вероятность потери пропускной способности, Terra использует API сетевой информации вместе с API памяти устройства, чтобы определить, следует ли получать следующую статью. Терра получает следующую статью только тогда, когда:
  • Скорость соединения не ниже 3G и устройство имеет не менее 4 ГБ памяти,
  • или если устройство работает под управлением iOS.
• Простой ЦП: Наконец, Terra проверяет, простаивает ли ЦП и может ли он выполнять дополнительную работу, используя requestIdleCallback , который принимает обратный вызов для обработки, когда основной поток простаивает, или по определенному (необязательному) крайнему сроку — в зависимости от того, что наступит раньше.

Соблюдение этих условий гарантирует, что Terra будет получать данные только при необходимости, что экономит полосу пропускания и время автономной работы, а также сводит к минимуму влияние предварительной выборки, которая в конечном итоге остается неиспользованной.

При выполнении этих условий Terra предварительно загружает статьи, представленные в разделах: «Похожий контент» и «Рекомендуется для вас», выделенных синим цветом ниже.

Влияние на бизнес

Чтобы измерить влияние этого метода, Terra сначала запустила эту функцию в разделе «Похожий контент» на странице статьи. Код UTM помог им различать предварительно загруженные и непредварительно загруженные статьи для целей сравнения. После двух недель успешного A/B-тестирования Terra решила добавить функцию предварительной загрузки в раздел «Рекомендуется для вас».

В результате предварительной загрузки статей наблюдалось общее увеличение показателей рекламы и сокращение времени LCP и времени до первого байта (TTFB) :

Метрика	мобильный	Рабочий стол
CTR объявлений	+11%	+30%
Видимость рекламы	+10,5%	+6%
ЛКП	-51%	-73%
ТТФБ	-83%	-84%

Предварительная загрузка — при осторожном использовании — значительно сокращает время загрузки страницы, увеличивает показатели рекламы и сокращает время LCP.

Технические детали

Предварительную выборку можно выполнить с помощью подсказок ресурсов, таких как rel=prefetch или rel=preload , с помощью таких библиотек, как Quicklink или Guess.js , или с помощью более нового API Speculation Rules . Terra решила реализовать это, используя API выборки с низким приоритетом в сочетании с экземпляром Intersection Observer. Terra сделала этот выбор, поскольку он позволяет им поддерживать Safari, который пока не поддерживает другие методы предварительной выборки, такие как rel=prefetch или API Speculation Rules, а полнофункциональная библиотека JavaScript не была необходима для нужд Terra.

Приведенный ниже код JavaScript примерно эквивалентен коду, используемому 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)
})

• Функция prefetch сначала проверяет минимальное качество соединения и объем памяти устройства, прежде чем запускать предварительную выборку.
• Затем он использует IntersectionObserver для отслеживания того, когда элементы становятся видимыми в области просмотра, и впоследствии добавляет URL-адреса в список для предварительной загрузки.
• Процесс предварительной выборки запланирован с помощью requestIdleCallback с целью выполнения функции prefetch , когда основной поток простаивает.

Заключение

При осторожном использовании предварительная выборка может значительно сократить время загрузки будущих навигационных запросов, тем самым уменьшая трудности в пути пользователя и повышая вовлеченность. Предварительная выборка приводит к загрузке дополнительных байтов, которые могут быть не использованы, поэтому Terra предприняла дополнительные шаги, чтобы выполнять предварительную выборку только при хороших условиях сети и на соответствующих устройствах, где эта информация доступна.

Особая благодарность Жилберто Кокки, Гарри Теодулу, Мигелю Карлосу Мартинесу Диасу, Барри Полларду, Джереми Вагнеру, а также Леонардо Беллини и Лукке Парадеде из инженерной команды Terra за их вклад в эту работу.