Существует много причин для того, чтобы использовать язык гипертекстовой разметки HTML5. Об этом вы можете узнать из моей стать — ТОП 10 Причин, чтобы начать использовать HTML5 прямо сейчас

Наряду со множеством различных великолепных возможностей, HTML5 имеет функцию предварительной загрузки – данная функция загружает страницу еще до того, как пользователь запросил ее. В данной статье я собираюсь обсудить эту новую технологию, которая поможет ускорить ваши сайты, и показать вам несколько реальных примеров.

Что такое предварительная загрузка и чем она полезна

Согласно whatwg.org, rel=prefetch “указывает на преимущество загрузки и кэширования указанного ресурса, учитывая то, что пользователь скорее всего запросит его”. Поисковики иногда добавляют такой код <link rel=prefetch href=”URL of top search results”> на страницу поисковой выдачи, если они чувствуют, что топовые результаты популярнее, чем другие.

Например, в Firefox зайдите на Google и введите в поиске CNN. Посмотрите исходный код и увидите в нем “prefetch”.

Так как время загрузки сайта является важным фактором, указывающим на его качество, предварительная загрузка может в значительной степени повлиять на пользователя, загрузив страницу еще до того момента как тот ее запросит. Конечно, следует быть аккуратным (не стоит загружать весь сайт целиком), но предварительная загрузка – это возможность, которая сделает сеть лучшим местом.

Предварительная загрузка страниц в HTML 5

Подключить предварительную загрузку очень просто. Единственное, что следует сделать, это добавить вот этот код между тегами <head></head>. Атрибут href должен содержать URL страницы, которую следует загрузить.

Поддержка браузерами

Предварительная загрузка (изначально появилась на Google Chrome) является частью HTML5 и не поддерживается всеми браузерами:

  • Mozilla Firefox: поддерживается
  • Google Chrome: поддерживается с версии 13
  • Safari: временно не поддерживается
  • Internet Explorer: временно не поддерживается

Итак, стоит ли использовать эту возможность сейчас? По моему скромному мнению, ответ – определенно да. Сейчас использовать предварительную загрузку уже можно в Firefox и Chrome. Остальные браузеры, скорее всего в скором времени внедрят эту функцию.

Кроме этого, если вы внедрили эту функцию на ваш сайт, а браузер пользователя ее не поддерживает, то ничего не произойдет. Безопасно использовать эту функцию потому, что либо ее браузеры внедрят в скором времени, либо будут просто игнорировать.

Также следует запомнить, что браузер Google Chrome не использует атрибут Prefetch, а использует атрибут Prerender. А это означает, что вы должны использовать оба атрибута сразу:

 
 

Предварительная загрузка страниц на блоге WordPress

Большинство моих читателей используют WordPress, я подумал о специальном для WordPress примере предварительной загрузки на HTML5. Блог это тоже сайт, где предварительная загрузка была бы очень полезна: Во многих ситуациях очень легко понять, какую страницу пользователь будет читать следующей.

Например, если посетитель уже просматривает вторую страницу вашего архива, то есть большая вероятность того, что он перейдет на третью. Следующий код уже готов к использованию, его следует вставить в файл header.php вашей темы оформления:

< ?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>


< ?php } ?>

Данная версия кода может быть настроена под нужды вашего сайта. Согласно моей аналитике, большинство моих пользователей приходят на страницы статей и затем переходят на главную. Поэтому, в данный код было бы неплохо добавить новое условие предварительной загрузки главной страницы:

< ?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>


< ?php } elseif (is_singular()) { ?>


< ?php } ?>

Предварительная загрузка при помощи jQuery

Теперь мы знаем, что может сделать для вас предварительная загрузка, а что насчет jQuery, который может автоматически загружать каждую ссылку с классом prefetch? Ниже представленный код легко это выполняет. Все что вам нужно сделать – это вставить его в сайт и затем к каждой ссылке присвоить класс prefetch.

// create an object named "app" which we can define methods on
var app = {
    // returns an array of each url to prefetch
    prefetchLinks: function(){
        // returns an array of each a.prefetch link's href
        var hrefs = $("a.prefetch").map(function(index, domElement){
            return $(this).attr("href");
        });
        // returns the array of hrefs without duplicates
        return $.unique(hrefs);
    },

    // adds a link tag to the document head for each of prefetchLinks()
    addPrefetchTags: function(){
        // for each prefetchLinks() ...
        this.prefetchLinks().each(function(index,Element){
            // create a link element...
            $("", {
                // with rel=prefetch and href=Element...
                rel: "prefetch", href: Element
                // and append it to the end of the document head
            }).appendTo("head");
        });
    },
}
// when the document is ready...
jQuery(function(){
  // call the method we defined above.
    app.addPrefetchTags();
}