Prefetching \- це техніка, коли ви доручаєте браузеру завантажувати деякі ресурси у фоновому режимі. Браузер використовує час простою для завантаження і кешування зазначених ресурсів. В результаті, коли користувачі відвідують попередньо обрані ресурси, браузер пропонує завантажити їх з кешу. Ви можете використовувати HTML5 link prefetching, щоб прискорити ваш веб-сайт в деяких випадках. Давайте розглянемо як це працює.
Link prefetching підтримується не в кожному браузері. Використовуйте цей інструмент для перевірки.
Тег prefetch
Ви можете вказати ресурси для попереднього завантаження з допомогою <link rel="prefetch">
:
<link href="http://mydomain.com/some-page.html" rel="prefetch">
Тег вказує браузеру попередньо завантажити http://mydomain.com/some-page.html. Крім повних сторінок, ви також можете завантажувати зображення та інші ресурси. Наступний фрагмент коду завантажує зображення:
<link href="http://mydomain.com/some-image.png" rel="prefetch">
В цьому випадку браузер отримає тільки зображення і швидко надасть його користувачу за його запитом.
Mozilla також підтримує фонове завантаження ресурсів через link
.
Link: ; rel=prefetch
У цьому випадку Mozilla завантажить зазначений ресурс.
Цікаві факти про фонове завантаження
Prefetching можна використовувати для кешування крос-доменних ресурсів.
-
Згідно Firefox Docs, тільки http:// URL-адреси може бути попередньо завантажені.
-
Якщо ви завантажуєте щось у фоновому режимі, prefetching буде відкладено до завершення фонового завантаження.
-
Краще не використовувати цю техніку для агресивного кешування кожного ресурсу на вашому сайті.
Використовуйте prefetch уважно
Фонове завантаження - це прекрасний метод, щоб прискорити ваш веб-сайт, але ви повинні використовувати його обережно. Prefetching може збільшити навантаження на сервер. Ось два класичні випадки корисного використання цієї техніки.
-
Якщо ви відображаєте різні сторінки у слайд-шоу, ви можете використати prefetching, щоб прискорити процес.
-
Ви можете попередньо завантажити зображення та інші ресурси, які використовуються на всіх сторінках вашого сайту.
Я впевнений, що є багато варіантів використання. пропонуйте свої варіанти!
Ще немає коментарів