​Prefetching - это технология, позволяющая ускорить загрузку...

​Prefetching - это технология, позволяющая ускорить загрузку страницы путем подгрузки ресурсов или целых страниц, которые могут понадобиться в ближайшее время

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

Terra - один из крупнейших бразильских контент-порталов, предлагающий развлекательные материалы, новости и спорт.

Ежемесячно его посещают более 63 млн. уникальных посетителей.

Результаты внедрения префетчинга в Terra:

— Мобилы: увеличение показателя кликов на рекламу (CTR) на 11%.

— Десктоп: 30% увеличение CTR рекламы.

— Производительность: 50% сокращение показателя LCP.

Префетчинг потребляет дополнительную пропускную способность (бендвич) для ресурсов, которые не требуются в данный момент.

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

Terra использовала Intersection Observer API для определения просматриваемости разделов, содержащих статьи, которые планировалось префетчить.

Для минимизации потерь пропускной способности Terra использовала Network Information API и Device Memory API.

Они выполняют префетчинг следующей статьи только в том случае, если:

— Скорость соединения составляет не менее 3G, а память устройства - не менее 4 ГБ.

— Устройство управляется iOS.

Terra проверяет наличие простоя процессора с помощью requestIdleCallback.

Сначала Terra применила префетчинг к разделу "Связанный контент" своих статей.

Они использовали UTM-метки для разделения статей, попавших и не попавших в префетчинг.

После двух успешных недель A/B-тестирования Terra добавила префетчинг в раздел "Рекомендуем для вас".

Префетчинг привел к улучшению показателей рекламы и сокращению времени LCP и времени TTFB.

Префетчинг может быть реализован с помощью подсказок ресурса (resource hints), таких как rel=prefetch или rel=preload, библиотек типа Quicklink или Guess.js, а также с помощью нового Speculation Rules API.

Terra остановила свой выбор на Fetch API с низким приоритетом в сочетании с инстанцией Intersection Observer.

Такое решение позволило поддержать Safari, который не поддерживает некоторые другие методы префетчинга.

В статье приводится сниппет кода JavaScript, который соответствует методу префетчинга Terra.

Перед началом префетчинга код проверяет качество соединения и память устройства.

Затем он использует IntersectionObserver для отслеживания видимости элементов в области просмотра и добавляет URL-адреса в список префетчинга.

Процесс префетчинга планируется с помощью requestIdleCallback.

https://web.dev/terra-prefetching-case-study/

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/2193...