Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в <head>
страницы, теги <link>
с их адресами и методом их получения позволяет сократить время загрузки на 0.2 сек на элемент. Далее представлены возможные варианты:
Включает и отключает предварительное получение DNS имен внешних ресурсов, которые используются на сайте.
Сообщает браузеру, по каким адресам могут находиться ресурсы и получает их DNS.
Также как dns-prefetch
получает DNS, но идет дальше и устанавливает соединение с ресурсом.
<link rel="preconnect" href="//ajax.googleapis.com" crossorigin>
<link rel="preconnect" href="//google-analytics.com" crossorigin>
<link rel="preconnect" href="//mc.yandex.ru" crossorigin>
Атрибут crossorigin
используется для внешних ресурсов, он указывает что не нужно отправлять куки тем самым ускоряя подключение.
Работает так же, как и preconnect
, но браузер уже загружает ресурс.
Атрибут as
указывает тип ресурса:
<link rel="preload" href="//ajax.googleapis.com/script.js" as="script">
<link rel="preload" href="//ajax.googleapis.com/style.css" as="style">
image |
Изображения |
script |
JS файлы |
style |
CSS файлы |
font |
Шрифты |
audio |
Аудио файлы |
video |
Видео файлы |
track |
Файлы субтитров для <video> |
document |
HTML-документы для <iframe> |
embed или object |
Флеш и другие ресурсы для <embed> |
fetch |
JSON файлы |
Атрибут crossorigin="anonymous"
– используется для внешних ресурсов, ускоряет подключение т.к. не передаются cookie, сертификат и т.д.
Указываем браузеру что этот ресурс потребуется позже и браузер загрузит его с низким приоритетом и поместит в кэш.
То же что и prefetch
, только с высоким приоритетом.
https://csswizardry.com/2020/05/the-fastest-google-fonts/