Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

Устранение задержек с помощью предварительных соединений

Это очередная статья из серии «как оптимизировать скорость сайта», в которой я рассмотрю возможность, доступную в современных браузерах.

Итак, типичная инициализация HTTP-запроса может вызвать обмен множеством пакетов, и только после этого какие-то данные будут отправлены на сервер: браузер может заниматься разрешением DNS, выполнять тройное рукопожатие и т. п.

Современные браузеры стараются предсказать, какие соединения нужны сайту, ещё до создания запроса. Используя предварительные соединения браузер может заранее отправить необходимые запросы, экономя время на дорогостоящих повторяющихся DNS/TCP/TLS-запросах. Однако, браузеры не могут гарантированно предугадать, какие запросы следует сделать предварительно.

Но теперь браузерам (Firefox 39, Chrome 46 и новее) можно помочь, указав явно, какие запросы нужно совершить заранее. А теперь давайте рассмотрим подробнее, как это выглядит на практике.

Пример

В первом случае браузер получает HTML-код и узнаёт, что необходимый CSS-файл располагается на домене fonts.googleapis.com. После скачивания этого CSS-файла браузер строит CSSOM, определяющую, что нужно загрузить ещё два шрифтовых файла, инициализируя запросы к fonts.gstatic.com — сначала DNS, затем TCP и TLS. Когда сокет готов, оба запроса мультиплексируются с помощью соединения HTTP/2.


<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700|Open+Sans" rel="stylesheet" />

Во втором случае в разметке сайта добавлена подсказка для предварительного соединения (rel="preconnect"), говорящая браузеру, что нужно будет получать ресурсы с fonts.gstatic.com. В результате браузер начинает установку сокетов параллельно с запросом к CSS и завершает раньше времени, позволяя незамедлительно послать запросы на получение шрифтов. В данном конкретном случае использование предварительных запросов позволяет удалить три соединения и сократить задержку почти на секунду.

Атрибут crossorigin добавлен потому, что шрифтовые файлы должны загружаться в анонимном режиме.

Предсказывай с умом

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

Комментарии