Использование rel=»preconnect» для повышения производительности

Использование rel=preconnect для повышения производительности

От автора: добавление в <link> информации rel=preconnect сообщает браузер о том, что ваша страница намеревается установить соединение с другим доменом и что вы хотите, чтобы процесс начался как можно скорее. Ресурсы будут загружаться быстрее, потому что процесс установки будет уже завершен к тому времени, когда браузер запросит их.

Эта диаграмма прекрасно иллюстрирует процесс:

Использование rel=preconnect для повышения производительности

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Для всех доменов, которые не являются основным доменом, с которого вы загружаете документ. Беглый взгляд на ресурсы CSS-Tricks прямо сейчас дает:

Это будет 14 дополнительных тегов в первых нескольких пакетах данных при каждом запросе на этом сайте. Звучит как однозначное преимущество, но я бы хотел проверить это, прежде чем приступить к делу.

Энди Дэвис провел недавно несколько экспериментов:

Так что же может изменить preconnect?

Я использовал HTTP-архив, чтобы найти пару сайтов, которые применяют Cloudinary для своих изображений, и протестировал их без изменений, а затем с введенным сценарием предварительного подключения. Каждый тест состоял из девяти запусков с использованием Chrome, эмулирующего мобильное устройство и профиль кабельной сети.

Для первого сайта заметно очевидное улучшение: основное фоновое изображение загружается на полсекунды быстрее (вверху), чем на сайте без изменений (внизу).

Использование rel=preconnect для повышения производительности

Этот материал заставляет меня думать о Instant.page (который только что вышел в версии 2 ), он представляет собой небольшой причудливый скрипт, который предварительно загружает вещи, основанные на взаимодействиях. Теперь это расширение браузера (FasterChrome), которое я пробовал. Не могу сказать, что замечаю огромную разницу, но я почти всегда работаю на быстрых интернет-соединениях.

Автор: Chris Coyier

Источник: https://css-tricks.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

HTML5: основы

Изучите HTML5 с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий