Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в <head> страницы, теги <link> с их адресами и методом их получения позволяет сократить время загрузки на 0.2 сек на элемент. Далее представлены возможные варианты:
Включает и отключает предварительное получение DNS имен внешних ресурсов, которые используются на сайте.
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="x-dns-prefetch-control" content="off">Сообщает браузеру, по каким адресам могут находиться ресурсы и получает их DNS.
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//mc.yandex.ru">Также как 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, но браузер уже загружает ресурс.
<link rel="preload" href="//mc.yandex.ru">Атрибут 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, сертификат и т.д.
<link rel="preload" href="//ajax.googleapis.com/script.js" as="script" crossorigin="anonymous">
<link rel="preload" href="//ajax.googleapis.com/style.css" as="style" crossorigin="anonymous">Указываем браузеру что этот ресурс потребуется позже и браузер загрузит его с низким приоритетом и поместит в кэш.
<link rel="prefetch" href="//example.com/script.js">
<link rel="prefetch" href="//example.com/style.css">То же что и prefetch, только с высоким приоритетом.
<link rel="subresource" href="//example.com/script.js">
<link rel="subresource" href="//example.com/style.css">
https://csswizardry.com/2020/05/the-fastest-google-fonts/