Бизнес в зоне

домашнего комфорта

Служба поддержки

katrich.support-desk.ru

09:00 - 21:00

без выходных

Как ускорить загрузку сайтов. Используйте rel = «dns-prefetch»

 SEO продвижение сайта          Обсудить
Как ускорить загрузку сайта
Как ускорить загрузку сайтов. Используйте rel = «dns-prefetch»

Возможно, вы встречали в интернете разные способы оптимизации сайтов, которые … не работали. Однако на этот раз стоит уделить больше времени нашей статье, потому что мы через мгновение представим вам простой, но эффективный метод, как ускорить загрузку сайтов. Благодаря которому вы ускорите свой веб-сайт на целых 87%! Встречайте своего нового ускорителя сайтов rel = «dns-prefetch».

Атрибуты rel в HTML

Мы уже писали немного о атрибутах rel в нашем блоге, помните? Нет, тогда нажмите здесь атрибуты rel = «noopener» и rel = «noreferrer» . Там вы найдете информацию о том, что означает тег rel в HTML. И поскольку rel по-английски означает отношение (отношение), стоит подружиться с rel = «dns-prefetch».

Тег = «dns-prefetch» — твой помощник в ускорении сайтов

Скорость загрузки страницы на сайте имеет большое значение — как в SEO, так и в конверсиях. Каждому клиенту нравится дружественный сайт, который загружается в мгновение ока.

В своих статьях мы еще не упоминали DNS Prefetch , потому что оставили этот метод, чтобы оптимизировать страницу для отдельной статьи. И проверить в целом, как это работает и сказывается на загрузке сайта.

DNS Prefetch — что это и как работает

Проще говоря, DNS Prefetch позволяет использовать тег rel = «dns-prefetch», чтобы  поместить в заголовок страницы информацию для веб-браузера о страницах, для которых он должен это делать. Preconnect, то есть преждевременное соединение с данным сервером до того, как веб-сайт начнет загружать контент, такой как изображения или текст.

Узнайте в статье на блоге, при помощи каких плагинов можно ускорить работу сайта. Это дополнительная информация по ускорению сайта на WordPress/

Почему это так важно? Зачастую веб-сайты ссылаются, например, на Facebook или Google для загрузки различного контента, например шрифтов.

В нормальной ситуации процесс выглядит так:

Упрощенный процесс загрузки сайта
Упрощенный процесс загрузки сайта без DNS Prefetch

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

Второй вариант DNS Prefetch выглядит так:

Упрощенный процесс загрузки сайта с помощью DNS Prefetch
Упрощенный процесс загрузки сайта с помощью DNS Prefetch

В этом варианте с активным DNS Prefetch подключение к внешнему хосту c сайтом происходит в момент первого подключения к целевому веб-серверу. Благодаря этой информации браузер намного раньше ссылается, например на fonts.googleapis.com, что ускоряет загрузку шрифтов.

Как выглядит пример ссылки DNS Prefetch?

<link rel = «dns-prefetch» href = «// {domain_address}»>

Для href = вставьте без www и http / https адрес домена, к которому веб-браузер должен установить более раннее соединение. Поместите этот код в заголовок страницы между <head> и </ head>. Для чего вы можете использовать rel = «dns-prefetch» ?

  • Сокращено время подключения к внешнему хосту.
  • Более короткое время загрузки страницы.
  • Лучшая SEO оптимизация.
  • Лучшее впечатление от использования сайта клиентом.

Использование тега rel = «dns-prefetch»

Использование тега rel = «dns-prefetch» может реально сэкономить до нескольких секунд времени загрузки страницы, особенно если вы используете много внешних ресурсов.

Чтобы упростить эту задачу, мы подготовили для вас готовый код для DNS Prefetch для самых популярных ресурсов, используемых на современных веб-сайтах:

Предварительная загрузка DNS для Facebook:

<link rel = «dns-prefetch» href = «// connect.facebook.net»>

<link rel = "dns-prefetch" href = "// static.ak.facebook.com">
<link rel = "dns-prefetch" href = "// staticxx.facebook.com">
<link rel = "dns-prefetch" href = "// s-static.ak.facebook.com">
<link rel = "dns-prefetch" href = "// fbstatic-a.akamaihd.net">

DNS Prefetch для Google:

<link rel = «dns-prefetch» href = «// fonts.googleapis.com»>

<link rel = "dns-prefetch" href = "// fonts.gstatic.com">
<link rel = "dns-prefetch" href = "// ajax.googleapis.com">
<link rel = "dns-prefetch" href = "// www.google-analytics.com">
<link rel = "dns-prefetch" href = "// www.googletagmanager.com">

DNS Prefetch для WordPress:

<link rel = "dns-prefetch" href = "// stats.wp.com">
<link rel = "dns-prefetch" href = "// pixel.wp.com">
<link rel = "dns-prefetch" href = "// s0.wp.com">

Вставьте все из них или только выбранные коды в раздел HEAD на веб-сайте и протестируйте его, например, с помощью Pingdom Tools — эффект наверняка вас приятно удивит. 

Конечно, в некоторых случаях разница может составлять, например, 0,1 секунды, когда страница хорошо оптимизирована, но иногда мы сокращаем время загрузки, например, с 2,7 до 1,3 секунд , что является отличным результатом и имеет очень положительный эффект в целом на сайт.

DNS Prefetch используется всеми последними веб-браузерами.

Чтобы увидеть настоящий эффект DNS Prefetch, вам нужно очистить кеш (на стороне администратора и браузера).

Если вы ищете дополнительную информацию, также загляните в блог Mozilla о rel = «dns-prefetch» .

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

Дополнительный видео материал по теме

Как увеличить скорость загрузки сайта

Проверенные Способы Заработка в Интернете

ОБРАТИТЕ ВНИМАНИЕ! Рекомендуем перейти по всем четырем ссылкам перечисленных внизу. Здесь собраны схемы заработка, которые принесли десятки тысяч дохода в сети.

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Отправляя сообщение, Вы разрешаете сбор и обработку персональных данных. Политика конфиденциальности.