[Ems]

HTML5 нам приносит всё больше и больше полезностей.

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

Дело в том, что пока вы щёлкаете на ссылку(раздел в меню, просто ссылка на другую страницу сайта и т.д.), есть некоторое количество миллисекунд(~ 300, а может быть и больше, так и меньше) от того времени, пока вы навели на ссылку и сделали клик. А что если, это время использовать с пользой? Скажем, начать загружать нужную страницу в фоне ещё до клика? Это позволит уже загрузить страницу и сразу её отобразить во время клика или как минимум, уже начать её загрузку.

Немного ajax + HTML5 History API = InstantClick (_http://instantclick.io/)

Качаем скрипт instantclick.min.js и ложим его допустим в корень сайта.
Добавляем в подвал сайта код:

Код:

...
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>

Чистим кеш сайта(если используется) и всё.

Но есть нюанс. По умолчанию, любая ссылка будет обрабатываться скриптом и какой-то функционал может не правильно работать. Не обязательно, что это ваш случай. Скорее всего всё будет ок, но, если заметите такую вещь, то нужно добавить к таким ссылкам атрибут "data-no-instant":

Код:

<a href="ссылка" data-no-instant>#</a>

После чего всё должно быть в норме. Тоже самое касается и скриптов. Если что будет не так, к ним просто добавляете атрибут "data-no-instant".

Вот и всё. Теперь страницы сайта будут грузиться заметно быстрее.

[ArhStrAngeR]

Ems, как результат? сравнивали скорости до и после?

[wolf28]

интересно, но если пользователь беспорядочно будет водить мышкой по меню, что там будет?)

[Avot]

я попробовал ради интереса на сайте одном, WP. Сразу обнаружился глюк-не глюк.. особенность. При первом заходе на сайт любой клик по ссылке приводит на пустую страницу с одиноким баннером (флеш-баннер, он на сайте в шапке расположен).

Шаблон старый, не знаю, что там не заладилось, да и не важно.

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

[Sky-R]

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

[Vasko]

Еще так понимаю вся реклама будет автоматически тоже кликаться при проведении по ней мышкой, либо придется редактировать рекламные блоки путем добавления атрибута "data-no-instant" ?

[Ems]

Ems, как результат? сравнивали скорости до и после?

Скорость не сравнивал. Но, заметно шустрее страницы открываются.

интересно, но если пользователь беспорядочно будет водить мышкой по меню, что там будет?)

Ничего не будет. Всё как обычно.

Сразу обнаружился глюк-не глюк.. особенность.

Где-то что-то не срабатывает и блокируется. Нужно найти это место и прописать там атрибут data-no-instant.

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

Всё может быть. Но много ли таких пользователей, которые беспорядочно водят мышкой по ссылкам?)

Еще так понимаю вся реклама будет автоматически тоже кликаться при проведении по ней мышкой, либо придется редактировать рекламные блоки путем добавления атрибута "data-no-instant" ?

На счёт рекламы не тестил, но возможно так.

[Тюбифекс]

Спасибо,действительно шустрее стали грузиться ссылки.

[Ems]

Библиотека обновилась.

В версии InstantClick 3.0 добавлена поддержка упреждающей загрузки контента для мобильных устройств на базе Android и iOS, с инициацией загрузки после поступления события ouchstart, сигнализирующего о начале касания к сенсорному экрану. В новой версии также добавлена реализация индикатора для отображения процесса смены страницы после клика и поддержка черных и белых списков ссылок для управления выборочным применением упреждающей загрузки.