Какая польза от предварительной загрузки веб-страницы? Предварительная выборка веб-страницы с предварительной загрузкой технологии Instant.page

Скорость загрузки веб-страницы повлияет на вашпоставщик электроэнергиисайт в поисковикеSEOРейтинг.

Что такое предварительная загрузка веб-страницы?

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

• Когда пользователь намеренно посещает страницу, браузер предварительно загружает страницу.
• Когда пользователь фактически щелкает ссылку, он напрямую считывает содержимое страницы из предварительно загруженного кеша и сокращает время загрузки страницы.
• Amazon и другие компании обнаружили, что задержка в 100 миллисекунд составляет 1% продаж, но задержку в Интернете трудно преодолеть.

Предварительная загрузка веб-страницыКакая польза от предварительной загрузки?

Instant.page использует мгновенную предварительную загрузку — она предварительно загружает страницу до того, как пользователь нажмет ▼

• Прежде чем пользователь нажмет на ссылку, он наведет на нее курсор.
• Когда пользователь наводит курсор на 65 мс, у него будет возможность щелкнуть ссылку, поэтому Instant.page начинает предварительную загрузку в этот момент, в среднем на предварительную загрузку страницы уходит более 300 мс.
• На мобильных устройствах пользователи начинают прикасаться к своему дисплею перед тем, как отпустить его, в среднем на предварительную загрузку страницы уходит 90 мс.

Prefetch ускоряет загрузку веб-страниц

• Человеческому мозгу требуется менее 100 миллисекунд, чтобы мгновенно воспринять действие.
• Таким образом, технология предварительной загрузки Instant.page может сделать ваш веб-сайт мгновенным даже в 3G (при условии, что скорость рендеринга вашей страницы высока).

Как решить медленную загрузку веб-страниц?

Страницы предварительно загружаются только тогда, когда существует высокая вероятность того, что пользователь их посетит, и предварительно загружается только HTML для этой страницы с учетом пропускной способности и ЦП пользователя и сервера.

• Он использует пассивные прослушиватели событий, чтобы ваши страницы оставались гладкими.
• Он не загружается предварительно, когда пользователь включает защиту данных (начиная с версии 1.2.2).
• Это 1 кБ и загружается после всего остального.Это бесплатно и с открытым исходным кодом (лицензия MIT).

Каков эффект предварительной загрузки веб-страницы Prefetch Instant.page?

После тестирования добавления кода Instant.page улучшение скорости доступа к веб-сайту все еще относительно велико.

• По умолчанию он будет предварительно загружать только ссылки этого сайта и не будет загружать ссылки с других сайтов.
• Когда мышь щелкает ссылку статьи слева более 65 мс, сеть предварительно загружает страницу статьи.
• При зависании менее 65 мс предзагрузка не выполняется (красная часть)▼

Использование Instant.page значительно увеличит PV и объем запросов вашего сайта:

• Друг сказал, что его среднее количество посещений за посещение составляет 13.84.
• После использования количество посещений на душу населения выросло до 17.43, что эквивалентно открытию еще 4 страниц на человека.

Меры предосторожности:

• Следует отметить, что блоггеры, использующие платные CDN и открытые полноценные CDN, должны делать это с осторожностью.
• Но не волнуйтесь, предварительная загрузка загружает только html-страницы, изображения и другие файлы не загружаются, поэтому потерь трафика не будет.

Как использовать технологию предварительной загрузки веб-страницы?

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

Instant.page, представленный в этой статье, представляет собой сценарий, использующий эту технику.

• Этот скрипт будет судить о том, как долго пользователь наводит курсор мыши на ссылку.
• Когда он достигает 65 мс, у пользователя есть половина шансов открыть ссылку, и Instant.page предварительно загружает эту страницу.

Предварительная загрузка кода JS-скрипта веб-страницы

1) Официально предоставлять JS-скрипты с ускорением Cloudflare▼

Использовать Instant.page очень просто, просто добавьте следующий код на свой сайтПрямо перед этикеткой.

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBz虚ni砖用wang络kLHw"></script>

2) Самостоятельная свободаЧен ВэйлянПредложение▼

• Скрипт находится на сервере Instantclick-1.2.2.js, поэтому вам не нужно беспокоиться о замедлении работы. 

Пожалуйста, добавьте следующий код на свой сайтНепосредственно перед этикеткой:

<script src="https://img.chenweiliang.com/javascript/instantpage.js" type="module"></script>