Авг
10
72

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

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

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

Wordpress header

Безусловно, многие из этих функций жизненно необходимы для корректной работы модулей, однако есть и такие, от которых можно избавиться. Самый простой пример — использование библиотеки 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 сайта. Если вы знаете еще какие-то дополнительные хаки или у вас имеются замечания по текущим, пишите в комментариях.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 42, средний балл: 5,26 из 7)
Загрузка...

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

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

  • Vlad   10.07.2013

    В общем нашел решение, в файле functions.php надо добавить строку
    add_filter(‘show_admin_bar’,’__return_false’);

    Проблему с margin-top решает, как с остальным будем смотреть:)

  • Mars   07.11.2013

    Здравствуйте!
    До лишних элементов в header тоже надо добраться, но пока встала такая проблема, и я не могу найти ответ. Может, подскажете?
    После некоторой реорганизации сайта пришлось удалить некоторые страницы из индекса, но через 180 дней ошибка вновь вернулась.
    Как правильно прописать в robots.txt?
    Disallow: /page.html # закрывает страницу page.html
    Disallow: / http://happylady.su/puteshestviya/
    Или
    Disallow: / happylady.su/puteshestviya/
    Или
    Disallow: / puteshestviya/
    Или варианты из вышеперечисленного без / в конце?
    Как бы с водой ребенка не выплеснуть, не удалить весь сайт из индекса.
    Заранее благодарю за ответ.

  • Tod   07.11.2013

    Mars, могу посоветовать вам добавить сайт в Яндекс.Вебмастер и там есть опция проверки файла robots.txt — вы указываете страницы сайта и смотрите запрещает их роботс или нет. Если по существу, то (насколько я знаю)
    Disallow: /page.html — запрещает все ссылки что заканчиваются на «/page.html», то есть first/page.html, second/page.html и т.п.
    Disallow: / http://happylady.su/puteshestviya/ — неправильный синтаксис, лишняя «/»
    Disallow: / happylady.su/puteshestviya/ — та же история
    Disallow: / puteshestviya/ — если писать без пробела «/puteshestviya/» то запрещаются все пути, содержащие в себе puteshestviya (я так понимаю запрещаете раздел». Можно попробовать без последнего «/».

  • Mars   07.11.2013

    но google webmasters прямо так и прописывает ошибку: puteshestviya/

    Ладно, в любом случае, спасибо за ответ.

  • Tod   07.11.2013

    В смысле Disallow: /puteshestviya — выдает ошибку?

  • Эдик   06.05.2014

    Все делал как сказано в статье, но как только вставил указанный здесь код. Получил ответ, что нет закодированных ссылок. Я их убирал в функшене. if ( strpos($c, $l) == 0 заменил ноль на 1 и удалил ссылки. Подскажите, что еще нужно поменять, иначе код становиться не хочет, сайт не работает.

  • Tod   07.05.2014

    Эдик, к сожалению, давно занимался этим и уже мало что помню. Нужно тестировать и пробовать, в разных шаблонах свои какие-то конструкции и не всегда все применимо, если просто скопировать.

  • mayklvipp   18.06.2014

    Спасибо за статью, но у меня настолько «тяжёлый шаблон» + много плагинов что пришлось подключить персональный веб сервер. Совсем не дорого, за 150 рублей в месяц весь комплект. хостинг с 2 Гб 2 сайта+ веб сервер

  • Галина Шевалер   17.07.2014

    Обалдеть!

    Сколько не пишу — посещаемость не растет…

    И вот что нашла — у меня будлируются мета-тэги и тайтл в статьях.

    Грешу на All in One Seo Pack

    НО совсем не знаю как решить проблему????

  • Tod   17.07.2014

    Галина, посещаемость напрямую не зависит от количества написанного текста. Обычно это происходит за счет того что новые статьи появляются в поисковиках по новым запросам, а также некоторые читатели становятся постоянными. Однако для планомерного повышения посещаемости нужно продвижение.
    Что касается плагина All in One Seo Pack, то он позволяет для каждой статьи указать свой оригинальный тайтл и мета теги. Также в настройках вы можете запретить индексацию страниц меток и архивов.

  • Евгений   19.08.2014

    В версии 3.9.2 не ‘adjacent_posts_rel_link’ а ‘adjacent_posts_rel_link_wp_head’

  • Tod   20.08.2014

    Евгений, у меня в коде так и указано.

  • Olana   23.02.2015

    А еще статья не должна быть слишком маленькой и слишком большой. Слишком маленькую быстро прочитают, а большую никто не захочет читать полностью. От этого зависят поведенческие факторы, чем больше посетитель задерживается на сайте, тем выше котируется сам сайт. из собственного опыта.

  • Tod   23.02.2015

    Olana, есть разные тематики и разные пользователи. Главное, чтобы в статье раскрывалась суть вопроса и посетитель нашел нужные ответы. Если это развлекательная информация, то конечно никто читать не захочет, но если техническая, то тут материал может занимать большой объем.

  • Сергей   03.10.2015

    Здравствуйте! Как написать название сайта красивыми буквами?

  • Tod   04.10.2015

    Сергей, можно написать в фотошопе с помощью оригинальных шрифтов и добавить картинку в шапку сайта либо использовать CSS стили.

  • Александр   11.10.2015

    Привет подскажите пжлст — в шапке =в хедер= прописывается вирус, чищу + закрываю права 444 и через сутки тожсамое

  • Tod   11.10.2015

    Александр, я бы попросил хостера почистить вирус. Второй вариант — полная переустановка вордпресс с удалением всех файлов, которые можно удалить. То есть оставить только пару системных файлов и картинки — саму ВП + модули ставить с нуля. Также можно глянуть плагин Theme Authenticity Checker для проверки внешних ссылок в шаблоне.

  • Александр   11.10.2015

    да чистилши они и переустановили серв и движк4и я обновил — видимо шел или еще что-то — это на 5 сайтах и + в записях какой то код тож вир

  • Tod   12.10.2015

    Александр, тогда нужно как-то вычислять его методом исключения — поменять временно шаблон, отключить модули, перезалив систему с нуля и посмотреть будет ли вирус. Дальше варианты — сменить хостинг, доступы к ФТП поменять и т.п. Можно погуглить похожие проблемы в англоязычном сегменте блогов.

  • Александр   12.10.2015

    спасибо за помощь.. тока проще все поудалять — там щас в каждой записи вир и в шапках бесконца .. да пусть бультыхаются они толком бесполезные

  • Ксения   24.02.2016

    Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)

  • Tod   25.02.2016

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

  • ALex   31.05.2016

    Подскажите, пожалуйста, как удалить комментарий в head: ««

  • Tod   01.06.2016

    ALex, код не вставился, можете отправить вопрос на почтуstod84@gmail.com.

  • Михаил   01.10.2016

    Автору РЕСПЕКТ!!! Статья просто находка для меня. Спасибо большое.

  • сеошник   16.11.2016

    Статья помогает оптимизаторам добиваться продвигаемым сайтам быстрее грузится у посетителей сайта (актуально у кого маленькая скорость) и дополнительным бонусом — поисковики любят «ухоженные» сайты когда нет в них ненужного информационного мусора.

  • vadosss   25.12.2016

    Огромное спасибо за представленную информацию, все пригодилось и помогло, теперь 99 баллов по pagespeed и все работает!!!)))

  • Павел   23.05.2017

    Спасибо!

  • Ashot   11.12.2017

    Здравствуйте, у меня есть вопрос я хочу изменить код в файле header.php точнее изменить вид меню у меня есть новое меню которое состоит html и css кодов. Могу ли я вложить готовый css файл в вордпресс?

    Заранее спасибо за желание и готовность помочь!!!

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости