От автора: в этой статье мы обсудим предзагрузку, что это, и как с ее помощью разработчики могут удивить посетителей высокой производительностью.
Что такое предзагрузка?
Оптимизировать сайт для первичной загрузки страниц это хорошо, но на высоко интерактивных сайтах пользователям этого уже мало.
А что если бы браузер знал, по какой ссылке кликнет пользователь, или на какую страницу он собирается перейти дальше, а контент бы автоматически появлялся на экране со скоростью света?
Браузеры уже сейчас так умеют. Некоторые основные браузеры достаточно умны, чтобы делать предсказания подобного рода по шаблонам просмотра пользователя, разметке документа и его структуре, устройству, связи и т.д. Поэтому браузеры уже сейчас стараются предугадать, какие ресурсы им понадобятся для создания страницы, на которую собирается перейти пользователь, чтобы загрузить их и отобразить страниц на максимальной скорости, когда пользователь зайдет на нее. Разработчики с помощью своих знаний сайта или приложения могут помочь браузерам точнее выделить эти необходимые ресурсы.
Это и есть предзагрузка, подсказка браузеру для предсказания желаний пользователя, чтобы потом с легкостью осуществить их.
Предзагрузка описана в спецификации Resource Hints, за авторством Ilya Grigorik. Ниже мы поговорим о:
DNS-предзагрузке;
предзагрузке ссылок/ресурсов;
пререндеринге (предзагрузке страницы).
DNS-предзагрузка
Интернет – сеть компьютерных IP-адресов (например, 87.87.87.87), связанных с человеческими хостами (например, yoursite.com). DNS – протокол, конвертирующий хосты в IP-адреса.
Каждый раз, когда браузер посылает HTTP-запрос ресурса на другой домен, несколько миллисекунд может тратиться на сопоставление домена с соответствующим IP-адресом.
Если на сайте есть виджеты Twitter или Facebook*, Google Analytics и парочка пользовательских веб-шрифтов, значит, есть ссылки на другие домены. Это делает поиск DNS неизбежным.
DNS-предзагрузка помогает снизить время ожидания пользователей, так как браузер выполняет поиск DNS перед посылкой запроса на ресурсы, расположенные на других доменах.
Скажем, разработчики знают, что сайт пошлет запрос на somewidget.example.com. Они могут дать браузеру подсказку, чтобы тот выполнил предзагрузку DNS хоста, добавив атрибут rel в ссылку со значением dns-prefetch. Вот так:
|
1 |
<link rel="dns-prefetch" href="//somewidget.example.com"> |
Теперь когда будет послан запрос на somewidget.example.com, браузер предварительно сделает поиск DNS, и пользователи получает результат немножко быстрее.
В настоящее время DNS-предзагрузка поддерживается во всех основных десктопных браузерах. Если поддержки нет, браузеры просто вытягивают ресурсы по старой схеме.
А что если браузер никогда не запросит предварительно загруженный по DNS ресурс? К счастью, DNS-предзагрузка – не затратная операция, так как посылается не более пары сотни байт. Она не замедлит ваш сайт.
Предзагрузка ссылок
Из спецификации о предзагрузке ссылок: «… используется для определения ресурса, который может понадобиться для следующего перехода, и который юзер агент ДОЛЖЕН загрузить, чтобы предоставить быстрый ответ, когда ресурс будет запрошен.»
Другими словами, если разработчики считают, что пользователи далее перейдут на определенную страницу, а браузеру для нее нужны какие-то критические ресурсы, то они могут использовать директиву prefetch. Она указывает браузеру на ресурсы, которые необходимо предзагрузить еще до перехода пользователей на страницу.
Помните, что предзагрузка работает только с кэшируемыми ресурсами, т.е. JS, изображениями и т.д. Код может быть таким:
|
1 |
<link rel="prefetch" href="//example.com/future-image.jpg"> |
Теперь браузер знает, что изображение future-image.jpg скоро понадобится, и он может предзагрузить его и хранить в кэше. Так как браузер выполнит всю затратную по времени работу по загрузке ресурсов в фоновом режиме, пользователи получат преимущество в виде супер быстрого рендеринга страницы с изображением future-image.jpg сразу после клика.
Предзагрузка ссылок создает у пользователей ощущение того, что сайт быстро загружается, но эта операция более затратна по сравнению с DNS-предзагрузкой. Если пользователь так и не зайдет на страницу, для которой необходимо предзагрузить файлы, то браузер скачает необязательные данные и забьет кэш.
На момент написания статьи предзагрузка ссылок поддерживается в последних версиях Chrome, Firefox, IE/Edge и Opera. Браузеры без поддержки просто проигнорируют подсказку.
Предзагрузка страниц/пререндеринг
Для предзагрузки страниц или пререндеринга необходимо просто добавить директиву prerender внутрь атрибута rel в ссылке:
|
1 |
<link rel="prerender" href="//example.com/future-page.html"> |
Происходит полный пререндиринг, буквально создается невидимая версия целой страницы, на которую собираются перейти пользователи, в том числе применяется CSS и JS. После клика страница-призрак мгновенно материализуется, заменяя старый контент.
Предзагрузка ссылок – затратная операция, но пререндеринг еще сильнее нагружает браузер. Браузер загружает всю страницу и все ее ресурсы, ожидая, что пользователи перейдут на нее, что может произойти, а может и нет.
На момент написания статьи пререндеринг поддерживается в IE/Edge, Chrome и Opera.
Кейсы использования для предзагрузки ссылок и пререндеринга
Предзагрузка ссылок и пререндеринг дорого обходятся браузеру, поэтому важно иметь четкие условия, когда их применять.
Разработчики, планирующие давать подсказки по ресурсам, должны иметь веские основания, почему эти ресурсы необходимо предзагрузить или сделать пререндер, основываясь на контенте сайта, поведении пользователя, аналитике и т.д.
Спецификация Resource Hints выделяет ряд кейсов использования предзагрузки ссылок:
Поисковые результаты – разумно предположить, что пользователям нужны эти результаты, поэтому они будут кликать по ссылкам, чтобы получить желаемый контент.
Постраничный контент – если пользователь читает первую страницу многостраничной статьи, то можно с уверенностью предположить, что он кликнет по ссылке, ведущей на следующую страницу.
Галерея изображений – разработчики Google используют предзагрузку на Picasa Web Albums. Если пользователи просматривают фото, разработчики вполне могут предположить, что они откроют и следующее фото, и они дают браузеру инструкцию скачать его как можно быстрее.
Также Santiago Valdarrama предлагает несколько полезных советов по тому, когда разработчики могут оправданно делать пререндеринг на сайте: «Когда будете думать, нужно ли делать пререндеринг полных страниц, учтите, что Google делает пререндер ТОП-результатов из поисковой выдачи, а Chrome делает пререндер на основе исторических шаблонов навигации пользователей. По этим же принципам вы можете определять общие шаблоны использования и делать пререндер целевых страниц. Также можно сделать, как с предзагрузкой ресурсов, в опросах, где вы знаете, что пользователи выполнят действия в определенном порядке.»
Заключение
DNS-предзагрузка, предзагрузка ссылок и пререндеринг – мощные техники оптимизации. Если подойти к ним ответственно, используя знания разработчиков о контенте и поведении пользователей, то предзагрузка может значительно улучшить UX. А вы бы посоветовали сделать предзагрузку для ускорения сайта? Пишите в комментариях!
Редакция: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
