Среди многих замечательных особенностей HTML5 существует также функция предварительной загрузки, которая является настоящим искусством загрузки веб-страниц, и позволяет подгрузить все материалы, прежде чем пользователь их запросил. В нашей предыдущей статье мы уже писали о том, как можно ускорить загрузку веб-сайта. В этой статье пойдет речь о технике предзагрузки страниц (prefetching), а также мы покажем нашим читателям готовые к использованию примеры резкого улучшения время загрузки их веб-сайтов.
Что такое предварительная загрузка и чем она полезна?
Согласно whatwg.org, rel=”prefetch”гласит – “предзагрузка и кэширования указанного ресурса, вероятней всего, будет полезна, так как весьма возможно, что пользователь запросит этот ресурс.” Поисковые системы иногда добавляют <link rel=prefetch href=”URL высшего запрашиваемого ресурса”>к результатам страницы поиска, если они считают, что верхние результаты более популярны, чем любые другие.
Время загрузки страницы является очень важным фактором качества веб-сайта. Предварительная загрузка может определенно улучшить пользовательский опыт загрузки веб-страниц, прежде чем они фактически запросили их.
Предзагрузка при помощи HTML5
Осуществить предварительную загрузку страниц супер легко. Единственное, что вам нужно сделать, это поместить следующий код между <head> и </head> тегами вашей веб-страницы. href атрибут должен содержать адрес страницы для предварительной загрузки.
<link rel="prefetch" href="//www.example.com/">
Также возможно предзагрузить только одну картинку:
<link rel="prefetch" href="//www.webdesignmagazine.ru/wp-content/uploads/2013/07/apocalyptic_pug_by_loopydave-d4u6zb4-642x336.jpg">
Поддержка браузеров
Предзагрузка (prefetching) и prerendering (как называет эту функцию Google Chrome), являются частью HTML5 и в настоящее время поддерживается не всеми браузерах:
- Mozilla Firefox: да
- Google Chrome: начиная с версии 13
- Safari: нет
- Internet Explorer: нет
Использование предварительной загрузки возможно в Firefox и Chrome, а другие браузеры, надеемся, скоро подтянутся. Если вы используете предварительную загрузку на вашем сайте и посетитель зашел с не поддерживаемого браузера, то ничего не случится. Можно с уверенностью использовать prefetch, так как браузеры либо реализуют его, либо полностью проигнорируют. Следует отметить, что Google Chrome не используйте prefetch атрибут, а prerender(пререндер) вместо него:
<link rel="prefetch" href="//www.example.com/"> <!-- Firefox --> <link rel="prerender" href="//www.example.com/"> <!-- Chrome -->
Предзагрузка страниц на WordPress блоге
Блог, как правило, такой сайт, где предварительная загрузка может стать очень полезной. Во многих ситуациях, можно “угадать” какую страницу посетитель захочет прочитать следующей.
Например, если посетитель в настоящее время, смотрит на вторую страницу из вашего архивов, вполне возможно, что он перейдет и на третью страницу. Следующий фрагмент кода полностью готов к использованию, просто вставьте его в файл header.php вашей темы для предзагрузки следующей страницы архива.
<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } ?>
Конечно, код приведенный выше, может быть улучшен в соответсвие с нуждами вашего веб-сайта. Как правило, люди прочитав интересную им статью, всегда возвращаются обратно на главную страницу. Таким образом, нам стоит добавить новое условие, чтобы указанный выше код предзагружал главную страницу, когда посетитель читает статью.
<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } elseif (is_singular()) { ?>
<link rel="prefetch" href="<?php bloginfo('home'); ?>">
<link rel="prerender" href="<?php bloginfo('home'); ?>">
<?php } ?>
Предварительная загрузка с помощью jQuery
Теперь, когда мы знаем способности предзагрузки, как на счет использования jQuery для автоматической предзагрузки каждой ссылки с prefetch классом? Это как раз то, что сниппет указанный ниже будет делать. Просто вставьте его на ваш веб-сайт, а затем добавьте prefetch класс к каждой ссылке, которую вы хотите загрузить.
// создайте объект под названием "app" который мы можем определить методами на
var app = {
// возвращает матрицу каждого URL для предзагрузки
prefetchLinks: function(){
// возвращает матрицу каждого a.prefetch link's href
var hrefs = $("a.prefetch").map(function(index, domElement){
return $(this).attr("href");
});
// возвращает матрицу hrefs без дупликатов
return $.unique(hrefs);
},
// добавьте тэг ссылки к хедеру (head) документа для каждого prefetchLinks()
addPrefetchTags: function(){
// для каждого prefetchLinks() ...
this.prefetchLinks().each(function(index,Element){
// создайте ссылочный элемент (link element)...
$("<link />", {
// с rel=prefetch и href=Element...
rel: "prefetch", href: Element
// и добавьте его в конец хедера документа
}).appendTo("head");
});
},
}
// когда документ готов...
jQuery(function(){
// вызовите (call) метод определенный выше.
app.addPrefetchTags();
}
Надеемся, эти сниппеты помогут вам оптимизировать любой из ваших сайтов!
