1.9. Эталонное решение: открытие TCP-соединений
Перед внесением корректировок в проект замерим скорость загрузки веб-страниц во вкладке Network и посмотрим, когда загружаются нужные ресурсы.
Для следующих ресурсов мы предлагаем использовать preload, prefetch, preconnect, dns-prefetch, prerender:
preload: кастомные шрифты, основной скрипт, картинки во вкладке — максимум пять элементов;prerender: страница списка всех магазинов;preconnect: teletype.app.
Предподключение для Yandex Maps через dns-prefetch или preconnect
бессмысленно. Всё равно карта находится внизу страницы,
и пользователь может не дойти до этого блока. А вот
если бы на сайте были страницы «Наш адрес» или «Как
добраться», то такая мера была бы целесообразной. Ведь
на них пользователи заходят как раз для уточнения
месторасположения.
Возможно, стоит предзагружать ссылки на соцсети Вконтакте и Инстаграм через dns-prefetch или preconnect,
так как отзывы могут быть важны. Но сначала нужно запросить
информацию о кликабельности этих ссылок. Часто бывает так, что
отзывов уже достаточно, и по ссылкам никто не переходит.
Поэтому нужно стоит смотреть на конкретное веб-приложение.
После
внесения корректировок смотрим изменения во вкладке Network:
действительно ли увеличилась скорость загрузки, как браузер
проставил приоритеты загружаемым ресурсам. Также можно добавить в preload дополнительный ресурс и посмотреть на реакцию браузера.
Если показатели улучшились — прекрасно! Если что-то ухудшилось, стоит подкорректировать предподключения или поменять приоритеты загрузки.