Не тормози: разгоняем сайт тэгом link

1200x630_2

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

Скорость загрузки сайта в данном случае — показатель не только технической адаптации бизнеса к современным реалиям, но и его квалифицированности в целом. Ведь если организация не может «сделать нормально» даже свою страницу, что она может предложить остальным?

При этом часто клиентам совсем не важен профиль компании. В 2020 году тормозить не имеют права ни агрегаторы доставок пиццы, ни магазины игрушек, ни информационные порталы фитнес-клубов, ни форумы садоводов с предложением платных услуг по пересадке фиалок (без них, кстати, тоже) — никто.

Что делать

Большую часть этой проблемы уже решил браузер пользователя (любой). А именно — его (их) функция прогнозирования, (на английском “Foreseeing”). Принцип её работы простой: вне зависимости от типа, браузер запоминает поведенческие паттерны пользователя и старается загрузить приоритетный по вычислениям контент в первую очередь.

Таким образом человек даже не замечает, что некоторые детали страницы грузятся в последнюю очередь, т. к. его внимание сосредоточено на том, что он хотел увидеть (и хочет видеть обычно).

Однако можно оптимизировать работу Foreseeing. Для этого необходимо понимать базовую логику пользователя, знать наименования ресурсов, которые запрашиваются чаще всего и… использовать HTML-тэги links.

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

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

HTTP-запрос

Происходит всегда, когда пользователь обращается к какому-либо ресурсу. Сначала человек вводит в адресную строку адрес ресурса, после чего браузер обращается к DNS-серверу. Это необходимо ему для того, чтобы получить соответствующий адресу IP.

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

Это происходит посредством отправки браузеру ответного сообщения для принятия. Если говорить проще — сервер и браузер обмениваются сообщениями, принимают их друг у друга, и соединение между клиентом (браузером) и сервером устанавливается.

2a9c1f8b06ef364543efebf6a9ddb9fd

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

Если соединение установлено нормально, браузер не заражён множеством вредоносов (а костыли бэкенда сайта не торчат из монитора), сервер передаёт запрашиваемую страницу одномоментно.
Конец.

Отношения документов в HTML

Вернёмся к HTML-тэгу link. У него есть достаточно важный атрибут — rel (сокращение от “relationship”). Этот атрибут определяет отношение между открытым документом и страницей, на которую указывает введённая пользователем ссылка.

Стандарты определяют различные возможности значений для rel. Однако в данном вопросе наиболее актуальна группа Resource Hints: “dns-prefetch”, “preconnect”, “prefetch” и “prerender”.

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

DNS Prefetch

Работает с разрешением доменных имён документов. Фактически, нужен, чтобы получить нужный IP с DNS-сервера, т. е. преобразовать доменное имя в требуемый IP-адрес. Тэг очень важный, т. к. последние иногда тормозят, особенно если соединение происходит в мобильных сетях.

Тэг dns-prefetch позволяет провести предварительную выборку DNS-результатов. Мелочь, а (приятно) страница загружается быстрее. Иногда даже на целую секунду. Без шуток, это весьма неплохой показатель.

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

Чтобы страницы грузились быстрее, можно использовать преждевременный поиск DNS. Для этого в тэге “dns-prefetch” необходимо прописать адрес ресурса, куда ведут ссылки. Например, <link rel=»dns-prefetch» href=»//teper_idi_syuda.ru»>.

Браузер считает этот код и автоматически добавит DNS-поиск второго ресурса в очередь задач. Это позволит сразу же установить TCP-соединение при клике на ссылку, без обращения к DNS-серверу.

m8n4da

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

Preconnect

Этот тэг позволяет установить соединения клиента (браузера) с сервером в момент, когда запрос ещё не отправлен (но очевидно планируется). Обычно это происходит при редиректах. Прописывается так: <link rel= «preconnect» href= «//opa_redirect.ru»>.

Тэг “preconnect” поддерживается практически всеми браузерами.
Но лучше перестраховаться и всё же проверить по этому списку.

Так же, совместно с тэгом “preconnect”, вы можете использовать атрибут “pr”. Он определяет вероятность будущего запроса ресурса. В зависимости от вашего прогноза в тэг необходимо проставить значение от 0 до 1.

Выглядеть будет так: <link rel=»preconnect» href=»//opa_redirect.ru» pr=»0.2″>.

Prefetch

Тэг прописывается, чтобы браузер в фоновом режиме мог обращатиться к DNS-серверу за его доменным именем, выполнить TCP-соединение, сделать HTTP-запрос и… извлечь ресурс для сохранения в кэше. Прописывается тэг следующим образом: <link rel=»prefetch» href=»//ty-tochno-kliknesh-syuda.jpg»>

Проблема в том, что с этим тэгом необходимо быть уверенным в поведении пользователя на 100%. В обратном случае работа сайта может замедлиться, а это обратный эффект желаемому. Поэтому если вы думаете использовать “prefetch” не в галерею изображений, многостраничный текстовый документ и т. д. — подумайте дважды.

Ещё одна проблема тэга — поддержка не всеми браузерами.
Список вы можете посмотреть здесь.

Prerender

Тэг предназначен только для HTML-страниц и их настройки. Он позволяет полностью отрендерить страницу в оффлайн, чтобы необходимые документы в момент открытия сайта пользователем грузились сразу же и без задержек. Прописывается так: <link rel=»prerender» href=»//kartinochke.com/about.html»>

Однако работа “prerender” требует немалого объёма памяти и больших вычислений. Иногда браузер просто не тянет эту задачу без дополнительных, помогающих ему, ресурсов. Например, изображений, загруженных на страницу.

Такая ситуация неизбежно приведёт к тому, что количество запросов начнёт расти. А значит скорость загрузки упадёт. Думайте сами.

Кстати, ещё у тэга плохо с браузерной поддержкой.
Посмотреть и расстроиться можно здесь.

И ещё кое-что

Тэг “preload”. Позволяет указать наиболее приоритетную для загрузки и кэширования часть сайта. Причём это связано с предварительной загрузкой, в том числе — в случае медленного соединения. Прописывается так: <link rel=»preload» href=»/style.css» as=»style» />. Вместо “style.css” может быть иной ресурс, необходимый для скачивания.

Особенное внимание стоит обратить на атрибут “as”. Он помогает браузеру правильно планировать загрузку и определять последовательность элементов в ней. Значения атрибута могут быть следующими: “style” (таблицы и стили), “script” (скрипты), “font” (шрифты) и другие.

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

Если уверены в том, что ресурс потребуется сразу после открытия страницы, ставьте тэг “preload” с “as”. Если элемент будет нужен позже или на следующей странице — тэг “prefetch” (атрибут “as” тоже можно использовать, как и в случае с “DNS-prefetch” и “preconnect”).

Ещё один важный факт: “prefetch” или “preload” не стоит использовать для работы с некоторыми фреймворками. Например, ExtJS. Иначе эффект может быть обратным из-за большого объёма библиотеки.

Вместо заключения

Тэги link — возможность, а не гарант ускорения сайта. В конечном счёте скорость загрузки будет зависеть не от их наличия или отсутствия, а от степени загруженности браузера, приоритетности иных его задач.