HTML5 Link Prefetching

Prefetching - це техніка, коли ви доручаєте браузеру завантажувати деякі ресурси у фоновому режимі. Браузер використовує час простою для завантаження і кешування зазначених ресурсів. В результаті, коли користувачі відвідують попередньо обрані ресурси, браузер пропонує завантажити їх з кешу. Ви можете використовувати HTML5 link prefetching, щоб прискорити ваш веб-сайт в деяких випадках. Давайте розглянемо як це працює.

Link prefetching підтримується не в кожному браузері. Використовуйте цей інструмент для перевірки.

Тег prefetch

Ви можете вказати ресурси для попереднього завантаження з допомогою <link rel="prefetch"/>:

<link rel="prefetch" href="http://mydomain.com/some-page.html"/>

Тег вказує браузеру  попередньо завантажити http://mydomain.com/some-page.html. Крім повних сторінок, ви також можете завантажувати зображення та інші ресурси. Наступний фрагмент коду завантажує зображення:

<link rel="prefetch" href="http://mydomain.com/some-image.png"/>

В цьому випадку браузер отримає тільки зображення і швидко надасть його користувачу за його запитом.

Mozilla також підтримує фонове завантаження ресурсів через link.

Link: </images/my-image.png>; rel=prefetch

У цьому випадку Mozilla завантажить зазначений ресурс.

Цікаві факти про фонове завантаження

Prefetching можна використовувати для кешування крос-доменних ресурсів.

• Згідно Firefox Docs, тільки http:// URL-адреси може бути попередньо завантажені.

• Якщо ви завантажуєте щось у фоновому режимі, prefetching буде відкладено до завершення фонового завантаження.

• Краще не використовувати цю техніку для агресивного кешування кожного ресурсу на вашому сайті.

Використовуйте prefetch уважно

Фонове завантаження - це прекрасний метод, щоб прискорити ваш веб-сайт, але ви повинні використовувати його обережно. Prefetching може збільшити навантаження на сервер. Ось два класичні випадки корисного використання цієї техніки.

1. Якщо ви відображаєте різні сторінки у слайд-шоу, ви можете використати prefetching, щоб прискорити процес.

2. Ви можете попередньо завантажити зображення та інші ресурси, які використовуються на всіх сторінках вашого сайту.

Я впевнений, що є багато варіантів використання. пропонуйте свої варіанти!