Моментальная загрузка с instant.page
instant.page — это небольшой скрипт, позволяющий ускорять навигацию по сайту с помощью just-in-time предзагрузки. Когда пользователь наводит курсор на ссылку, страница предзагружается в фоне, и при переходе по ссылке открывается моментально. По тому же принципу работает InstantClick, но он предоставляется уже как отдельная библиотека на pushState и Ajax, с дополнительными модулями вроде прогресс-бара предзагрузки.
Установка
Просто добавьте скрипт в конец body:
Может показаться, что в современном вебе бессмысленно распространять своё решение через скрипт вместо размещения в 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) о более чем 7000 сайтов, использующих instant.page, с суммарной аудиторией более 76 миллионов пользователей ежемесячно.
На правах рекламы
VDS для сайтов любых масштабов — это про наши эпичные серверы! Они бесплатно защищены от DDoS-атак, скорость интернет-канала — 500 Мегабит. Предоставляем возможность автоматически установить удобную панель управления VestaCP для размещения сайтов. Поспешите заказать!
