tgoop.com/andrew_r_notes/77
Last Update:
TL; DR к статье https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints
Прежде чем обратиться к какому-то ресурсу, браузеру нужно установить соединение: определить IP-адрес хоста и провести TCP/TLS-рукопожатия. При плохих условиях на это могут уйти сотни миллисекунд.
На страницах сайта могут использоваться ресурсы с внешних хостов, например, шрифты с Google Fonts или видео с YouTube. Эти ресурсы чаще всего загружаются отложенно: шрифты начинают загружаться после их обнаружения в таблице стилей, превью для видео с ютуба грузится после инициализации плеера. Чтобы сократить время загрузки этих ресурсов, можно указать браузеру, с каких хостов вы собираетесь загружать ресурсы, и он заранее установит соединения с этими хостами. Если вы используете шрифты с Google Fonts, пропишите в <head> такую строчку:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Атрибут
crossorigin требуется именно для загрузки шрифтов (https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements).Если на странице есть плеер ютуба, пропишите в
<head> предыдущую подсказку (плеер использует Roboto с Google Fonts) и ещё четыре подсказки:<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://i.ytimg.com">
<link rel="preconnect" href="https://i9.ytimg.com">
<link rel="preconnect" href="https://s.ytimg.com">
С тем же успехом можно добавлять подсказки и для других хостов.
BY Заметки Андрея Романова
Share with your friend now:
tgoop.com/andrew_r_notes/77