Директивы и ресурсные подсказки для браузеров
17 Октября 2019 86 5.0 0


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




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

  •  Prefetch
  •  Prerender
  •  dns-prefetch
  •  Preconnect
  •  Preload
  • Ссылка подсказки ресурса

    Ссылка подсказки ресурса-это связь которая используется для указания источника или ресурса, к которому должен быть подключен агент пользователя.

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

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

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

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

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

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


    PREFETCH

    Prefetch

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

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

    Атрибут as может иметь следующие значения:
  • audio: аудио файлы <audio>
  • document: HTML документ, встраиваемый с помощью <frame> или <iframe>
  • embed: Ресурс для встраивания в <embed>
  • fetch: ресурс, к которому должен обращаться запрос на выборку или XHR, например, файл ArrayBuffer или JSON
  • font: Шрифты
  • image: Изображения
  • object: Ресурс встроенный в <object>
  • script: Скрипты
  • style: Стили
  • track: WebVTT файлы
  • worker: JavaScript код для Web Workers (средство для запуска скриптов в фоновом потоке)
  • video: Видео файлы <video>

  • PRERENDER

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

    Prerender

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

    Например, находясь в процессе оформления заказа, пользователь в настоящее время находится на странице, где он просматривает содержимое своей корзины. На следующей странице собрана информация о доставке и другие предложения. Вы можете повысить производительность страницы доставки, если браузер заранее получит ресурсы, необходимые для страницы доставки, пока пользователь изучает свою корзину. Как только посетитель переходит на страницу доставки, браузеру нужно только извлечь ранее приготовленные по Prefetch ресурсы из кеша браузера. Так же можно использовать для страниц акций, скидок.

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


    DNS PREFETCH

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

    dns-prefetch

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

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

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

    dns-prefetch


    PRECONNECT

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

    preconnect

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

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

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


    PRELOAD

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

    preload

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

    Атрибут as может иметь следующие значения:
  • audio: аудио файлы <audio>
  • document: HTML документ, встраиваемый с помощью <frame> или <iframe>
  • embed: Ресурс для встраивания в <embed>
  • fetch: ресурс, к которому должен обращаться запрос на выборку или XHR, например, файл ArrayBuffer или JSON
  • font: Шрифты
  • image: Изображения
  • object: Ресурс встроенный в <object>
  • script: Скрипты
  • style: Стили
  • track: WebVTT файлы
  • worker: JavaScript код для Web Workers (средство для запуска скриптов в фоновом потоке)
  • video: Видео файлы <video>
  • полный список смотри на MDN.

  • Итог

  • <link rel= "preload"> — вы уверены что ресурс понадобится через несколько секунд
  • <link rel= "prefetch"> — вы уверены что ресурс понадобиться на следующей странице
  • <link rel= "preconnect"> — когда вы знаете, что вам скоро понадобится ресурс
  • <link rel= "dns-prefetch"> — аналогично, когда вы знаете, что вам скоро понадобится ресурс
  • <link rel= "prerender"> — когда вы уверены, что пользователи перейдут на определённую страницу, и хотите ускорить её отображение
  • Версии браузеров, поддерживающие те или иные ресурсные подсказки, можно посмотреть по ссылкам:

  • Preload
  • Prefetch
  • dns-prefetch
  • Preconnect
  • Prerender

  • Читайте также:
    Похожие записи, из рубрики:
    Комментарии
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]