HTML\CSS → Предзагрузка страниц: ускоряем загрузку браузером

Улучшить субъективную скорость работы сайта можно указав браузеру, какую страницу пользователь откроет следующей и браузер начнет ее загружать предварительно (предзугрузка).

Реализуется это очень просто, добавлением в head страницы:

<link rel="next prefetch prerender" href="NEXT_PAGE" />

Проверить работу в Chome можно с помощью: chrome://net-internals/#prerender

Как это работает?

Браузер встречает инструкцию prerender или prefetch, создает новую невидимую вкладку, и начинает загружать в ней контент (со всем содержимым в случае prerender). Если пользователь действительно переходит по предсказанному адресу, текущая вкладка заменяется на новую, и он оказывается на уже загруженной.

Понятно что далеко не всегда это применимо — не всегда понятно, какой будет следующая страница. Но для многостраничных статей, или записей в блоге это вполне рабочий вариант оптимизации.

Дополнительно:

prefetch указывает браузеру что этот ресурс потребуется нам и браузер загрузит его с низким приоритетом и положит в кэш. Браузер может не загрузить ресурс по своему усмотрению, или загрузить только в режиме простоя;

prerender заранее загружает ресурс или страницу и все ее содержимое в фоне (в фоновой вкладке). Браузер загрузит все ресурсы, построит DOM, применит CSS и JS. А когда пользователь перейдет по ссылке, скрытая страница станет заместо текущей и загрузится моментально;

subresource позволяет подгрузить ресурсы (css, изображения) в пределах текущей страницы если предвидится их использование;

dns-prefetch для ускорения DNS-запросов, если вы загружаете ресурсы с других сайтов;

preconnect делает все то же, что и dns-prefetch, но при этом как бы создает предварительно соединение.