НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

Станьте мастером предзагрузки HTML5

1

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

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

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

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

Предзагрузка при помощи HTML5

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

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

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

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

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

Использование предварительной загрузки возможно в Firefox и Chrome, а другие браузеры, надеемся, скоро подтянутся. Если вы используете предварительную загрузку на вашем сайте и посетитель зашел с не поддерживаемого браузера, то ничего не случится. Можно с уверенностью использовать prefetch, так как браузеры либо реализуют его, либо полностью проигнорируют. Следует отметить, что Google Chrome не используйте prefetch атрибут, а prerender(пререндер) вместо него:

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

Блог, как правило, такой сайт, где предварительная загрузка может стать очень полезной. Во многих ситуациях, можно “угадать” какую страницу посетитель захочет прочитать следующей.

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

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

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

Теперь, когда мы знаем способности предзагрузки, как на счет использования jQuery для автоматической предзагрузки каждой ссылки с prefetch классом? Это как раз то, что сниппет указанный ниже будет делать. Просто вставьте его на ваш веб-сайт, а затем добавьте prefetch класс к каждой ссылке, которую  вы хотите загрузить.

Надеемся, эти сниппеты помогут вам оптимизировать любой из ваших сайтов!

Источник главной фотографии – Fotolia.ru

Поделиться:

Об Авторе

Главный редактор портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта, занимаюсь продвижением журнала в социальных сетях и PR-каналах, а также несу ответственность за маркетинговые стратегии нашего проекта.

  • Владислав Бойченко

    Вот это я и искал! Спасибо огромное! с: