Статьи

Освоение предварительной выборки HTML5

Январь 1, 2019

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

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

Согласно whatwg.org, rel = prefetch «указывает, что преимущественное извлечение и кэширование указанного ресурса, вероятно, будет полезным, поскольку весьма вероятно, что пользователю потребуется этот ресурс». Поисковые системы иногда добавляют <link rel = prefetch href = «URL верхнего результата поиска»> на страницу результатов поиска, если они считают, что верхний результат намного более популярен, чем любой другой.
Например: используя Firefox, найдите в Google CNN; просмотреть источник; поиск по ключевому слову «prefetch».

Поскольку время загрузки является очень важным фактором качества веб-сайта, предварительная выборка может определенно улучшить пользовательский опыт, загружая страницы до того, как пользователь фактически запросит их. Конечно, вы должны быть осторожны (не выбирайте заранее весь сайт!), Но предварительная выборка, безусловно, является функцией, которая сделает Интернет лучше.

Предварительная выборка страниц с помощью HTML5

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

<link rel="prefetch" href="http://www.example.com/">

Также возможно предварительно выбрать только изображение:

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

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

Поскольку предварительная выборка (или предварительная визуализация в качестве имени этой функции в Google Chrome) является частью HTML5, в настоящее время она поддерживается не во всех браузерах:

  • Mozilla Firefox : поддерживается
  • Google Chrome : поддерживается начиная с версии 13 (используется альтернативный синтаксис)
  • Safari : в настоящее время не поддерживается
  • Internet Explorer : в настоящее время не поддерживается

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

Кроме того, если вы используете предварительную выборку на своем веб-сайте, а браузер посетителя не поддерживает предварительную выборку, ничего не произойдет. Для того, что я видел во время некоторых личных тестов, безопасно использовать предварительную выборку, поскольку браузеры либо реализуют ее, либо полностью игнорируют ее.

Следует также отметить, что Google Chrome не использует атрибут prefetch и вместо этого использует prerender. Это означает, что вы должны реализовать как предварительную выборку, так и предварительную визуализацию, как показано в примере ниже:

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->
<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

Предварительная выборка страниц в вашем блоге WordPress

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

Например, если посетитель в настоящее время просматривает вторую страницу вашего архива, весьма вероятно, что он прочитает третью страницу далее. Следующий фрагмент кода (Courtesy of Bernd ) готов к использованию: просто вставьте его в файл 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 для автоматической предварительной выборки каждой ссылки с помощью класса предварительной выборки? Это именно то, что делает фрагмент ниже. Просто вставьте его на свой веб-сайт, а затем добавьте класс предварительной выборки для каждой ссылки, которую вы хотите предварительно выбрать.

// 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...
            $("<link />", {
                // 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();
}

Thanks to Gavin Morrice for this great snippet!

36
Share: