Ускорение загрузки изображений и скриптов

Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в <head> страницы, теги <link> с их адресами и методом их получения позволяет сократить время загрузки на 0.2 сек на элемент. Далее представлены возможные варианты:

1

Включает и отключает предварительное получение DNS имен внешних ресурсов, которые используются на сайте.

<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="x-dns-prefetch-control" content="off">
HTML
2

Сообщает браузеру, по каким адресам могут находиться ресурсы и получает их 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">
HTML
3

Также как 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> 
HTML

Атрибут crossorigin используется для внешних ресурсов, он указывает что не нужно отправлять куки тем самым ускоряя подключение.

4

Работает так же, как и preconnect, но браузер уже загружает ресурс.

<link rel="preload" href="//mc.yandex.ru">
HTML

Атрибут as указывает тип ресурса:

<link rel="preload" href="//ajax.googleapis.com/script.js" as="script">
<link rel="preload" href="//ajax.googleapis.com/style.css" as="style">
HTML
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">
HTML
5

Указываем браузеру что этот ресурс потребуется позже и браузер загрузит его с низким приоритетом и поместит в кэш.

<link rel="prefetch" href="//example.com/script.js">
<link rel="prefetch" href="//example.com/style.css">
HTML
6

То же что и prefetch, только с высоким приоритетом.

<link rel="subresource" href="//example.com/script.js">
<link rel="subresource" href="//example.com/style.css">
HTML
01.03.2018, обновлено 15.10.2019
17621
Предыдущая запись Мета-теги для Internet Explorer и Windows
Следующая запись Open Graph

Комментарии 1

Артем Бурлака Артем Бурлака
13 апреля 2021 в 02:03
Хорошая статья на тему загрузки Google fonts
https://csswizardry.com/2020/05/the-fastest-google-fonts/

, чтобы добавить комментарий.

Другие публикации

Примеры использования cURL в PHP
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
242610
+22
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
27075
+8
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
47474
+35
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
30312
+4
Подключение и выполнение JavaScript на странице
Несколько примеров как подключить JS скрипты к web страницам и некоторые тонкости.
9270
-1
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
67722
+27