Это очередная статья из серии «как оптимизировать скорость сайта», в которой я рассмотрю возможность, доступную в современных браузерах.
Итак, типичная инициализация HTTP-запроса может вызвать обмен множеством пакетов, и только после этого какие-то данные будут отправлены на сервер: браузер может заниматься разрешением DNS, выполнять тройное рукопожатие и т. п.
Современные браузеры стараются предсказать, какие соединения нужны сайту, ещё до создания запроса. Используя предварительные соединения браузер может заранее отправить необходимые запросы, экономя время на дорогостоящих повторяющихся DNS/TCP/TLS-запросах. Однако, браузеры не могут гарантированно предугадать, какие запросы следует сделать предварительно.
Но теперь браузерам (Firefox 39, Chrome 46 и новее) можно помочь, указав явно, какие запросы нужно совершить заранее. А теперь давайте рассмотрим подробнее, как это выглядит на практике.
Пример
В первом случае браузер получает HTML-код и узнаёт, что необходимый CSS-файл располагается на домене fonts.googleapis.com. После скачивания этого CSS-файла браузер строит CSSOM, определяющую, что нужно загрузить ещё два шрифтовых файла, инициализируя запросы к fonts.gstatic.com — сначала DNS, затем TCP и TLS. Когда сокет готов, оба запроса мультиплексируются с помощью соединения HTTP/2.
Во втором случае в разметке сайта добавлена подсказка для предварительного соединения (rel="preconnect"), говорящая браузеру, что нужно будет получать ресурсы с fonts.gstatic.com. В результате браузер начинает установку сокетов параллельно с запросом к CSS и завершает раньше времени, позволяя незамедлительно послать запросы на получение шрифтов. В данном конкретном случае использование предварительных запросов позволяет удалить три соединения и сократить задержку почти на секунду.
Атрибут crossorigin добавлен потому, что шрифтовые файлы должны загружаться в анонимном режиме.
Предсказывай с умом
Предварительные соединения — это очень полезный инструмент, который должен взять на вооружение любой уважающий себя веб-разработчик. Как было показано, их использование может значительно уменьшить нагрузку на сервер и задержку при загрузке сайтов. Но использовать этот инструмент нужно без фанатизма и предсказывать только те сетевые действия, которые действительно могут произойти, так как иначе можно сделать только хуже, ведь будут создаваться неиспользуемые сокеты.