Предварительная загрузка ресурса, методы и решение

#

Сегодня мы собираемся изучить текущие подсказки и директивы ресурсов, которые могут стать еще одним отличным способом повысить производительность вашего веб-сайта или веб-приложения. Возможно, вы слышали о Preload, предварительной выборке DNS и о Preconnect, но мы хотим глубже погрузиться в различия между ними, как вы можете извлечь из них выгоду. Некоторые из преимуществ этого заключается в том, что они позволяют веб-разработчикам оптимизировать доставку ресурсов, уменьшать количество запросов и извлекать ресурсы для доставки контента быстрее, когда пользователь просматривает страницу.

Preload

Preload — это новый веб-стандарт, который предлагает больше контроля над тем, как определенные ресурсы извлекаются для текущей навигации. Это обновленная версия предварительной выборки субресурсов, которая устарела в январе 2016 года. Эта директива может быть определена внутри элемента, например as. Как правило, лучше предварительно загружать самые важные ресурсы, такие как изображения, CSS, JavaScript и файлы шрифтов. Это не следует путать с предварительной загрузкой браузера, в которой предварительно загружаются только ресурсы, объявленные в HTML. Директива preload фактически преодолевает это ограничение и позволяет загружать ресурсы, которые инициируются с помощью CSS и JavaScript, и определять, когда каждый ресурс должен применяться.

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

Magento

Преимущества Preload

Некоторые из преимуществ предзагрузочной директивы включают:

  • Позволяет браузеру устанавливать приоритет ресурсов, что позволяет веб-разработчикам оптимизировать доставку определенных ресурсов.
  • Предоставляет браузеру возможность определять тип ресурса, поэтому он может определить, можно ли повторно использовать один и тот же ресурс в будущем.
  • Браузер может определить, если запрос соответствует с политикой защиты контента, с помощью ссылки, что определяется в as атрибуте.
  • Браузер может отправлять соответствующие accept заголовки на основе типа ресурса. (например, image / webp)

Определение сторонних ресурсов

Прежде чем приступать к работе со сценариями, ознакомьтесь со всеми вашими внешними ресурсами. Легкий способ сделать это — запустить свой веб-сайт с помощью инструмента проверки скорости веб-сайта.

Примеры

Вот очень простой пример предварительной загрузки изображения.

< link  rel = " preload "  href = " image.png " >

Ниже приведен пример предварительной загрузки шрифтов. Примечание. Если вы предварительно загружаете ссылки с ресурсами с поддержкой CORS, вы также должны включить атрибут crossorigin.

<link  rel = "preload"  href = "https://example.com/fonts/font.woff"  as = "font"  crossorigin >

И вот пример предварительной загрузки таблицы стилей с использованием разметки и JavaScript.

<! - Через разметку -> 
<link  rel = "preload"  href = "https://blog.keycdn.com/blog/css/mystyles.css"  as = "style" >
<! - Через JavaScript ->  
<script>  
var res = document . createElement ( «ссылка» );  
res . rel =  "preload" ;  
res . as =  "style" ;  
res . href =  "css / mystyles.css" ;  
документ . голова . appendChild ( res );  
</ скрипт>

Поддержка браузера Preload

Поддержка Preload была добавлена ​​в Chrome 50 в апреле 2016 года, а также поддерживается Opera 37 и выше. Он по-прежнему неподтвержден для Mozilla Firefox и, вероятно, для Microsoft Edge.

Preload

Предварительная выборка DNS

Предварительная выборка DNS позволяет браузеру выполнять поиск DNS на странице в фоновом режиме во время просмотра пользователем. Это минимизирует задержку, поскольку поиск DNS уже произошел, как только пользователь нажмет на ссылку. Предварительная выборка DNS может быть добавлена ​​к определенному URL-адресу, добавив rel=»dns-prefetch» тег к атрибуту ссылки. Мы предлагаем использовать это на таких вещах, как Google fonts, Google Analytics и ваш CDN

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

<! - Предварительная выборка DNS для внешних активов ->
 <link rel = "dns-prefetch" href = "// fonts.googleapis.com">
 <link rel = "dns-prefetch" href = "// www.google-analytics.com"> 
 <link rel = "dns-prefetch" href = "// opensource.keycdn.com">
 <link rel = "dns-prefetch" href = "// cdn.domain.com">

Также важно отметить, что Google Chrome делает что-то подобное уже, когда вы вводите текст в свою адресную строку, например DNS preerolve и TCP preconnect. Это довольно круто! Вы можете просмотреть свой список, перейдя к нему chrome://dns/

Вы также можете воспользоваться фильтром Pagespeed insert_dns_prefetch, который автоматически помещает <link rel=»dns-prefetch»> теги в заголовок страницы для всех доменов.

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

Preload

Preconnect

Preconnect позволяет браузеру устанавливать ранние соединения до того, как HTTP-запрос будет фактически отправлен на сервер . Сюда входят DNS-запросы, переговоры TLS, рукопожатия TCP. Это, в свою очередь, устраняет латентность в оба конца и экономит время для пользователей.

Preconnect — важный инструмент в вашем инструменте оптимизации … он может устранить многие дорогостоящие обратные вызовы из вашего пути запроса — в некоторых случаях сокращение задержки запросов на сотни и даже тысячи миллисекунд. — Ля Григорик

Preconnectt

Предварительное соединение может быть добавлено непосредственно в тег ссылки как атрибут в HTML. Он также может быть доставлен через HTTP-заголовок Link или может быть вызван Javascript на основе активности пользователя. Ниже приведен пример включения предварительного соединения для URL-адреса CDN.

<link href = "https://cdn.domain.com" rel = " preconnect"  crossorigin >

Ниже приведен пример использования preconnect с Google Fonts. Добавляя подсказку для предварительного соединения fonts.gstatic.com, он начинает запрос параллельно с запросом CSS, позволяя немедленно отправлять запрос шрифта. В этом конкретном сценарии preconnect удалил три RTT с критического пути и исключил более половины секунды задержки.

Preconnect

Использование preconnect в эффективном и продуманном манере не только поможет оптимизировать ваш сайт, но также будет препятствовать вам использовать недостаточно используемые ресурсы. Preconnect поддерживается некоторыми современными браузерами, за исключением Internet Explorer, Safari, IOS Safari и Opera Mini.

Preconnect

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

Оставить комментарий