Моментальная загрузка с instant.page

instant.page — это небольшой скрипт, позволяющий ускорять навигацию по сайту с помощью just-in-time предзагрузки. Когда пользователь наводит курсор на ссылку, страница предзагружается в фоне, и при переходе по ссылке открывается моментально. По тому же принципу работает InstantClick ^[1], но он предоставляется уже как отдельная библиотека на pushState и Ajax, с дополнительными модулями вроде прогресс-бара предзагрузки.

Установка

Просто добавьте скрипт в конец body:

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

Может показаться, что в современном вебе бессмысленно распространять своё решение через скрипт вместо размещения в npm, но это не JQuery и весь код буквально умещается в чуть больше 200 строк, поэтому подключить его может себе позволить даже самое легковесное приложение. К тому же, в виде модуля уже есть сверхпопулярный но спорный quicklink от Google.

Десктоп

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

Для понижения количества ложных срабатываний и в instant.page, и в InstantClick предлагают опционально триггерить предзагрузку в момент нажатия (mousedown), что в среднем должно ускорить загрузку на 80 миллисекунд. Правда, скрипт загружает только HTML, а другие жирные ресурсы всё равно будут загружаться в обычном режиме.

В instant.page есть и совсем безумный триггер для маньяков (и любителей quicklink), загружающий страницу, когда ссылка попадает в зону видимости. К счастью, в противовес ему есть и режим белого списка.

Телефон

В мобильной версии нет ховера, поэтому предзагрузка начинается в момент начала нажатия на ссылку, что даёт прирост около 90 миллисекунд, либо также можно выбрать триггер по попаданию в viewport, но для этого надо иметь или очень тонкие страницы, или минимальное и известное заранее количество ссылок (например, можно предзагрузить следующую страницу после отправки формы), или настроить белый список.

Настройка

• Белый список: предзагрузка работает только для ссылок с атрибутом data-instant (для этого в body надо добавить атрибут data-instant-whitelist)
• Чёрный список: не будут загружаться ссылки с атрибутом data-no-instant
• Внешние ссылки по умолчанию не загружаются, изменить это можно, добавив data-instant-allow-external-links в body
• Ссылки с вопросительным знаком по умолчанию не загружаются, потому что могут вызывать нежелательные действия. Чтобы разрешить их, нужно добавить data-instant-allow-query-string в body

Проблемы

• uBlock Origin и другие блокировщики, использующие список правил EasyPrivacy, блокируют скрипт как потенциальную угрозу приватности. Автор пытался убедить его мейтейнеров убрать instant.page из списка, но в итоге ему отказали и закрыли issue. При использовании скрипта на своём сайте можно просто захостить его у себя, что позволит обойти подобные блокировки. Однако у пользователей на Firefox с включённым uBlock Origin вырезается вообще любая предзагрузка, поэтому для них это решение не поможет.
• В Safari 13 поддержка выключена по умолчанию. Должно быть исправлено в Safari 14.

Заключение

Меньше чем за год (а популярность пришла к instant.page даже меньше полугода назад) технология закрепилась на рынке, обзавелась крупными клиентами вроде Spotify и Pepsico и подбирается по количеству звёзд на GitHub к InstantClick, который там находится с 2014 года. Автор заявляет (со ссылкой на builtwith ^[2]) о более чем 7000 сайтов, использующих instant.page, с суммарной аудиторией более 76 миллионов пользователей ежемесячно.

На правах рекламы

VDS для сайтов ^[3] любых масштабов — это про наши эпичные серверы! Они бесплатно защищены от DDoS-атак, скорость интернет-канала — 500 Мегабит. Предоставляем возможность автоматически установить удобную панель управления VestaCP для размещения сайтов. Поспешите заказать!

Автор: Mikhail

Источник ^[4]