От автора: когда речь заходит о front-end производительности, мы в первую очередь начинаем думать о конкатенации, минификации, кэшировании или сжатии ресурсов на сервере, все это мы делаем для того, чтобы страницы грузились быстрее, а пользователи могли как можно быстрее добиться требуемых результатов.
Так называемый предварительный выбор файлов это еще одна техника по повышению производительности. С ее помощью мы можем сообщить браузеру, какие файлы могут понадобиться пользователю еще до того, как таковые нужны.
«Предварительный выбор это способ дать подсказку браузеру о том, какие ресурсы потребуются в любом случае или какие могут быть использованы в будущем. Некоторые подсказки применяются к текущей странице, другие же могут оказывать влияние на будущие страницы. Как разработчики мы знаем наши приложения намного лучше, чем браузер. Это можно использовать для информирования браузера о доступных ресурсах.»
Данная практика, когда мы предугадываем, что пользователю понадобится еще до того, как пользователь вызвал соответствующие ресурсы, называется предварительная загрузка (prebrowsing). Это не просто техника, она подразделяется на другие: dns-prefetching, подресурсы (subresource), стандартный предварительный выбор (prefetch), предварительное соединение (preconnect) и предварительная визуализация (prerender).
DNS prefetching
Данный способ уведомляет клиента о том, что есть определенные ресурсы, которые понадобятся нам позже с определенного адреса. Скажем, нам нужен ресурс, изображение или аудио файл с адреса example.com. Тогда в хедере необходимо прописать:
1 |
<link rel="dns-prefetch" href="//example.com"> |
Затем, когда этот файл нам потребуется, нам не нужно будет ожидать, пока отработает DNS. Данный подход крайне полезен при работе со сторонним кодом третьих лиц или при работе с ресурсами из социальных сетей. Во втором случае мы можем загружать ресурсы через виджет с помощью <script>.
В этой фундаментальной статье по front-end производительности Гарри Робертс предлагает использовать эту технику:
«Одна единственная строка говорит браузеру, что нужно вытянуть необходимые ресурсы по ссылке с определенного домена еще до того, как ресурсы действительно понадобятся. Это означает, что поиск DNS уже будет проходить, как только браузер заметит тег <script> виджета. Такой подход дает браузеру маленькую фору.»
То, что мы описали, может показаться настолько маленьким приростом производительности, что от него совсем нет толка. Однако не обязательно применять данную технику только по описанному нами сценарию – Chrome постоянно делает похожие вещи. Вы только начали вводить домен в адресную строку, а программа уже автоматически достраивает DNS (иногда даже отрисовывает страницы). Это и есть те самые решающие миллисекунды.
Предварительное соединение
Также как и в методе предварительной выборки DNS, метод предварительного соединения разрешает DNS, но кроме всего прочего также осуществляется TCP рукопожатие и опционально TLS переговоры. Применить метод можно так:
1 |
<link rel="preconnect" href="//css-tricks.com"> |
Илья Григорик написал замечательную статью, где все расставлено по полочкам:
«Современные браузеры делают все, что в их силах, чтобы предугадать адрес еще до перехода на него. Инициируя предварительную загрузку, браузер может установить необходимые сокеты и удалить DNS, TCP и TLS пробежки еще до самого запроса. Тем не менее, насколько бы не были умны браузеры, они все еще не могут предугадать все возможные соединения для каждого сайта. Хорошая новость в том, что мы-то можем помочь браузеру; мы можем сообщить браузеру необходимый сокет еще до самого запроса с помощью новой подсказки в предварительном соединении в новых версиях Firefox 39 и Chrome 46!»
Предварительный выбор
Если мы точно знаем, что какой-то ресурс нам в будущем потребуется, мы можем попросить браузер, чтобы он загрузил его в кэш на какое-то время, чтобы мы могли к нему потом обращаться. Примером может стать изображение или скрипт, или что угодно, что можно кэшировать:
1 |
<link rel="prefetch" href="image.png"> |
В отличие от предвыборки DNS в данном случае мы по-настоящему запрашиваем требуемый файл, загружаем его и храним в кэше. Предвыборка может быть заблокирована браузером, поэтому необходимо соблюсти некоторые условия. К примеру, пользователь может отменить запрос на загрузку объемного файла шрифтов при медленном соединении. Firefox делает предвыборку только, если браузер находится в «режиме ожидания».
Как Bram Stein explains объясняет в своей статье, данный подход дал бы огромный прирост производительности веб-шрифтам. На данный момент шрифт обязан дождаться построения DOM и CSSOM еще до того, как они загрузились. Другое дело, если мы сделаем предвыборку по DOM и CSSOM, тогда этот момент легко решается.
Обратите внимание: Раньше предвыборка ресурсов была неудобна для тестирования, но теперь в Chrome и Firefox ресурсы предвыборки отображаются во вкладке Сеть. Также стоит помнить, что не существует общих ограничений по предварительным выборкам.
Подресурсы
Еще одна техника предвыборки, но в отличие от выше описанных она различает ресурсы с разными приоритетами и те, которые стоят выше загружаются первыми. К примеру, для Chrome и Opera можно добавить следующий код в шапку:
1 |
<link rel="subresource" href="styles.css"> |
По документации Chromium данный метод работает следующим образом:
«LINK rel=subresource» представляет собой новый тип связи ссылок с отличной от LINK rel=prefetch семантикой. В то время как LINK rel=prefetch обеспечивает низкоприоритетную загрузку ресурсов для последующего их использования на будущих страницах, rel=subresource служит для ранней загрузки для текущей страницы.
Итак: если ресурс потребуется на текущей странице или через какое-то время, то лучше использовать subresource, в противном случае prefetch.
Предварительная визуализация страниц
Эта техника работает на уровне ядра, prerender позволяет заранее загрузить все ресурсы текущей страницы:
1 |
<link rel="prerender" href="//css-tricks.com"> |
Steve Souders превосходно разъяснил эту технику:
«Это как перейти по адресу на закрытой вкладке – все ресурсы загружены, DOM построен, страница загрузилась, CSS применился, JavaScript тоже выполнился и т.д. Если пользователь переходит по указанному href, то скрытая страница моментально отображается. В поиске Google эта фишка уже давно доступна и называется она Мгновенные страницы. Недавно и Microsoft объявили о создании похожего способа предварительной визуализации в Bing на IE11.»
Но будьте осторожны! Вы должны быть уверены на 100%, что пользователь перейдет по ссылке, иначе браузер будет загружать все ресурсы для отрисовки страницы, которую пользователь так и не увидит.
Steve Souders также говорит:
«Как и с любыми предсказаниями есть шанс, что они не сбудутся. Если предзагрузка слишком затратна (к примеру, загружает CPU, потребляет слишком много батареи или забивает сеть), то лучше ее не использовать или использовать, но с осторожностью. Казалось бы, что может быть труднее, чем определить, по какой ссылке дальше перейдет пользователь. Однако существуют так называемые сценарии высокого доверия:
Если пользователь ввел в поисковике очевидный запрос, и вы точно знаете, по какой ссылке он перейдет.
Если ищет страницу входа, то она, обычно, должна быть следующей.
Если пользователь читает статью или какие-либо результаты на нескольких страницах, то, очевидно, за текущей страницей должна идти следующая.»
И наконец, Page Visibility API можно использовать для защиты от самозапускающихся скриптов, чтобы они не отрисовывались на экране. Итак, поговорив о текущих способах предварительной загрузки, давайте обсудим будущие дополнения в спецификацию, которые могут быть интересны.
Дополнение в будущем: предварительная загрузка
Новая спецификация preload гласит, что иногда лучше всего постоянно загружать определенные ресурсы, несмотря на мнения браузера по этому поводу. Основное отличие от предвыборки в том, что предзагрузку нельзя проигнорировать.
1 |
<link rel="preload" href="image.png"> |
Заключение
Очень сложно предугадать, куда же пользователь направится дальше, этот процесс требует тщательного планирования и тестирования, но ожидаемый прирост производительности того стоит.
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.