Что такое Preconnect и как предварительно подключить ресурсы в WordPress?

Подсказки по ресурсам — это тип методов оптимизации WordPress, которые вы можете использовать для повышения производительности вашего веб-сайта на стороне клиента. Эти подсказки сообщают браузерам, как пользователи, скорее всего, будут запрашивать ресурсы, такие как шрифты, изображения и скрипты, при взаимодействии с вашим сайтом. Браузеры могут заранее использовать подсказки ресурсов, предвидя предполагаемое поведение пользователя. Когда браузер обнаруживает эти ресурсы, он будет запрашивать их по мере необходимости. Этот процесс включает в себя поиск в DNS, соединения TLS и HTTP, отправку запроса и последующее получение ответа. Preconnect — это одна из подсказок по оптимизации вашего сайта WordPress. В этой статье мы расскажем больше о предварительном подключении и о том, как предварительно подключить ресурсы на сайте WordPress.

Что такое Preconnect?

Веб-страница содержит несколько внутренних и внешних ссылок. Если вы используете плагины SEO, такие как Yoast SEO, это фактически заставит вас добавить внешнюю ссылку в свой пост, чтобы загорелся зеленый световой сигнал. Однако внешние ссылки, встроенные на вашу страницу, или открытие внешней ссылки с вашей страницы могут быть медленными по разным причинам. Когда пользователь нажимает на внешнюю ссылку, браузеру необходимо установить HTTP-соединение. Для этого ему необходимо выполнить поиск в DNS, создать TCP-соединение и согласовать безопасное TLS-соединение. Чтобы сократить время загрузки внешних ссылок на вашу страницу, вы можете использовать опцию предварительного подключения с метатегом ссылки и выполнять все эти задачи в фоновом режиме.

Preconnect — это способ указать браузерам установить активное HTTP-соединение с внешним доменом, на который вы указали ссылку на своей странице.

Ниже приведены некоторые из основных советов, которые вы можете предоставить браузеру для ускорения работы сайтов WordPress.

Предварительное подключение
Предварительная загрузка
Предварительная выборка
Предварительная выборка DNS
Prerender

В общем, DNS Prefetch и Preconnect выполняют аналогичную функцию поиска DNS внешних ссылок на вашей странице. Однако preconnect также разрешает SSL и инициализирует соединение. Следовательно, более эффективно загружать внешние ресурсы быстрее при нажатии.

Тип ресурсов, которые вы можете предварительно подключить

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

Скрипты вроде jQuery, Google Analytics, Google AdSense и т. Д.
Таблицы стилей, такие как файлы шрифтов из Google Fonts и других сторонних веб-сайтов.
Медиа-файлы, встроенные из сторонних доменов, например видео YouTube

Лучшим практическим примером является предварительное подключение доменов Google Fonts fonts.gstatic.com и fonts.googleapis.com при использовании Google Fonts на вашем сайте.

Проверка проблем с предварительным подключением на вашем сайте

Если вы хотите проверить, есть ли на вашем сайте какие-либо проблемы с предварительным подключением, перейдите в инструмент Google PageSpeed Insights и проверьте свою страницу. Если проблем нет, вы увидите «Предварительное подключение к требуемому источнику» в разделе «Пройденные аудиты», как показано ниже.

Если вы используете шрифты и внешнюю таблицу стилей во всем домене и не используете предварительное подключение, вы увидите это в разделе «Возможности».

Предварительно подключите ресурсы в WordPress

Есть много способов предварительно подключить ресурсы на сайте WordPress. Как правило, вы можете использовать метатег ссылки в разделе заголовка, чтобы добавить эти инструкции. Для этой цели также доступно множество бесплатных и премиальных плагинов для оптимизации производительности WordPress. Мы подробно объясним все эти методы в следующих разделах.

1. Предварительно подключите ресурсы в WordPress вручную с помощью метатегов

Как уже упоминалось, preconnect — это параметр для атрибута rel в метатеге ссылки. Вы можете вручную вставить эти теги ссылок в раздел заголовка для подключения внешних доменов, которые вы часто используете на своем сайте. Давайте возьмем пример, когда у вас есть много видеороликов YouTube, встроенных на ваш сайт. В этом случае просто добавьте следующие метатеги перед концом тега .

<link rel="preconnect" href="https://www.youtube.com">

Это приведет к предварительному подключению youtube.com и инициализации настройки еще до того, как пользователи нажмут или просмотрят видео. Точно так же ниже приведены некоторые из популярных внешних доменов, к которым разработчики тем и плагинов WordPress подключаются для использования общих ресурсов. Убедитесь, что вы используете только те элементы, которые уже используются на вашем сайте, а не все из них.

<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://static.doubleclick.net">
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://googleads.g.doubleclick.net">
<link rel="preconnect" href="https://www.google-analytics.com">

Как видите, вы должны упомянуть атрибут crossorigin для предварительного подключения шрифтов. В противном случае будет выполняться только предварительная выборка DNS вместо предварительного подключения ссылки и для установления соединения. После того, как у вас есть список подсказок ресурсов для предварительного подключения, войдите в панель администратора WordPress. Перейдите в «Внешний вид> Редактор тем» и выберите активную тему. Щелкните файл «header.php» и вставьте код перед закрывающим тегом header .

Добавить метатеги Preconnect в заголовок

Сохраните изменения, нажав кнопку «Обновить файл». Вы можете проверить источник любой страницы вашего сайта, чтобы убедиться, что эти ссылки доступны в заголовке. Если нет, обязательно очистите кеш на своем сайте и проверьте еще раз.

Установите флажок Preconnect в источнике страницы

Теперь вы можете еще раз проверить в Google PageSpeed и других инструментах измерения скорости, что проблема с предварительным подключением отмечена как пройденная или выделена зеленым цветом.

Обратите внимание, что вы не можете использовать тип ссылки предварительного подключения с тегами HTML, такими как ,

2. Предварительно подключите ресурсы в WordPress с помощью бесплатного плагина

Хотя описанный выше метод легко реализовать, у него есть два недостатка. Во-первых, вам нужно знать домены для предварительного подключения, а во-вторых, отредактировать файл header.php. Редактировать файл заголовка вашей темы не рекомендуется, так как изменения будут удалены при обновлении темы. Альтернативный вариант — использовать плагины, такие как вставка кодов в верхние и нижние колонтитулы. Однако вместо этого вы можете найти прямой плагин для предварительного подключения ресурсов. После проверки мы нашли плагин, который поможет вам получить все подсказки по ресурсам. В этой статье мы будем использовать бесплатный плагин «Подсказки о ресурсах перед вечеринкой ». Это позволяет пользователям быстро и автоматически включать подсказки ресурсов, чтобы ускорить время загрузки страницы. Некоторые из подсказок ресурсов, поддерживаемых этим плагином, включают предварительную выборку DNS, предварительную визуализацию, предварительное подключение, предварительную выборку и предварительную загрузку.

После установки и активации плагина из раздела «Плагины» WordPress вы увидите новое меню «Pre * Party» на боковой панели. Для реализации preconnect на вашем сайте WordPress;

Щелкните меню Pre * Party на панели инструментов.
Прокрутите вниз до раздела «Добавить подсказку нового ресурса» и введите внешний домен подсказки целевого ресурса в поле «Домен или URL-адрес». Например, вы можете ввести https://fonts.gstatic.com для Google Fonts или https://www.youtube.com/, если вы встроили видео YouTube на свой сайт.
Установите флажок «Предварительное подключение» и флажок «Crossorigin». Не забудьте выбрать опцию crossorigin только для файла шрифтов и снимите флажок для других ресурсов.
Вы можете оставить поля «как» и «MIME-тип» пустыми. Плагин автоматически добавит MIME-тип в тег ссылки, используя атрибут «type». Обычно атрибут «as» используется для предварительной загрузки, поэтому вы можете оставить его пустым для предварительного подключения доменов.
Нажмите кнопку «Вставить подсказку ресурса» внизу страницы, чтобы применить изменения.

Добавить подсказку о новом ресурсе предварительного подключения

Вы можете управлять всеми созданными подсказками ресурсов на одной странице и удалять их по отдельности или сразу, когда они вам больше не нужны.

Управление всеми предварительно подключенными подсказками ресурсов

Лучшая часть этого плагина заключается в том, что вы можете включить функцию автоматического предварительного подключения вместо добавления ресурсов вручную. Щелкните меню «Pre * Party», выберите вкладку «Настройки», прокрутите вниз и установите флажок «Включить автоматическое предварительное подключение». Прокрутите вниз и нажмите кнопку «Сохранить изменения», чтобы применить новые конфигурации, как показано на изображении ниже.

Включить автоматическое предварительное подключение

Отключите следующий параметр, чтобы разрешить неаутентифицированным пользователям устанавливать подсказки о предварительном подключении, и в любое время вы можете сбросить предварительно подключенные ссылки, нажав кнопку «Сброс».

3. Предварительно подключитесь к WordPress с помощью плагинов Premium.

Многие плагины премиум-класса предлагают предварительное подключение в качестве встроенной функции для ускорения загрузки связанных ресурсов. Однако при использовании этих подключаемых модулей вам придется вручную добавлять эти подсказки к ресурсам. Например, плагин Perfmatters помогает выполнять предварительную выборку, предварительную выборку DNS, предварительную загрузку и предварительное подключение ресурсов, используемых на вашем сайте. Подобно плагину Pre * Party Resource Hints, вы можете ввести имя домена и вставить его в раздел заголовка с тегом ссылки. Вы также можете выбрать crossorigin для предварительного подключения шрифтов.

Включить предварительное подключение в плагине Perfmatters

Заключительные слова

В зависимости от использования и настройки вы можете использовать разные методы для оптимизации вашего сайта WordPress. Некоторые из самых популярных методов оптимизации включают кеширование, плагин SEO и CDN. Однако многие пользователи не используют подсказки ресурсов, такие как предварительное подключение, для ускорения подключения внешних доменов. Как объяснялось выше, вы можете использовать ресурс preconnect на сайте WordPress, вручную вставив код или используя премиум или бесплатный плагин.