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



    instant.page — это небольшой скрипт, позволяющий ускорять навигацию по сайту с помощью just-in-time предзагрузки. Когда пользователь наводит курсор на ссылку, страница предзагружается в фоне, и при переходе по ссылке открывается моментально. По тому же принципу работает InstantClick, но он предоставляется уже как отдельная библиотека на 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) о более чем 7000 сайтов, использующих instant.page, с суммарной аудиторией более 76 миллионов пользователей ежемесячно.



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


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

    VDSina.ru хостинг серверов
    Серверы в Москве и Амстердаме

    Комментарии 6

      0
      технология закрепилась на рынке, обзавелась крупными клиентами вроде Spotify и Pepsico

      На обоих сайтах никакой предзагрузки не наблюдается, зато наблюдается "cache-control: no-cache", что делает предзагрузку бессмысленным действием.

        –4
        Для себя решил проблему обхода кеша при помощи вот такого топорного способа:
        site.com/page.html?t=${timestamp}
        Пришел к этому после танцев с настройкой кеша в разных браузерах.
          +1
          По умолчанию, курсор может перемещаться по странице произвольно а место совершения клика может случиться и на кнопке закрытия вкладки с этим сайтом. И, спрашивается, зафигом было загружено в фоне всё это великолепие? Не городите лишние сущности. Не надо жрать траффик. Со страниц наоборот, нужно убирать всё лишнее.
            0
            Автор скрипта утверждает, что если указатель уже наведён на ссылку более 65 миллисекунд, пользователь в половине случае перейдёт по ней.

            Вот же, вроде объяснили
            0
            Топовый коммент из Hacker News на тему:

            I think this library has gotten steadily worse over time. After 1.2.2, each new release just introduces more configurability that >99.99% of sites won’t want, more complications, more bugs and more misfeatures. Most notably version 5 introduced triggering load on mouse down, which I call catastrophically wrong, 100% dealbreaker with prejudice. 5.1.0 made it opt-in, but it’s still functionality that just shouldn’t exist.

            news.ycombinator.com/item?id=24476059
              0
              вот и попробуем с 1.2.2 версией
              Но вообще лол, как можно 4 версии склепать, если они ничего нового полезного не приносят

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое