Как использовать preload, prefetch и preconnect для ускорения сайта
По поводу этих подсказок см. также статью «Предсказывающие страницы: Использование dns-prefetch, preconnect, prefetch, preload и prerender для повышения производительности страницы» на Хабрахабре.
1. Директива preload
Директива preload — это новый веб-стандарт, который хорошо управляет выбором конкретных ресурсов для текущей навигации. Preload — обновленная версия подресурса prefetch, раскритикованного в январе 2016. Эта директива может быть определена в элементе , например, . Как правило, лучше предварительно загружать самые важные ресурсы, такие как изображения, CSS, JavaScript и файлы шрифтов.
Не путайте директиву preload с предварительной загрузкой браузером только тех ресурсов, которые объявлены в HTML. Директива preload преодолевает это ограничение. Preload позволяет предварительно загрузить ресурсы, инициированные CSS и JavaScript, а также описать, когда нужно использовать каждый ресурс.
Чем же preload отличается от prefetch? Preload работает с текущей навигацией и ресурсами с высоким приоритетом. Prefetch — ресурсы с низким приоритетом для следующей навигации. Отметим, что preload не блокирует window-событие onload.
На рисунке 1 показан пример использования директивы preload для загрузки ресурсов JavaScript.
Рис. 1. Пример использования директивы Preload для загрузки ресурсов JavaScript
1.1. Преимущество директивы preload
Вот некоторые преимущества директивы preload:
- Позволяет браузеру устанавливать приоритет ресурса, что, в свою очередь, позволяет веб-разработчикам оптимизировать доставку ресурсов.
- Позволяет браузеру выяснить тип ресурса, что, в свою очередь, позволяет узнать, можно ли тот же самый ресурс снова использовать в дальнейшем.
- Позволяет браузеру выяснить, совместим ли запрос с политикой безопасности контента в соответствии с атрибутом as.
- Позволяет браузеру послать подходящие заголовки accept, основанных на типе ресурсов (такие как image/webp).
1.2. Примеры
Вот очень простой пример предварительной загрузки изображения.
Ниже пример предварительной загрузки шрифтов.
Замечание. При предварительной загрузке связей с разрешенными CORS-ресурсами необходим атрибут crossorigin.
Наконец, пример предварительной загрузки таблицы стилей, используя HTML разметку и JavaScript.
<!-- Via markup -->
<link rel="preload" href="https://blog.keycdn.com/blog/css/mystyles.css" as="style">
<!-- Via JavaScript -->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "css/mystyles.css";
appendChild(res);
</script>1.3. Браузерная поддержка preload
Поддержка директивы preload была добавлена к браузеру Chrome 50 в апреле 2016, а также поддерживается браузером Opera 37 и выше. Поддержка директивы preload пока еще не реализована для браузера Mozilla Firefox, а ее появление в браузере Microsoft Edge вероятно (на 9 января 2017).
На рисунке 2 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы preload (на 9 января 2017). Последнее состояние см. на этой странице
Рис. 2. Последние версии наиболее распространенных браузеров с указанием поддержки директивы preload. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление (на 9 января 2017)
2. Prefetch
Prefetch — это низкоприоритетная ресурсная подсказка, позволяющая браузеру выбирать в фоновом режиме (в свободное время) те ресурсы, которые могут пригодиться позже, и сохранять их в кэше браузера. Как только страница закончит загружаться, prefetch загружает некоторые дополнительные ресурсы. Когда пользователь жмет на prefetch-ссылку, prefetch немедленно загружает контекст. Имеется три различных типа prefetch, рассмотренные далее:
1) ссылочный;2) DNS;3) prerendering.
На рисунке 3 показаны четыре шага выполнения ссылочного prefetch.
Шаг 1 (Step 1). Загрузка сайта example.com (Load https://example.com). На изображении экрана надпись: ожидание загрузки example.com (Waiting for https://example.com).
Шаг 2 (Step 2). Браузер находит prefetch-ссылки (Browser finds prefetch links).
Шаг 3 (Step 3). Браузер выбирает затребованный контент, чтобы показать на экране prefetch-страницы. Одновременно с этим контент сохраняется в кэше, пока пользователь щелкает по ссылке. Внизу изображен кэш браузера.
Рис. 3. Четыре шага выполнения ссылочного prefetch
2.1. Ссылочный prefetch
Как сказано выше, ссылочный prefetch позволяет браузеру выбрать ресурсы и сохранить их в кэше, предполагая, что потом пользователь их запросит. Браузер ищет prefetch в HTML в теге или в его заголовке Link:
- HTML:
- HTTP Header: Link: ; rel=prefetch
Замечание. «Эта техника ускорит многие интерактивные сайты, но не будет работать всегда и везде по следующим причинам:1. Для некоторых сайтов трудно угадать, что пользователь собирается делать.2. Для других сайтов сохраненные в кэше данные устаревают, если пользователь быстро выбирает новые.3. Опасно постоянно сохранять файлы в кэше — просмотр текущей страницы замедлится».Google Developers.
Более подробно см. Prefetching resources, Google Developers
Ссылочный prefetch поддержан большинством современных браузеров, за исключением Safari, Safari iOS и Opera Mini. Chrome и Firefox, кроме того, покажут prefetch-ресурсы на сетевой панели (на 9 января 2017).
На рисунке 4 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы ссылочного prefetch (на 9 января 2017). Последнее состояние см. на этой странице
Рис. 4. Последние версии наиболее распространенных браузеров с указанием поддержки директивы prefetch. Зеленый цвет означает поддержку, красный — ее отсутствие (на 9 января 2017)
2.2. DNS prefetch
DNS prefetch позволяет браузеру выполнять поиск DNS на странице в фоновом режиме, в то время как пользователь просматривает сайт. Это минимизирует время ожидания, поскольку поиск DNS уже состоялся, когда пользователь щелкнет по ссылке.
DNS prefetch входит в URL как атрибут тега link: rel=»prefetch». Используется для шрифтов Google, Google Analytics и CDN.
«DNS-запросы быстры в смысле пропускной способности, но время ожидания может быть велико, особенно в мобильных сетях. Теоретически DNS prefetch может значительно уменьшить время ожидания в определенные моменты, например, когда пользователь щелкает по ссылке. Иногда время ожидания можно уменьшить на целую секунду.»Mozilla Developer Network.
Более подробно см. X-DNS-Prefetch-Control, Mozilla Developer Network
Это также используется при распределении ресурсов. Вот пример:
<!-- Prefetch DNS for external assets --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//opensource.keycdn.com"> <link href="//cdn.domain.com">
Отметим, что Google Chrome поступает аналогично, когда в адресной строке набирается текст, используя DNS presolve и TCP preconnect. Что довольно круто! На chrome://dns/ виден список используемых prefetch-сайтов, пример которого показан на рисунке 5.
По поводу DNS presolve см. статью «Особенности резолвера DNS в Windows 10 и DNS Leak» на Хабрахабре
Рис. 5. DNS prefetch 10 хостов для будущих загрузок. Первый столбец Имя хоста, второй — Как давно (чч:мм:сс), третий — Источник
Также можно использовать Pagespeed-фильтр insert_dns_prefetch, который помещает теги в заголовок страницы автоматически для всех доменов или специализированные сервисы, такие как Айри.рф.
По поводу Pagespeed-фильтра см. краткую статью «Пакет программ Page Speed от Google» на Хабрахабре
DNS prefetch также поддержан большинством современных браузеров, за исключением Opera Mini (на 9 января 2017).
На рисунке 6 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы DNS prefetch (на 9 января 2017). Последнее состояние см. на этой странице
Рис. 6. Последние версии наиболее распространенных браузеров с указанием поддержки директивы DNS prefetch. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление, салатовый — промежуточный вариант (на 9 января 2017)
2.3. Prerender
Prerender очень похож на prefetch тем, что тоже собирает ресурсы, на которые может попасть пользователь. Различие в том, что prerender принимает в фоновом режиме всю страницу, все содержание документа. Вот пример.
«Подсказка prerender используется приложением для указания следующей вероятной цели HTML-навигации. При этом пользовательский агент выберет и обработает указанный ресурс как HTML-ответ. А вот для того, чтобы выбрать другой тип контента, или же когда предварительная обработка HTML нежелательна, приложение использует другую подсказку — prefetch.»W3C
Более подробно см. Resource Hints, W3C
Например, prerender — это инструмент браузера Chrome, улучшающий время загрузки страниц сайта. На рисунке 7 схематически показано, как prerender запускается тегами на указанных страницах. Скрытая страница создана для prerender URL, который будет полностью загружать все связанные ресурсы и выполнять JavaScript. Если пользователь откроет эту страницу, скрытая страница будет обменена на текущую и сделана видимой.
1. Запуск тега .2. Заблаговременное создание невидимых страниц.3. Загрузка пользователем другой страницы, включающей выполнение JavaScript.4. После выбора пользователем новой страницы обмен текущей страницы на скрытую.5. Удаление скрытых страниц через небольшой промежуток.
По поводу prefetch и prerender см. также статью «Улучшение субъективной скорости работы сайта при помощи подсказок браузеру» на Хабрахабре
Рис. 7. Схематически показано, как prerender запускается тегом
Эта схема взята с сайта The Chromium Projects
Нужна осторожность с prerender, это — тяжелый ресурс, и его использование может вызвать падение пропускной способности, особенно на мобильных устройствах.
Отметим, что нельзя проверить наличие prerender с помощью Chrome DevTools. Наличие prerender на странице сайта можно посмотреть по адресу chrome://net-internals/#prerender. Кроме того, на prerender-test.appspot.com можно проверить на наличие prerender любую страницу сайта, указав ее адрес.
На рисунке 8 показан пример проверки наличия prerender с помощью chrome://net-internals/#prerender
Рис. 8. Пример проверки наличия prerender с помощью chrome://net-internals/#prerender
Prerender поддерживается некоторыми браузерами за исключением Mozilla Firefox, Safari, iOS Safari, Opera Mini и браузера Android (на 9 января 2017).
На рисунке 9 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы prerender (на 9 января 2017). Последнее состояние см. на этой странице
Рис. 9. Последние версии наиболее распространенных браузеров с указанием поддержки директивы prerender. Зеленый цвет означает поддержку, красный — ее отсутствие (на 9 января 2017)
Prefetch имеет некоторые недостатки, например, проблемы с секретностью.
- Веб-статистика регистрации prefetch может несанкционированно расти, хотя Google и заявляет, что лишнее использование тега подавляется. Пример такой веб-аналитики, когда теги, возможно, и подавляются, но при этом регистрируются две сессии prefetch за один щелчок, находится на английском блоге по этому адресу
- Пользователи в принципе могут подвергнуться угрозам безопасности, загрузив больше страниц с незапрошенных сайтов (дополнительно включенных в запросы, поскольку загрузка стала более продвинутой и разнообразной).
- Пользователи могут неосознанно нарушить политику секретности своей сети или сети организации, если prefetch становится доступен несанкционированный в сетях контент.
3. Preconnect
Наконец, рассмотрим preconnect. Preconnect позволяет браузеру установить соединение прежде, чем HTTP-запрос будет отправлен на сервер. Эта процедура включает поиски DNS, «переговоры» TLS и «рукопожатие» TCP. Что в свою очередь устраняет круговые задержки и экономит время пользователя.
«Preconnect — важный инструмент оптимизации… он устраняет дорогостоящие круговые задержки из пути запроса. Иногда время ожидания запроса сокращается на сотни и даже тысячи миллисекунд».Илья Григорик (англ. Ilya Grigorik).
Более подробно см. статью Ильи Григорика «Eliminating Roundtrips with Preconnect»
На рисунке 10 сравнивается время загрузки DNS/TCP/TLS с использованием preconnect и без него. В верхней части рисунка приведено время загрузки без использования preconnect, равное 2,6 с. Внизу — с использованием preconnect, время загрузки равно 2,1 с.
Рис. 10. Сравнение времени загрузки DNS/TCP/TLS с использованием preconnect и без него
Preconnect добавляется непосредственно к тегу link как атрибут HTML. А также в заголовок Link HTTP, и еще пользователем с помощью JavaScript. Вот пример возможного использования preconnect для URL CDN.
На рисунке 11 приведен пример использования preconnect со шрифтами Google. Добавление подсказки preconnect для сайта fonts.gstatic.com начинается с запроса шрифта параллельно с CSS-запросом. Что позволяет немедленно послать запрос шрифта.
В этом конкретном сценарии preconnect удаляет три круговые задержки из критического пути и сокращает времени ожидания больше чем на полсекунды.
Более подробно см. статью Ильи Григорика «Eliminating Roundtrips with Preconnect»
Рис. 11. Пример использования preconnect со шрифтами Google
Эффективное и продуманное использование preconnect не только поможет оптимизировать веб-сайт, но также защитит от недостаточного использования ресурсов. Preconnect поддерживается некоторыми современными браузерами за исключением Internet Explorer, Safari, iOS Safari и Opera Mini (на 9 января 2017).
На рисунке 12 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы preconnect (на 9 января 2017). Последнее состояние см. на этой странице
Рис. 12. Последние версии наиболее распространенных браузеров с указанием поддержки директивы preconnect. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление (на 9 января 2017)
Итоги
Возможно, теперь понимание того, что есть preload, prefetch и preconnect, стало немного лучше. А также стратегии их использования для ускорения доставки контента. Будет приятно, если использование директивы preload возрастет в ближайшие месяцы, а веб-разработчики примут ее на вооружение.
