Авг

Оптимизируем WordPress header и удаляем лишний код

Если вы интересовались вопросом оптимизации wordpress кода, то наверняка сталкивались с разными советами по редактированию файла header.php. В нем генерируются значения блока HEAD для веб-страниц сайта. Самые простые рекомендации заключались в замене вызова стандартных функций, например, bloginfo(‘charset’) на конкретные значения charset=UTF-8. Однако позже оказалось, что выигрыш производительности в ходе данных действий по сравнению с тем же Lazy Load плагинами не так уж велик. Дело в том, что все основные значения в HEAD WordPress считывает из базы всего за одно обращение к ней. Сегодняшние подсказки по улучшению вордпресс header будут куда более полезными и эффективными.

Давайте внимательно посмотрим на исходный код в HEAD обычной страницы/поста. И параллельно сравним его с файлом header.php в WordPress шаблоне. Очевидно, что кроме парочки параметров, вызова Javascript скриптов и CSS результирующий HTML содержит много других дополнительных строк. Они автоматически генерируются в процессе использования разных плагинов на вашем сайте. Иногда финальный код получается ну очень большим.

Безусловно, многие из этих функций жизненно необходимы для корректной работы модулей, однако есть и такие, от которых можно избавиться. Самый простой пример — использование библиотеки jQuery. Некоторые плагины, как и сама система, вставляют код ее вызова в wordpress header. Как следствие, у вас может подгрузиться несколько дублирующих скриптов, еще и не с самой актуальной версией.

Второй пример хорошо просматривается для плагина WP-PageNavi (разбиение блога на страницы). В ходе работы модуль размещает свой CSS в шапку сайта, хотя более эффективно будет перенести все стили в базовый style.css. Причем избавиться от кода модуля так просто не получится, поможет лишь его деактивация (что разумеется, не вариант). Возможно, после версии 2.5.0 создатели внесли некоторые изменения в код, но раньше все работало именно так.

Базовая оптимизация wordpress header

Большинство «дополнительных вставок» блока HEAD реализуется системой с помощью хуков для wp_head. Если посмотрите код файла header.php в wordpress шаблоне, то наверняка найдете ее там. Просто убрать вызов функции не получится, так как в результате удалятся не только «ненужные вставки», но и важный код, без которого сайт работать не будет.

К счастью, вы можете безболезненно деактивировать некоторые последствия вызова wp_head. Избавиться от лишних элементов, которые не планируете использовать, и провести оптимизацию wordpress кода можно с помощью хаков для functions.php. Открываете файл функций и пишите туда следующий код:

remove_action('wp_head','feed_links_extra', 3); // убирает ссылки на rss категорий
remove_action('wp_head','feed_links', 2); // минус ссылки на основной rss и комментарии
remove_action('wp_head','rsd_link');  // сервис Really Simple Discovery
remove_action('wp_head','wlwmanifest_link'); // Windows Live Writer
remove_action('wp_head','wp_generator');  // скрыть версию wordpress

Также можно скрыть разные линки при отображении постов блога (следующий, предыдущий, короткий url).

remove_action('wp_head','start_post_rel_link',10,0);
remove_action('wp_head','index_rel_link');
remove_action('wp_head','adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action('wp_head','wp_shortlink_wp_head', 10, 0 );

Удаление JSON API ссылок:

remove_action( 'wp_head', 'rest_output_link_wp_head');
remove_action( 'wp_head', 'wp_oembed_add_discovery_links');
remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 );

Как я уже говорил выше про jQuery, в коде страницы библиотека может вызываться несколько раз (совместно с другими модулями) + версия используется не самая актуальная. Убрать скрипт из вордпресс header через remove_action не получится, но есть другой метод. В блоге найдете подробную статью про обновление и подключение jQuery в WordPress, а если говорить вкратце, то чтобы убрать вызов скрипта нужен такой код:

if ( !is_admin() ) { 
	wp_deregister_script('jquery'); 
}

В данном случае хак срабатывает только для самого сайта (фронтэнда), не влияя на админку. Если вызывать функцию wp_deregister_script без условия IF, то в панели управления WP перестанут работать разные выпадающие меню и некоторые другие опции. Теоретически, можно было бы поместить код wp_deregister_script в header.php вместо functions.php, и тогда он «не заденет» бэкэнд. Но лучше использовать вараинт, указанный выше.

Напоследок еще 2 фишки. Недавно я публиковал статью про выключение Emoji. Короткую версию кода найдете ниже, хотя лично у меня сработала только расширенная, описанная в посте.

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

Также в блоге публиковал обзор модуля Disable позволяющего убрать Self Pingback и некоторые другие данные из в wp head в wordpress. Можно совмещать его с хаками через functions.php — так надежнее, плагин отключает не все.

Убираем лишний код плагинов и темы

Кроме самой системы код в блок HEAD добавляют разные модули. Иногда отключение данной фишки находится в настройках плагинов, но к сожалению, чаще всего разработчики не предусматривают подобную гибкость для своих решений. Поэтому дабы изменить wordpress header можно попробовать некий алгоритм.

Во-первых, вы должны внимательно посмотреть основной php файл того плагина, хуки которого собираетесь деактивировать. Там должна встречаться конструкция по типу:

add_action('wp_head', 'plugin_function_here');

Нашли? — хорошо. Теперь дабы избавиться от вызова функции добавляем в файл functions.php следующую строку:

remove_action('wp_head', 'plugin_function_here');

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

WP-Syntax

Фукция ниже позволяет убрать подключение стилей для подсветки синтаксиса программного кода в тексте. Само содержимое файла wp-syntax.css небольшое, поэтому можно просто добавить в стандартный style.css.

remove_action( 'wp_head','wp_syntax_head');

qTranslate-X

Модуль добавляет в wordpress header информацию о версии, которую можно скрыть.

remove_action('wp_head','qtranxf_wp_head_meta_generator');

Contact Form 7

Для Contact Form 7 решение чуть более сложное. Логично, что вызов плагина не нужен на страницах, где этой самой формы нет. Он лишь создает дополнительную нагрузку. Исправляем ситуацию и проведем оптимизацию wordpress кода с помощью следующих строк:

// Deregister Contact Form 7 styles
 
add_action( 'wp_print_styles', 'aa_deregister_styles', 100 );
function aa_deregister_styles() {
    if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}
 
// Deregister Contact Form 7 JavaScript files on all pages without a form
add_action( 'wp_print_scripts', 'aa_deregister_javascript', 100 );
function aa_deregister_javascript() {
    if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

WP-PageNavi

Бывают уникальные случаи, когда использование remove_action для wp_head не срабатывает. Так, например, с тем же WP-PageNavi (версии 2.5.0), где нет явного вызова функций в wp_head, но плагин все равно грузит свой файл стилей. Если внимательно рассмотреть исходный код wp-pagenavi.php, то найдете там некую функцию «Enqueue PageNavi Stylesheets», которая добавляет стили через add_action. Соответственно чтобы прекратить этот вызов размещаем в файле функций fuctions.php строку:

remove_action('wp_print_styles', 'pagenavi_stylesheets');

Yet Another Related Posts Plugin

Стили плагина похожих постов YARPP можно включить в style.css, убрав загрузку нескольких лишних файлов. Хак избавляется от кода модуля в header и footer: ликвидируются файлы стилей widget.css, related.css и yarpp-thumbnails-yarpp-thumbnail.

add_action( 'wp_print_styles', 'tj_deregister_yarpp_header_styles' );
function tj_deregister_yarpp_header_styles() {
   wp_dequeue_style('yarppWidgetCss');
   // Следующая строка нужна, если related.css грузится в header, а в футере отключен
   wp_deregister_style('yarppRelatedCss'); 
}
 
add_action( 'wp_footer', 'tj_deregister_yarpp_footer_styles' );
function tj_deregister_yarpp_footer_styles() {
   wp_dequeue_style('yarppRelatedCss');
   wp_dequeue_style('yarpp-thumbnails-yarpp-thumbnail');
}

Для шаблонов/тем

Если вам нужно убрать лишние стили или скрипты из темы, то можете воспользоваться функциями wp_dequeue_style и wp_deregister_script. Ниже привожу пример кода, который мне помог решить соответствующую задачу. Названия скриптов нашел в итоговом HTML и разных файлах шаблона.

add_action( 'wp_enqueue_scripts', 'remove_some_stylesheet', 20 );
function remove_some_stylesheet() {
    wp_dequeue_style('flexslider');
    wp_dequeue_style('owl-carousel');
    wp_dequeue_style('owl-theme');
    wp_dequeue_style('font-awesome');
    wp_dequeue_style('wp-pagenavi');
 
    wp_deregister_script('flexslider');
    wp_deregister_script('googlemapapis');
    wp_deregister_script('easing');
    wp_deregister_script('jflickrfeed');
    wp_deregister_script('playlist');
    wp_deregister_script('jplayer');
}

В общем, вы должны были заметить некий глобальный принцип работы с «ненужными вызовами» для wp_head — находите соответствующую функцию плагина/темы, а затем ее отключаете. С помощью разных хаков в fuctions.php сможете изменить вордпресс header дабы: 1) избавиться от лишней функциональности; 2) убрать дублирующие строки и оптимизировать код wordpress сайта. Если вы знаете еще какие-то дополнительные хаки или у вас имеются замечания по текущим, пишите в комментариях.

Оцените статью:

(голосов - 43, средний балл: 5,19 из 7)

Загрузка...

Категории: Оптимизация; Хаки и секреты;

Теги: оптимизация блога, оптимизация кода, правка плагинов, правка шаблона, улучшаем блог, ускорение блога.

комментария 72 к статье “Оптимизируем WordPress header и удаляем лишний код”

1 2 3 Далее →

TIgor 27.04.2011
Интересно, но я поставил себе wp-minify и оно все делает само. О разнице в скорости я писал у себя в блоге.
Tod 27.04.2011
TIgor, надо будет попробовать этот wp-minify как-нибудь)
Артем 27.04.2011
Полезный материал.
Но так обламывает в коде копошиться.
Хотя и надо бы….
wp-minify …. это что за зверь? Ушел читать.
vlad 28.04.2011
wp-minify результатов не дал. мож делал чего не так….
TIgor 28.04.2011
А какие результаты ты хотел?
Кэш очистил?
У меня вместо десятка CSS подключается только один
/wp-content/plugins/wp-minify/cache/0b5e5a0c274290167a0ab3f60a3ed3d8.css?m=1301387482
За позитив 29.04.2011
Спасибо за статью и за видео :)
А если просто убрать ?? и ручками прописать все необходимое ?
*?? – это я вставил php-код wp_head();
Nevimi 29.04.2011
А если просто закомментить в коде плагина строки с выводом стелей, не тоже самое будет?
Tod 29.04.2011
Запозитив, если убрать wp_head(), то есть риск, что некоторые плагины не будут работать.
Успешная жизнь 10.05.2011
Очень нужна ваша помощь.
Плагин Platinum SEO Pack не выводит описание блога, а в поисковом запросе выводиться первый текст после названия странички..

В выводиться это стандартное описание, а потом в скобочках Platinum seo, все выставленные мной описания. Так же с каждой статьей. Подробнее можете сами посмотреть в коде главной странички..
Tod 12.05.2011
Успешная жизнь, судя по коду там еще какая-то часть шаблона выводит описание кроме самого плагина Platinum SEO Pack, нужно глянуть header.php и разобраться кто там еще отображает заголовки и описания.
Успешная жизнь 12.05.2011
header.php — в нем стоит тег wp_head а как его править я не знаю.. Вот в этом и проблема. Как изменить его свойства, чтобы именно данные с Platinum Seo были основными..
Tod 13.05.2011
Успешная жизнь, сам по себе wp_head вроде бы не выводит дескрипшены, возможно есть еще какой-то другой плагин, который этим занимается. Я лично просто ставлю Platinum Seo и все работает.
Успешная жизнь 13.05.2011
Да у меня тоже ничего такого нету, не понимаю почему выводятся стандартные и от платинум сео в отдельной колонке и помеченные скобочками…
Евгений 17.08.2011
А как прописать в header.php код, чтобы шапка сайта менялась, то есть отображала разные картинки на разных страницах. Ну, чтобы она менялась для каждой страницы. Может есть какой — нибудь плагин. Не знаю какой запрос дать по яндексу чтобы найти такой плагин.
Tod 19.08.2011
Евгений, можно добавить плагин для слайдшоу Content Slide хотя, наверное, лучше поискать что-то более подходящее. Еще есть вариант попробовать плагин Random ads — выводит случайным образом различный html код.
Евгений 19.08.2011
Tod.
Не помню какой сайт, но был такой англо язычный сайт, где картина в header — е менялся на каждой странице. Хотелось бы добиться такого эффекта. Но, тем не менее, спасибо вам Tod. Если найду этот сайт, то ссылку дам, посмотрите.
Gregoryll 23.11.2011
Спасибо огромное, за инфу. Нашел только здесь то , что искал. Удалили ненужные теги… Заколебали они совсем…
Сергей 27.11.2011
Куда вносить строчки remove_action(‘wp_head’,’rel_canonical’); ?
В какую часть functions.php? Эти строчки нужно внести внутрь какой-то функции? Можете привести весь фрагмент кода?
Tod 27.11.2011
Сергей, код можно вносить в любую часть файла functions.php, главное чтобы он не «разрывал» другую функцию, можете в конец файла до закрывающегося тега ?>
Ольга 11.12.2011
Добрый вечер =)

Возник вопрос (наверное, дурацкий) по поводу подключения разных библиотек jquery

У меня подгружаются несколько библиотек — одна самого вп, одна моей темы и две плагинов. Это ужасно =(

if ( !is_admin() ) wp_deregister_script(‘jquery’);

Если я поставлю вот этот код в functions.php, то все будет работать, но не будет дублирования библиотек? Или надо делать что-то еще?
Tod 12.12.2011
Ольга, однозначный ответ дать не могу. Потраченные пару часов на разные тесты свидетельствуют о том, что не все и не всегда работает так как это предполагается. В общем, советую попробовать проделать разные вариации добавления кода в functions.php как это я рассказывал в посте и посмотреть что получится в итоге — потестируйте как будет реагировать шаблона на те или иные изменения.
Сергей 14.12.2011
Спасибо за статью… Покопался, все получилось…но психологическая планка в желании использовать вордпрес в дальнейшем, на новых сайтах упала — что то расхотелось ….
Андрей 02.02.2012
Интересная тема, у меня к вам по ней вопрос. У меня стоит плагин WP Minify, но после его установки появилась внешняя индексируемая ссылка, сидит в самом плагине. Можно этот плагин заменить чем нибудь другим, или как ее убрать?
Tod 02.02.2012
Андрей, сидит в плагине это как? Насколько помню вроде ничего на самом сайте не добавлялось, хотя кто знает. Исправить этот момент можно одним способом — править PHP файл плагина и убирать вывод ссылки. Других похожих модулей, увы, не посоветую.
gruz0 03.07.2012
Всем привет!
Позвольте добавить и свои пять копеек по этому вопросу: http://gruz0.ru/archives/359

Иногда приятно поковыряться во внутренностях вордпресса, но только до момента следующего обновления :-) Кто как поступает в этих случаях? Логируете все изменения в блокнот или как?
Николай 02.11.2012
А как в wp_head() удалить файл style.css из темы, и вместо него вывести другой?
Максим 23.11.2012
Добрый день.У меня WP в head добавляет вот такие стили,из-них шапка не прижата к верху.Кто-нибудь сталкивался.

html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
Tod 23.11.2012
Максим, ну сам по себе WP в head ничего не добавляет, ищите проблему и ее решение в установленном шаблоне.
Binker 02.05.2013
Обалдеть, зачем вообще изначально там столько мусора? Спасибо большое, почистил свой блог…
Vlad 09.07.2013
Tod, как раз и получается, что WP сама вставляет лишний стиль, про который говорил Максим.
Версия WP 3.5.2 стандартные шаблоны идущие с ней.