В HTML5 появилось много новых возможностей и одна из них – это предзагрузка prefetch, которая указывает браузеру, какие страницы, файл стилей или картинку загружать к себе в кэш до того, как их запросит пользователь, чтобы предугадать его действия. Если предугаданные страницы и изображения будут открыты пользователем, то они мгновенно загрузятся из кэша браузера, что для пользователя не будет даже заметно и у пользователя создастся впечатление мгновенной загрузки всех ресурсов.
Поскольку время загрузки страницы является важным фактором работы сайта, указывающем на качество созданного сайта, то в конечном итоге это повлияет и на мнение пользователя о вашем сайте. Если на сайте страницы будут открываться быстро, то это создаст хорошее впечатление о сайте. Но надо проявлять и осторожность, т.к. размещать в кэше браузера все страницы сайта это не правильное решение. Правильно суметь воспользоваться предзагрузкой страниц – это очень мощный инструмент в умелых руках.
Примеры использования
Использовать предзагрузку везде подряд не стоит. Необходимо правильно предугадывать поведение пользователя, чтобы в кэш сохранялось только то, что необходимо и не нагружать в холостую лишний раз сервер без какого-либо результата для посетителя. Есть целый ряд задач при создании сайтов, когда предзагрузку обязательно стоит использовать:
- Сайт открывается красивой сплеш-страницей, и пока посетитель ее рассматривает – загружаем в фоне вашу стартовую страницу;
- Предзагрузка последовательности страниц, по которым пользователь обязательно будет идти без отклонений. Это может быть форма заказа, корзина интернет-магазина разбитая на несколько шагов;
- Предзагрузка страницах с пагинацией. Это страницы поиска на сайтах, списки пользователей, длинные статьи разбитые на несколько страниц. Пока пользователь изучает первую страницу, в фоне подгружаем все, что может понадобиться для следующей.
- Предзагрузка изображений, файлов CSS и JavaScript, которые будут использоваться на следующих страницах, особенно если они значительных размеров. Сейчас целые сайты делают на основе Javascript и файлы со скриптами получаются больших размеров, такие файлы можно пускать на предзагрузку.
Как сделать предзагрузку для сайта
Все, что нужно – это использовать тег <link> с атрибутами rel=’prefetch’ и href. Поместить его внутри тегов <head> и </head> в заголовке страницы.
<!-- подгрузить страницу -->
<link href="http://www.example.com/page1" rel="prefetch" />
<!-- подгрузить картинку -->
<link href="/images/big.jpeg" rel="prefetch" />
<!-- также можно использовать тег meta -->
<meta content="</images/big.jpeg>; rel=prefetch" http-equiv="Link"/>
Поддерживаемые браузеры
- Mozilla Firefox – поддерживает;
- Google Chrome – поддерживает начиная с 13 версии (используется альтернативный синтаксис prerender);
- Internet Explorer IE9+ – поддерживает;
- Safari не поддерживает;
- Opera не поддерживает.
Для того, чтобы узнать поддерживает ли интересуемый вами браузер возможность предзагрузки, пройдите по ссылке http://browserspy.dk/prefetch.php и протестируйте его.
Пользоваться данной возможностью, конечно, нужно, хоть и не все браузеры поддерживают. Браузеры, которые не понимают эту опцию, просто проигнорируют данную возможность, так что ничего плохого не произойдет.
Поскольку Google Chrome использует альтернативный метод, то код придется немного модифицировать, дописав к prefetch через пробел опцию prerender. В итоге получится так:
<link href="http://example.com/page1" rel="prefetch prerender" />Теперь предзагрузка произойдет в Chrome наравне с другими браузерами.
Полезные ресурсы по теме предзагрузки:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ – вопросы-ответы по prefetch
http://browserspy.dk/prefetch.php – тестирование браузера на возможность prefetch
http://en.wikipedia.org/wiki/Link_prefetching
