Что такое 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.
Сохраните изменения, нажав кнопку «Обновить файл». Вы можете проверить источник любой страницы вашего сайта, чтобы убедиться, что эти ссылки доступны в заголовке. Если нет, обязательно очистите кеш на своем сайте и проверьте еще раз.
Теперь вы можете еще раз проверить в Google PageSpeed и других инструментах измерения скорости, что проблема с предварительным подключением отмечена как пройденная или выделена зеленым цветом.
Обратите внимание, что вы не можете использовать тип ссылки предварительного подключения с тегами HTML, такими как ,
и
