Яка користь від попереднього завантаження веб-сторінки? Технологія попереднього завантаження веб-сторінки instant.page

Швидкість завантаження веб-сторінки вплине на вашуЕлектронна комерціясайт в пошуковій системіSEOРейтинг.

Що таке попереднє завантаження веб-сторінки?

Існує техніка під назвою prefetch, яка насправді є технікою попереднього завантаження.

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

Попередньо завантажити веб-сторінкуЯка користь від попереднього завантаження?

instant.page використовує миттєве попереднє завантаження - воно попередньо завантажує сторінку до того, як користувач натисне ▼

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

Попередня вибірка пришвидшує завантаження веб-сторінок

• Людському мозку потрібно менше 100 мілісекунд, щоб миттєво сприйняти дію.
• Таким чином, технологія попереднього завантаження instant.page може зробити ваш веб-сайт миттєвим навіть у 3G (припускаючи, що ваша сторінка швидко відтворюється).

Як вирішити проблему повільного завантаження веб-сторінок?

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

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

Який ефект попереднього завантаження веб-сторінки instant.page?

Після тестування додавання коду instant.page покращення швидкості доступу до веб-сайту все ще є відносно значним.

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

Використання instant.page значно збільшить PV вашого сайту та кількість запитів:

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

Примітка:

• Слід зазначити, що блогери, які використовують платні CDN і відкриті повносайтові CDN, повинні робити це з обережністю.
• Але не хвилюйтеся, попереднє завантаження завантажує лише HTML-сторінки, а зображення та інші файли не завантажує, тому трафік не буде значним.

Як використовувати технологію попереднього завантаження веб-сторінки?

Насправді в тегу посилання html5 є атрибут rel, один з яких є попередньою вибіркою, але кількість споживачів невелика.

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>