Хорошая навигация — это мгновенная навигация. Но перед отображением страницы нужно выполнить сетевой запрос и получить все ресурсы. Чтобы переход был мгновенным, можно «угадать» следующую страницу и загрузить заранее.
На данный момент в браузерах есть следующие способы реализации предварительной загрузки:
-
<link rel="prefetch" href="/catalog"> — браузер загружает HTML страницы в фоновом режиме с низким приоритетом, когда сеть не занята загрузкой ресурсов для текущей страницы. Загруженный HTML кэшируется для дальнейшего использования. Но остальные ресурсы (стили, картинки, скрипты) не загружаются и не кэшируются;-
<link rel="prerender" href="/catalog"> — браузер загружает HTML страницы и все ресурсы, а затем рендерит страницу в невидимой вкладке. Это требует больше ресурсов и нагружает сеть, но страница будет полностью отрисована и готова к немедленному отображению, как-будто пользователь её уже загрузил;-
<script type="speculationrules"> — новый API с настраиваемыми правилами предварительной загрузки. Позволяет настроить список страниц для загрузки в фоне, загрузку при наведении или касании определённых ссылок, приоритеты и условия предварительной загрузки. Пока только в Chromium-браузерах;- Service Worker — скрипт, который выполняется в отдельном потоке и перехватывает запросы. При установке Service Worker можно определить набор страниц, загрузить их в параллельном потоке и сохранять в Cache Storage. Затем перехватывать запросы и отдавать из кэша уже сохранённые страницы.
Помимо стандартных возможностей браузеров, есть JS-библиотеки. Google экспериментировал с guess.js и quicklink. У популярных мета-фреймворков и библиотек роутинга часто есть встроенные решения.
Предварительная загрузка — рабочий способ улучшения производительности и UX, но опасный. Попытка угадать следующую страницу не всегда оправдывается, что приводит к лишним запросам, затратам трафика и нагрузке на сервер.
Такую оптимизацию нужно внедрять аккуратно и точечно, с замерами и аналитикой. При этом другие оптимизации не отменяются. Уменьшение размера страницы и её ресурсов никогда не будет лишним и дополнит предварительную загрузку.
#performance #web_api