Функция wp_resource_hints() выводит HTML-теги <link> в <head> для улучшения производительности веб-страницы, предоставляя браузеру подсказки для предвыборки ресурсов, пререндеринга страниц, предварительной загрузки DNS, а также установления соединений. Это помогает ускорить загрузку веб-сайта за счет выполнения необходимых операций заранее, до того как они будут востребованы.
wp_resource_hints();Функция wp_resource_hints() позволяет указать браузеру следующие операции:
- DNS-prefetch — предварительное разрешение DNS имен;
- Preconnect — установление соединений для ресурса (включая DNS, TCP и TLS);
- Prefetch — загрузка ресурса в фоновом режиме для последующего использования;
- Prerender — рендеринг страниц, которые могут понадобиться пользователю.
В WordPress эта функция автоматически добавляется к действию wp_head, что означает, что подсказки для браузера выводятся по умолчанию, например, для внешних скриптов и эмодзи. Для управления этим механизмом можно использовать фильтры.
Основные принципы работы
Функция вызывается внутри WordPress через хук:
add_action( 'wp_head', 'wp_resource_hints', 2 );
Она использует внутренние механизмы для добавления нужных <link> тегов в <head> HTML-документа.
Пример 1: Как правильно отключить DNS-prefetch для s.w.org (emoji)
С версии WordPress 4.6.0 был введен специальный фильтр emoji_svg_url, который позволяет отключить предвыборку для emoji, не удаляя другие полезные ссылки.
// Удаление DNS-prefetch для WP Emoji из шапки сайта
add_filter( 'emoji_svg_url', '__return_false' );
Этот фильтр предотвращает добавление ссылки на DNS-prefetch для с.w.org, что может быть полезно, если на сайте не используются эмодзи.
Пример 2: Добавление инструкций prefetch для кастомных URL
Если вам нужно вручную добавить инструкции для предвыборки, предрендеринга или других операций для определенных URL, вы можете использовать фильтр wp_resource_hints.
add_filter( 'wp_resource_hints', 'custom_resource_hints', 10, 2 );
/**
* Добавление кастомных ресурсов для предвыборки и других операций.
*
* @param array $urls Массив ресурсов и их атрибутов.
* @param string $relation_type Тип отношения, например 'dns-prefetch', 'preconnect', 'prefetch', 'prerender'.
*
* @return array
*/
function custom_resource_hints( $urls, $relation_type ) {
if ( 'dns-prefetch' === $relation_type ) {
$urls[] = 'https://example.com';
}
if ( 'preconnect' === $relation_type ) {
$urls[] = 'https://another-example.com';
}
if ( 'prefetch' === $relation_type ) {
$urls[] = 'https://yet-another-example.com/resource.js';
}
if ( 'prerender' === $relation_type ) {
$urls[] = 'https://example.com/page-to-prerender';
}
return $urls;
}
Результат в <head> будет выглядеть так:
<link rel='dns-prefetch' href='https://example.com' />
<link rel='preconnect' href='https://another-example.com' />
<link rel='prefetch' href='https://yet-another-example.com/resource.js' />
<link rel='prerender' href='https://example.com/page-to-prerender' />Пример 3: Удаление ненужных DNS-prefetch правил
В некоторых случаях может потребоваться удалить определенные правила dns-prefetch, если они не нужны или мешают работе сайта. Например, вам нужно удалить DNS-prefetch для домена external.com:
add_filter( 'wp_resource_hints', function( $urls ) {
foreach ( $urls as $key => $url ) {
if ( str_contains( $url, 'external.com' ) ) {
unset( $urls[ $key ] );
}
}
return $urls;
} );
Этот фильтр проходит по каждому URL, находящемуся в массиве $urls, и удаляет из него любые ссылки, которые содержат домен external.com.
Пример 4: Оптимизация для Google Fonts
Если ваш сайт использует Google Fonts, вы можете ускорить их загрузку, добавив preconnect к Google Fonts:
add_filter( 'wp_resource_hints', function( $urls, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$urls[] = 'https://fonts.googleapis.com';
$urls[] = 'https://fonts.gstatic.com';
}
return $urls;
}, 10, 2 );
Это позволит браузеру заранее установить соединение с серверами Google Fonts, что ускорит загрузку шрифтов.
Пример 5: Использование разных атрибутов для ресурсов
Иногда вам нужно добавить ресурсы с дополнительными атрибутами, такими как crossorigin или as для ресурсов, загружаемых через prefetch:
add_filter( 'wp_resource_hints', function( $urls, $relation_type ) {
if ( 'prefetch' === $relation_type ) {
$urls[] = array(
'href' => 'https://example.com/style.css',
'as' => 'style',
'crossorigin' => 'anonymous',
);
}
return $urls;
}, 10, 2 );
В итоге в <head> появится тег:
<link href='https://example.com/style.css' as='style' crossorigin='anonymous' rel='prefetch' />Отключение wp_resource_hints
Хотя иногда может показаться, что проще полностью отключить wp_resource_hints, этого делать не рекомендуется, поскольку эта функция полезна для улучшения производительности сайта.
Пример неправильного отключения:
remove_action( 'wp_head', 'wp_resource_hints', 2 );
Это полностью уберет все подсказки, что может негативно сказаться на производительности. Лучше использовать фильтры для точечного изменения правил, как показано в примерах выше.
Заключение
Функция wp_resource_hints() — это мощный инструмент для улучшения производительности сайта. Она помогает браузерам быстрее загружать страницы за счет предварительных действий, таких как DNS-prefetch, preconnect, prefetch и prerender. Используя фильтры WordPress, вы можете гибко настраивать и управлять этими подсказками для повышения скорости загрузки сайта.