Dns prefetch wordpress что это
Обновлено: 06.07.2024
Разработчики постоянно пытаются повысить производительность глобальной сети, начиная с браузеров, заблаговременно загружающих страницы еще до того, как будет введен поисковой критерий, до приоритизации контента на видимой части страницы. HTML уже сделал несколько шагов в сторону упрощения этого процесса с помощью rel=«next» и rel=«previous» для создания подсказок для браузера, который сможет с их помощью заранее скрыто загружать страницы еще до совершения какого-либо действия со стороны пользователя.
Не так давно W3C добавили несколько новых функций в link как части спецификации Resource Hints, которые обеспечивают более разумную предварительную загрузку контента сайта, потенциально повышая скорость загрузки страницы на сайтах, на которых они используются.
Кто стучится в дверь ко мне
Поиск DNS – процесс поиска доменного имени в сети и его перевода в IP-адрес – может занимать от десяток до сотен миллисекунд. Если пользователь уже на вашем сайте, его браузер уже знает его положение… но если вы загружаете ресурсы с других сайтов на свой страницу, браузеру нужно время на обработку информации DNS по каждому из них, так как он находит их в HTML. Вы можете предвосхитить этот процесс, поместив dns-prefetch для внешних сайтов в своей страницы.
Пример использования dns-prefetch
Одним из общепризнанных внешних ресурсов является скрипт Google Analytics, который используется для отслеживания поведения посетителей на вашем сайте. Вызов скрипта обычно размещают в самом конце страницы:
Потенциально это ускоряет загрузку страницы по частям для каждого URL, указанного в dns-prefetch, так как браузер уже «знает», куда ему нужно пойти, чтобы достать ресурс, пока до него дойдет парсер.
Открываем дверь
preconnect помогает продвинуться еще дальше. Он делает все то же, что и dns-prefetch, но при этом добавляет несколько дополнительных согласований в отношении интернет-соединения; если dns-prefetch «стучится», чтобы проверить расположение сайта, то preconnect открывает дверь.
Пример использования preconnect
Статьи на сайте оригинала иногда используют ресурсы, сохраненные на сервере Amazon S3, вызываемые в ситуациях, когда в страницу встраивается демо CodePen. Чтобы ускорить поиск этих файлов, в добавляется preconnect:
Обратите внимание, что в коде не указывается определенный файл для preconnect, а вместо этого сообщается расположение, где можно найти ресурсы, которые возможно будут использоваться на данной странице.
Реализуем выборку
Еще один шаг вперед – это prefetch (предварительная выборка), предназначенная для загрузки ресурса, который, скорее всего, будет использоваться в следующей навигации пользователя. Как правило, это страница, на которую, скорее всего, перейдет пользователь после той, на которую он смотрит в данный момент.
Пример использования prefetch
prefetch наиболее похож на rel=«previous» и next, и в большинстве случаев будет использоваться таким же образом. В случае, описанном в данной статье, наиболее вероятной целью для пользователя будет предыдущая страница:
Не забывайте учитывать главную страницу своего сайта в качестве потенциальной цели предварительной выборки. Веб-разработчики часто подсознательно допускают, что посетители всегда будут приходить через главную страницу их сайта, но во времена Google это не всегда так.
Вам может захотеться добавить каждую возможную страницу в качестве предварительной выборки. Но старайтесь оставаться порядочным жителем сети и не делать этого: браузер, скорее всего, проигнорирует вас, или даже хуже – приведет к снижению производительности, если вы нафлудите в нем слишком большим количеством запросов по предварительным выборкам. Включайте только те страницы, на которые скорее всего перейдет пользователь с определенной страницы.
Спецификация Resource Hints предлагает вариант добавления статистической вероятности того, что пользователь перейдет к определенному ресурсу, позволяя вам настроить поведение предварительной выборки; насколько я знаю, на данный момент ни один браузер не поддерживает эту функцию.
Загрузка без блокировки
Также можно запустить предварительную, высокоприоритетную, не блокирующую отрисовку выборку ресурса, который используется на текущей странице, с помощью ключевого слова preload.
Пример использования preload
Хорошим примером использования preload являются веб-шрифты: как правило, шрифты загружаются только тогда, когда они будут определены в CSS, что зачастую приводит к страшному «сборищу контента без оформления», так как страница отрисовывается сначала с помощью стандартных типов шрифтов, и только потом, при загрузке, перерисовывает страницу с помощью веб-шрифта. Чтобы избежать этого, мы можем указать, чтобы шрифт загружался до того, как мы достигнем CSS. В случае с данным сайтом, это будет шрифт Libertad, используемый для оформления текста тела страницы:
Обратите внимание на опциональный атрибут as, который указывает браузеру, какой тип ресурса загружается.
Отрисовка
И последний способ – запросить браузер одновременно найти и полностью отрисовать страницу «за кулисами», делая ее доступной в момент, когда пользователь нажимает на связанную с ней ссылку. Понятно, что такой подход следует использовать крайне редко. Он может подойти для посадочной страницы, на которой кнопка открывает полноэкранный опыт, создающий полный эффект присутствия.
Пример использования Prerender
Одним из наиболее очевидных способов применения на данном сайте являются демо, как, например, для видео по фону страницы в HTML5. На странице статьи мы могли бы добавить:
…что бы предварительно загружалось и отрисовывалось демо по мере того, как пользователь читает статью.
Такой вид поведения, как правило, достигался за счет использования предзагрузчиков JavaScript, а для сложных сайтов до сих пор может потребоваться код JS. Но для более простых случаев достаточно эффективным будет и prerender.
Подсказки по ресурсам как инвестиция
Крайне важно понимать, что все это просто подсказки для браузера, а не точные указания. Браузер может последовать или не последовать таким подсказкам, основываясь на пропускной способности сети, использовании памяти, поддержке поставщика и прочих факторах. Как таковые, их следует рассматривать как инвестиции, а не как гарантию повышения эффективности, и, конечно же, не как «панацею» от всех проблем сайта или низкой скорости загрузки страницы.
Учитывая все это, существует несколько факторов, которые могут улучшить поведение страницы в процессе предзагрузки:
- Эффективные подсказки по ресурсам полагаются на внимательный учет показателей страницы. Нет ничего плохого в угадывании, куда пользователи могут перейти после посещения страницы на вашем сайте, но ожидания сильно отличаются от фактических данных. Если вы запускаете новый или обновленный сайт, догадки будут работать хорошо; но после недели или более сборов данных, аналитические данные по сайту необходимо использовать для: (а) формирования действий пользователя за счет изменения дизайна сайта, чтобы направлять посетителей туда, куда вы хотите (и куда направлены ваши подсказки по ресурсам) или (b) изменения подсказок, чтобы они точно отражали поведение пользователя.
- Не только для браузеров. Вместе с <link rel=«next» …> и rel=«previous», подсказки по ресурсам предоставляют поисковым движкам дополнительные возможности оценивать и связывать контент. Например, Google может использовать next и previous, чтобы помочь определить организационную структуру сайта и приоритизировать результаты для первой страницы связанными рядами.
Заключение
Будучи частью постоянного стратегического акцента на производительность сайта, подсказки по ресурсам могут оказаться достаточно эффективной техникой для повышения скорости загрузки страницы; для достижения оптимального результата их можно комбинировать со всесторонней профессиональной контент-стратегией, которая сообщит вам, какая информация и в каком месте сайта должна находиться.
Продолжаю статьи на тему SEO и оптимизации ресурсов. Начиная с версии 4.6 в шапке сайта WordPress появились ссылки dns-prefetch, обозначающие загрузку некоторых элементов, каких, поговорим в тексте.
Что такое dns-prefetch
Данный функционал предназначен для подключения предварительной загрузки некоторых элементов WordPress. Например, в исходном коде на некоторых сайтах можно найти строчки.
Видим загрузка идет через тег link, что указывает на принадлежность файлов верстки и динамических элементов. В моем случае, есть два link:
По задумке разработчиков они будут загружаться, но никак не тормозя систему, потому что поисковые системы, браузеры, если они уже были на сайте, будут знать что тут используются гугл шрифты. Для лучшего понимания материала приложу авторское видео.
Нужно ли использовать dns-prefetch
По собственным замерам и отзывам специалистов в интернете, dns-prefetch бесполезное включение в ядро WordPress. Да при первой генерации страницы браузером, до формирования кэша, ресурс грузиться на крохотные доли секунды быстрее.
Поэтому то что не приносит пользы – следует удалять. Это внешние ссылки на другие ресурсы интернета, которые индексируются ПС.
Удаление dns-prefetch с помощью Clearfy PRO
Отмечу что инструмент улучшит блог еще по 49 пунктам, включая очистку, ускорение, логирование ошибок, настройка перенаправлений, повышение SEO параметров, например, удалить комментарии вордпресс. Для наших читателей приготовили промо в 15%.
Плагин Remove DNS Prefetch
Плагин Remove DNS Prefetch не имеет настроек и устанавливается стандартным поиском.
Устанавливаем и активируем, дополнение автоматически удалит из head все ссылки типа dns-prefetch, настроек нет.
Удалить используя код без плагина
- Переходим Внешний вид > Редактор тем
- Выбираем файл Function.php
- Вниз помещаем код
- Обновляем файл
В итоге получаем, что линки бесполезное дополнение в WordPress и для удаления не требуется много усилий, но выведу таблицу.
С версии 4.0 появился dns-prefetch в WordPress, еще один мусорную ссылку от которой нет пользы, но добавляет лишнее подключение в head. Довольно странное включение, потому что пользы почти нет, а мусор есть.
Что это такое dns-prefetch
Dns-prefetch эта запись для ленивой подгрузки скриптов, контента и других элементов. То есть они будут подгружаться только после предварительного отображения интерфейса ресурса. Это хорошо сказывается на скорости сайта, сначала загружается контент, а потом все остальное, так они выглядят в исходном HTML. Видим атрибуты rel и href, говоря о том что загрузка идет с внешнего источника, а не с хостинга.
На снимке показаны две строчки, они стандартные: первая – гугл шрифты, вторая – это домен s w org смайликов emoji, которые нужно отключать. Обычно dns-prefetch больше, они отображаются из-за плагинов, не очень качественных шаблонов и внешних скриптов.
Пользы нет, но они загружают какой-то код для ДНС доступа, заставляют поисковики сканировать эти файлы, захламляют head и никакой прибавки к скорости не приносят.
Как отключить dns-prefetch плагином Remove DNS Prefetch
Есть хороший плагин WordPress не требующий настроек, нужно просто поставить и он начинает работать называется Remove DNS Prefetch . Так выглядит при поиске из админки. После установки проверяйте отсутствует ли данные теги ссылки в Link.
Удалить в Clearfy PRO
Универсальный Clearfy умеет почти все, а то что не знает, то будет добавлено в обновлениях, например убрать jquery migrate. Есть раздел по отключению директивы dns prefetch, но с некоторыми уточнениями.
Отмечу что он оптимизирует сайт еще по 44 пунктам сам WordPress, очищая и закрывая дыры в безопасности и SEO. Для посетителей WPtemplate выдаю промо, жмите на кнопку.
Убрать с помощью кода в function
Почти любую строчку можно отключить в WordPress используя хуков. Представленный ниже код вставляете в файл function php активного шаблона. Только используйте FTP соединение, чтобы сразу при неисправности отменить изменения.
Аналогично можно стереть WLW manifest. Нажимаем комбинацию клавиш в браузере Ctrl+u просматриваете исходный код блога вордпресс, и удостоверяетесь что dns prefetch удален.
Если вы занимаетесь оптимизацией своего сайта или разработкой тем на WordPress, то могли увидеть в коде шапки вашего сайта ссылки dns-prefetch. Многие задаются вопросом, что такое dns-prefetch и как удалить его из кода WordPress. Давайте разберем что это такое и нужно ли его удалять.
После одного из обновлений WordPress, в коде шапки в части <head></head> появилась одна или несколько непонятных ссылок dns-prefetch. Выглядит это примерно так:
Зачем выводится ссылка dns-prefetch?
Есть ли ускорение?
В теории и в какой то мере на практике - да. Но, не все так гладко, как может показаться. Вебмастера заметили, что когда страница грузится в первый раз, то, может, ускорение на сотую миллисекунду есть, но потом, когда в кэше браузера уже хранится информация, данные ссылки заставляют игнорировать кэш и заново подключаться к заданным ресурсам. Как вы понимаете, это никак не ускоряет работу. Так же многие вебмастера попросту отключили использование emoji на своем и им незачем dns-prefetch. В итоге получается что особого толку от них нет.
Нужно ли удалять dns-prefetch
Если вы не занимаетесь всевозможным ускорением, целым комплексом изменений WordPress, то удалять ссылки dns-prefetch не имеет смысла. Прироста производительности вы не увидите. Смысла заморачиваться с этим нет. если не понятно что и для чего.
Как удалить dns-prefetch
Удалить dns-prefetch очень легко, все что нужно открыть файл пользовательских функций, вашей текущей темы - function.php и в самый конец перед закрывающим тегом PHP ?>, добавить одну строку. Если его нет, то просто в самый конец.
Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было.
Если не хотите вносить изменения в тему, можно установить плагин Remove DNS Prefetch. Но есть ли смысл ставить плагин, ради такой мелочи. Он больше нагрузит, чем ускорит.
Вот так все быстро и просто. Если вас интересует еще материал об удалении "лишнего" кода из шапки сайта на WordPress, то можете прочитать статью - Удаляем лишние теги в шапке WordPress.
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
Изучая функционал, по умолчанию предоставляемый WordPress`ом, нельзя не упомянуть и про DNS Prefetch. Разбираемся: что это такое, зачем нужно и стоит ли удалять.
Что такое DNS Prefetch?
Заботясь о первичной оптимизации сайта, создатели WordPress предусмотрели облачную загрузку шрифтов “на лету” с google fonts, а также импортировали библиотеку смайликов. Как правило, этим никто не пользуется и только утяжеляет запись ненужным кодом, создавая лишнюю нагрузку на хостинг.
Вы можете сами найти в теге <head>, сформированным WordPress найти атрибут DNS Prefetch:
Такой мусорный код никак не помогает сайту, потому что обычно используется несколько шрифтов, а использование смайлов вообще сошло на нет. Поэтому самым верным решением будет удалить его и увеличить скорость загрузки страницы.
Как подобрать альтернативу DNS Prefetch?
Быстрая подгрузка шрифтов, легкие страницы и другое – все это можно реализовать при помощи плагинов кэширования, который не засоряют страницу, а наоборот делают страницы легкими, за счет сохранения их в кэше и открывает его браузеру.
Из самых популярных и используемых: WordPress Rocket и W3 Total Cache. С самого начала стоит убрать неиспользуемые теги, особенно подгружающие что-либо извне, как днс.
Правильно удаляем DNS Prefetch
Очистить сайт не так сложно, как кажется. Разница только в методах: новичкам лучше использовать дополнения, а опытным вебмастерам можно и оперировать исходным кодом.
Выключение ссылки через Remove DNS Prefetch for WordPress
Ничем не выделяющийся модуль, решающий единственную задачу. Главный его минус – необновляемость, то есть разработчики его не поддерживают. Из-за внедрения новых эксплойтов, ваш блог может подвергнуться атакам.
Отключить DNS Prefetch через Clearfy PRO
Базовый SEO плагин для WordPress, который использует подавляющее количество вебмастеров. С его функционалом можно устранить все заводские проблемы WP. Среди таких – функция отключения подгрузки шрифтов и смайликов.
Найти ее можно в разделе “Код” в конфиге расширения (левое боковое меню в админке).
Отключить через PHP
Имея опыт за плечами, можно прибегнуть также к ручному редактированию. Для этого перейдите в директиву темы и откройте файл functions.php или воспользуйтесь встроенным “Редактором тем”, находящимся во вкладке “Внешний вид”. Затем вставьте этот элемент после завершения предыдущей функции:
Если продолжать исследовать предварительный конфиг движка, развертываемый на домене, то можно начать выявлять много изъянов, которые требуется исправлять. После исправления технических недочетов – на ресурс пойдет больше трафика, нагрузка на сервер снизится и позиции начнут расти.
Читайте также: