Как повысить производительность сети с помощью подсказок и предварительной загрузки браузера

В этой статье будут рассмотрены следующие директивы и ресурсные подсказки для браузеров. Пять тегов которые дают браузеру команду на предварительные действия:

Когда дело доходит до того, чтобы сделать Интернет лучше для всех, нужно использовать каждую возможность для повышения производительности сайта.

Сами по себе подсказки для браузера, такие как prefetch и prerender, а также директива preload, не новы, однако не заслужено получают мало внимания со стороны веб мастеров, ведь они потенциально могут улучшить производительность.

Что такое подсказка браузера и как она влияет на производительность в Интернете?

Подсказка браузера сообщает браузеру о возможных будущих переходах. Подсказки браузера позволяют ему использовать момент простоя для извлечения или подготовки к извлечению ресурсов ожидая следующего действия пользователя. Браузер решает, будет ли он обрабатывать подсказку на основе устройства пользователя, доступной пропускной способности и других переменных среды. Подсказки браузера имеют очень низкий приоритет, и иногда браузер игнорирует их полностью.

Мы расскажем о наиболее часто используемых типах подсказок, но вы можете найти полный список в W3Schools.

Варианты подсказок браузера включают в себя:

Предварительная выборка (Prefetch)-позволяет браузеру извлекать ресурс, сохранять его в кеше, предполагая, что пользователь запросит его позже.

<link rel ="prefetch" as="image" href = "example.com/images/12345.jpg" >

Prerender это предположение браузера, означающее, что написанный URL является наиболее вероятной целью следующей навигации. Браузер, если он решит действовать по подсказке, поместит ответ в кэш устройства и не будет выполнять никакой обработки ответа.

Prerender похож на предварительную выборку, за исключением того, что prerender извлекает всю страницу вместо назначенных ресурсов. Prerender указывает браузеру обрабатывать контент и сохранять его в памяти устройства. При использовании prerender вы на 90% должны быть уверены, что посетитель перейдет на предварительно подсказанную браузеру страницу; в противном случае вы перегружаете свой сервер и пропускную способность вашего посетителя.

<link rel ="prerender" href = "example.com/dostavka.com" >

Подсказка сообщает браузеру, что он должен выполнять поиск указанного на странице DNS в фоновом режиме для дальнейшей навигации, мы заранее укажем браузеру что будет использоваться внешний ресурс, и вот его адрес.

<link rel ="dns-prefetch" href ="//analytics.google.com" >

Заблаговременно сделав это, вы сможете сэкономить время, затрачиваемое на обработку клиентским интерфейсом.

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

Значение rel="preconnect" заставляет браузер сразу устанавливать соединение с сервером, на который в будущем может быть отправлен запрос.

<link rel ="preconnect" href = "https://example.com" >

Можно указывать с префиксом (https://example.com) или без него (//example.com).

Используйте этот тег максимум для 4-6 доменов.

Предварительная загрузка (<link rel= "preload">) - это не подсказка браузера, а команда. В отличие от предварительной выборки, которая может игнорироваться браузером, здесь браузер должен загрузить и кэшировать ресурс (например, скрипт или таблицу стилей).

<link rel ="preload" href = "/style.css" as="style">

Версии браузеров, поддерживающие те или иные ресурсные подсказки, можно посмотреть по ссылкам: