Предзагрузка страниц что это
Предзагрузка веб-страниц в HTML5
В HTML5 появилось много новых возможностей и одна из них – это предзагрузка prefetch, которая указывает браузеру, какие страницы, файл стилей или картинку загружать к себе в кэш до того, как их запросит пользователь, чтобы предугадать его действия. Если предугаданные страницы и изображения будут открыты пользователем, то они мгновенно загрузятся из кэша браузера, что для пользователя не будет даже заметно и у пользователя создастся впечатление мгновенной загрузки всех ресурсов.
Поскольку время загрузки страницы является важным фактором работы сайта, указывающем на качество созданного сайта, то в конечном итоге это повлияет и на мнение пользователя о вашем сайте. Если на сайте страницы будут открываться быстро, то это создаст хорошее впечатление о сайте. Но надо проявлять и осторожность, т.к. размещать в кэше браузера все страницы сайта это не правильное решение. Правильно суметь воспользоваться предзагрузкой страниц – это очень мощный инструмент в умелых руках.
Примеры использования
Использовать предзагрузку везде подряд не стоит. Необходимо правильно предугадывать поведение пользователя, чтобы в кэш сохранялось только то, что необходимо и не нагружать в холостую лишний раз сервер без какого-либо результата для посетителя. Есть целый ряд задач при создании сайтов, когда предзагрузку обязательно стоит использовать:
Как сделать предзагрузку для сайта
Поддерживаемые браузеры
Для того, чтобы узнать поддерживает ли интересуемый вами браузер возможность предзагрузки, пройдите по ссылке http://browserspy.dk/prefetch.php и протестируйте его.
Пользоваться данной возможностью, конечно, нужно, хоть и не все браузеры поддерживают. Браузеры, которые не понимают эту опцию, просто проигнорируют данную возможность, так что ничего плохого не произойдет.
Поскольку Google Chrome использует альтернативный метод, то код придется немного модифицировать, дописав к prefetch через пробел опцию prerender. В итоге получится так:
Теперь предзагрузка произойдет в Chrome наравне с другими браузерами.
Как сделать прелоадер для сайта?
В этой статье разберём процесс создания прелоадера для сайта как на чистом CSS, так и с использованием изображений.
Назначение прелоадера
Как создать прелоадер страницы
На самом деле создать прелоадер очень просто.
Для этого нужно сразу после открывающего тега body добавить код (HTML структуру прелоадера). С помощью CSS его необходимо настроить так, чтобы он занимал всю область viewport и находился над содержимым страницы. В качестве прелодера обычно используют анимированную картинку (svg, gif), или CSS-анимацию.
В процессе загрузки страницы её контент находится под прелодером. Пользователь видит только анимированную картинку.
Прелоадер на чистом CSS
Этапы создания прелодера на чистом CSS:
1. Добавить после открывающего тега body следующий HTML-код:
2. Создать следующие стили:
3. Вставить сценарий, который будет добавлять к элементу body класс loaded после полной загрузки страницы:
Этот скрипт очень резко скрывает прелоадер. Чтобы этот процесс улучшить, а именно выполнить это с анимацией можно использовать вместо вышеприведённого сценария этот:
Прелоадер в виде анимированной svg иконки
Процесс создания прелоадера в виде анимированной svg иконки не будет сильно отличаться от примера с использованием CSS-анимации.
1. Создадим HTML-разметку прелоадера и разместим её сразу же после открывающего тега body :
В качестве svg можно использовать любое другое изображение.
3. Поместим на страницу следующий сценарий:
Этот сценарий на чистом JavaScript. Но его можно написать с использованием библиотеки jQuery.
В этом случае он будет выглядеть следующим образом:
Пример прелоадера с градиентным фоном:
Прелоадер с использованием анимированной gif картинки
В качестве изображения можно использовать не только svg, но и gif картинку.
CSS для прелоадера:
Небольшая коллекция анимированных gif-изображений имеется в этом архиве.
Вариант прелоадера с использованием jQuery функции fadeOut
Пример скрипта нв jQuery для скрытия прелоадере с использованием функции fadeOut:
Для чего стоит использовать предварительную загрузку?
Предварительная загрузка (или предзагрузка) это новый стандарт, предназначенный для улучшения производительности и предоставления разработчиком более точного контроля над загрузкой ресурсов. Она дает разработчикам возможность создавать пользовательскую последовательность и логику загрузки, позволяющую избежать проблем с производительностью, вызываемых скриптовыми загрузчиками.
Статьи по этой теме на SmashingMagazine:
Несколько недель назад я добавил поддержку предзагрузки в Chrome Canary и если не возникнет каких-либо непредвиденных багов, она будет в стабильной версии Chrome в середине апреля. Но что такое предзагрузка? Что она делает и чем она может быть полезна?
Если объяснять по-человечески, то это способ сообщить браузеру, чтобы он начал скачивать определенный ресурс, так как мы, авторы страницы (администраторы сервера или разработчики) знаем, что очень скоро этот ресурс потребуется браузеру.
Разве у нас нет такой возможности?
Да, это так, но между ними есть значительные различия. Эти различия как раз и требуют появления новой директивы, решающей задачи, непосильные старым.
Как можно добиться лучшей предзагрузки?
Предзагрузка также отличается тем, что в ней есть функциональное событие onload (как минимум в Chrome это событие не работает для двух остальных значений rel ).
Сочетание всех этих характеристик реализует целый спектр возможностей, ранее нам недоступных.
Рассмотрим их по отдельности.
Загрузка “поздно-обнаруживаемых” ресурсов
Основным способом использования предзагрузки будет ранняя загрузка “поздно-обнаруживаемых” ресурсов. Хотя большинство ресурсов в разметке предзагрузчик браузера обнаруживает достаточно быстро, не все ресурсы указаны в разметке страницы. Некоторые ресурсы спрятаны в CSS и JavaScript и браузер не может узнать о них до того, как они понадобятся. Поэтому во многих случаях эти ресурсы приводят к задержке рендеринга, вывода текста или загрузки критических частей страницы.
Теперь у вас есть средства сказать браузеру: “Эй, браузер! Вот этот ресурс тебе обязательно понадобится, поэтому загружай его сейчас”.
В коде эта фраза выглядит следующим образом:
Атрибут as указывает тип скачиваемого ресурса, у него могут быть следующие значения:
Полный список значений есть в спецификации.
Пропуск атрибута as или задание некорректного значения эквивалентно XHR-запросу, в котором браузер не знает, что он выбирает, вследствие чего выборка происходит с низким приоритетом.
Ранняя загрузка шрифтов
Одной из популярных разновидностей “поздно обнаруживаемых критических ресурсов” являются веб-шрифты. С одной стороны, в большинстве случаев они критичны для рендеринга текста на странице (пока у нас не будут реализованы свойства font-display). С другой, шрифты находятся глубоко в недрах CSS и даже если браузерный предзагрузчик распарсил CSS, он не может быть уверен в том, что они понадобятся, пока не разберется с привязкой вызывающих их селекторов к конкретным узлам DOM. Хотя в теории браузеры должны с этим разбираться, ни один из них не делает этого, потому как это приводило бы к ложным загрузкам в случаях, когда стилевые декларации переписываются в последующих строках CSS.
В общем, все сложно.
Но мы могли бы обойти всю эту сложность включив директиву предзагрузки шрифтов, которые точно вам понадобятся. Например:
Один момент следует уточнить: вы должны добавить атрибут crossorigin при выборке шрифтов, так как она производится в анонимном режиме CORS. Да, даже в том случае, если шрифты находятся на том же хосте, что и страница. Увы.
Атрибут type обеспечивает предзагрузку этого ресурса только в тех браузерах, которые поддерживают этот тип шрифта. На данный момент предварительная загрузка поддерживается только в Chrome и он прекрасно поддерживает WOFF2, но в будущем предзагрузка может появиться и в других браузерах и мы не можем гарантировать, что в них будет поддержка WOFF2. То же самое относится и к остальным типам ресурсов, которые вы предварительно загружаете и у которых нет стопроцентной поддержки в браузерах.
Динамическая загрузка без запуска
Следующий интересный сценарий, который становится доступным, это скачивание нужного вам ресурса, который вы не собираетесь сразу запускать. Например, в случае, если вы хотите выполнить скрипт в определенный период существования страницы, не имея контроля над скриптом (то есть без возможности добавить функцию runNow() ).
Сейчас мы очень ограничены в выборе способов для этого. Если вы только вставите скрипт в нужную точку для выполнения, браузер должен будет сначала скачать скрипт до запуска, это может занять время. Вы могли бы скачать скрипт заранее используя XHR, но браузер откажется делать это, так как ресурс не был скачан с тем же типом, который пытается его использовать.
Так что вы можете сделать?
Вы можете запустить это в самом начале загрузки страницы, до той точки, когда вы хотите выполнить скрипт (но как только вы будете уверены, что этот код не будет мешать загрузке других, более критичных ресурсов). Теперь, когда вам надо его запустить, просто вставьте тег script и этого хватит.
Асинхронный загрузчик в разметке
Другой крутой хак это использование обработчика onload для создания некоего подобия асинхронного загрузчика прямо в разметке. Скотт Джел первым экспериментировал с этим, как с частью своей библиотеки loadCSS. Мы можем использовать следующий краткий код:
И этого достаточно, чтобы получить асинхронную загрузку стилей. Скотт также сделал страницу, демонстрирующую эту возможность.
Это также работает и с асинхронными скриптами.
Preload, prefetch и другие теги
Есть много способов повышения веб-производительности. Один из них — предзагрузка контента, который понадобится позже. Префетчинг CSS, предварительный рендеринг полной страницы или резолвинг доменного имени. Делаем всё заранее, а потом мгновенно отображаем результат! Звучит круто.
Вкратце расскажем, что они делают и когда их использовать.
preload
Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Синтаксис
href указывает на ресурс, который вы хотите скачать.
as может быть чем угодно, что можно скачать в браузере:
Когда использовать
Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время. Например:
Не злоупотребляйте предзагрузкой. Если загружать всё подряд, сайт не ускорится волшебным образом, скорее наоборот, это помешает браузеру грамотно планировать работу.
Подробности
prefetch
Здесь тоже браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Синтаксис
href указывает на ресурс, который вы хотите скачать.
as может быть чем угодно, что можно скачать в браузере:
Когда использовать
Для загрузки ресурсов с других страниц, если нужен ресурс с другой страницы, и вы хотите предварительно загрузить его, чтобы потом ускорить рендеринг этой страницы. Например:
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции, он может проигнорировать её, например, на медленном соединении.
preconnect
Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts, React из CDN или запрашивает ответ JSON с сервера API.
Установка нового соединения обычно занимает несколько сотен миллисекунд. Она производится один раз, но всё равно отнимает время. Если вы заранее установили соединение, то сэкономите время и быстрее загрузите ресурсы с этого домена.
Синтаксис
href указывает на доменное имя, для которого нужно определить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).
Когда использовать
Используйте для доменов, которые скоро понадобятся для загрузки оттуда важного стиля, скрипта или изображения, но вы пока не знаете URL ресурса. Например:
Не злоупотребляйте. Установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Используйте этот тег максимум для 4-6 доменов.
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, если уже установлено много соединений или в каком-то другом случае.
Что включает в себя процесс подключения. Для подключения к каждому сайту браузер должен выполнить следующие действия:
dns-prefetch
Браузер должен определить IP-адрес домена, если будет извлекать какие-то ресурсы с нового стороннего домена. Например, загружать шрифты Google Fonts, React из CDN или запрашивать ответ JSON с сервера API.
Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена, но всё равно представляет задержку. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.
Синтаксис
href указывает на доменное имя, для которого нужно установить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).
Когда использовать
Используйте для доменов, которые скоро понадобятся для загрузки оттуда ресурсов, о которых браузер не знает заранее. Например:
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции, поэтому может не выполнять резолвинг DNS, например, если на странице много таких тегов или в каком-то другом случае.
Чтобы определить IP-адрес, браузер должен выполнить запрос к DNS-серверу. Он занимает 20−120 мс при подключении к новому стороннему домену.
DNS кэшируется, хотя и не очень надёжно. Некоторые ОС и браузеры кэшируют DNS-запросы: это сэкономит время при повторных запросах, но на кэширование нельзя полагаться. В Linux оно обычно вообще не работает. У Chrome есть кэш DNS, но он живёт только минуту. Windows кэширует DNS-ответы в течение пяти дней.
prerender
Синтаксис
href указывает на URL, для который вы хотите запустить рендеринг в фоновом режиме.
Когда использовать
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, на медленном соединении или при недостаточном объёме свободной памяти.
Ради экономии памяти Chrome не выполняет полный рендеринг, а только предзагрузку NoState. Это означает, что Chrome загружает страницу и все её ресурсы, но не делает рендеринг и не выполняет JavaScript.
Firefox и Safari вообще не поддерживают этот тег. Это не нарушает спецификацию, так как браузеры не обязаны выполнять данную инструкцию; но всё равно печально. Баг реализации в Firefox был открыт в течение семи лет. Есть сообщения, что Safari тоже не поддерживает этот тег.
Резюме
Молниеносно быстрые сайты с помощью предзагрузки
Дата публикации: 2017-05-26
От автора: в этой статье мы обсудим предзагрузку, что это, и как с ее помощью разработчики могут удивить посетителей высокой производительностью.
Что такое предзагрузка?
Оптимизировать сайт для первичной загрузки страниц это хорошо, но на высоко интерактивных сайтах пользователям этого уже мало.
А что если бы браузер знал, по какой ссылке кликнет пользователь, или на какую страницу он собирается перейти дальше, а контент бы автоматически появлялся на экране со скоростью света?
Браузеры уже сейчас так умеют. Некоторые основные браузеры достаточно умны, чтобы делать предсказания подобного рода по шаблонам просмотра пользователя, разметке документа и его структуре, устройству, связи и т.д. Поэтому браузеры уже сейчас стараются предугадать, какие ресурсы им понадобятся для создания страницы, на которую собирается перейти пользователь, чтобы загрузить их и отобразить страниц на максимальной скорости, когда пользователь зайдет на нее. Разработчики с помощью своих знаний сайта или приложения могут помочь браузерам точнее выделить эти необходимые ресурсы.
Это и есть предзагрузка, подсказка браузеру для предсказания желаний пользователя, чтобы потом с легкостью осуществить их.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Предзагрузка описана в спецификации Resource Hints, за авторством Ilya Grigorik. Ниже мы поговорим о:
пререндеринге (предзагрузке страницы).
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. Вот так:
Теперь когда будет послан запрос на somewidget.example.com, браузер предварительно сделает поиск DNS, и пользователи получает результат немножко быстрее.
В настоящее время DNS-предзагрузка поддерживается во всех основных десктопных браузерах. Если поддержки нет, браузеры просто вытягивают ресурсы по старой схеме.
А что если браузер никогда не запросит предварительно загруженный по DNS ресурс? К счастью, DNS-предзагрузка – не затратная операция, так как посылается не более пары сотни байт. Она не замедлит ваш сайт.
Предзагрузка ссылок
Из спецификации о предзагрузке ссылок: «… используется для определения ресурса, который может понадобиться для следующего перехода, и который юзер агент ДОЛЖЕН загрузить, чтобы предоставить быстрый ответ, когда ресурс будет запрошен.»
Другими словами, если разработчики считают, что пользователи далее перейдут на определенную страницу, а браузеру для нее нужны какие-то критические ресурсы, то они могут использовать директиву prefetch. Она указывает браузеру на ресурсы, которые необходимо предзагрузить еще до перехода пользователей на страницу.
Помните, что предзагрузка работает только с кэшируемыми ресурсами, т.е. JS, изображениями и т.д. Код может быть таким:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Теперь браузер знает, что изображение future-image.jpg скоро понадобится, и он может предзагрузить его и хранить в кэше. Так как браузер выполнит всю затратную по времени работу по загрузке ресурсов в фоновом режиме, пользователи получат преимущество в виде супер быстрого рендеринга страницы с изображением future-image.jpg сразу после клика.
Предзагрузка ссылок создает у пользователей ощущение того, что сайт быстро загружается, но эта операция более затратна по сравнению с DNS-предзагрузкой. Если пользователь так и не зайдет на страницу, для которой необходимо предзагрузить файлы, то браузер скачает необязательные данные и забьет кэш.
На момент написания статьи предзагрузка ссылок поддерживается в последних версиях Chrome, Firefox, IE/Edge и Opera. Браузеры без поддержки просто проигнорируют подсказку.
Предзагрузка страниц/пререндеринг
Для предзагрузки страниц или пререндеринга необходимо просто добавить директиву prerender внутрь атрибута rel в ссылке:
Происходит полный пререндиринг, буквально создается невидимая версия целой страницы, на которую собираются перейти пользователи, в том числе применяется CSS и JS. После клика страница-призрак мгновенно материализуется, заменяя старый контент.
Предзагрузка ссылок – затратная операция, но пререндеринг еще сильнее нагружает браузер. Браузер загружает всю страницу и все ее ресурсы, ожидая, что пользователи перейдут на нее, что может произойти, а может и нет.
На момент написания статьи пререндеринг поддерживается в IE/Edge, Chrome и Opera.
Кейсы использования для предзагрузки ссылок и пререндеринга
Предзагрузка ссылок и пререндеринг дорого обходятся браузеру, поэтому важно иметь четкие условия, когда их применять.
Разработчики, планирующие давать подсказки по ресурсам, должны иметь веские основания, почему эти ресурсы необходимо предзагрузить или сделать пререндер, основываясь на контенте сайта, поведении пользователя, аналитике и т.д.
Спецификация Resource Hints выделяет ряд кейсов использования предзагрузки ссылок:
Поисковые результаты – разумно предположить, что пользователям нужны эти результаты, поэтому они будут кликать по ссылкам, чтобы получить желаемый контент.
Постраничный контент – если пользователь читает первую страницу многостраничной статьи, то можно с уверенностью предположить, что он кликнет по ссылке, ведущей на следующую страницу.
Галерея изображений – разработчики Google используют предзагрузку на Picasa Web Albums. Если пользователи просматривают фото, разработчики вполне могут предположить, что они откроют и следующее фото, и они дают браузеру инструкцию скачать его как можно быстрее.
Также Santiago Valdarrama предлагает несколько полезных советов по тому, когда разработчики могут оправданно делать пререндеринг на сайте: «Когда будете думать, нужно ли делать пререндеринг полных страниц, учтите, что Google делает пререндер ТОП-результатов из поисковой выдачи, а Chrome делает пререндер на основе исторических шаблонов навигации пользователей. По этим же принципам вы можете определять общие шаблоны использования и делать пререндер целевых страниц. Также можно сделать, как с предзагрузкой ресурсов, в опросах, где вы знаете, что пользователи выполнят действия в определенном порядке.»
Заключение
DNS-предзагрузка, предзагрузка ссылок и пререндеринг – мощные техники оптимизации. Если подойти к ним ответственно, используя знания разработчиков о контенте и поведении пользователей, то предзагрузка может значительно улучшить UX. А вы бы посоветовали сделать предзагрузку для ускорения сайта? Пишите в комментариях!
Редакция: Maria Antonietta Perna
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Верстка-Мастер. Полное руководство
Овладейте современной адаптивной версткой с нуля