Webamator Blog

Подключение JS только там, где это необходимо
MENU
Home » Сайтостроителю » Подключение JS только там, где это необходимо

Подключение JS только там, где это необходимо

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

На практике очень часто плагины используются для каких-то определенных страниц, постов или категорий. Например форма обратной связи нужна только на странице контактов, для других страниц она не нужна. Или многочисленные слайдеры или карусели – как правило, они используются только на главной странице сайта или для рубрики. Или многочисленные галереи – как правило, они используються только для определенных типов постов. Или… много чего может использоваться только на одной странице, и вместе с тем подлячать дополнительньые файлы везде.

Если вы используете популярный плагин Contact Form 7, я предлагаю провести небольшой эксперимент и вы сами все увидете.
1 – Откройте любую страницу своего сайта, кроме страницы с формой обратной связи.
2 – Переключитесь в режим html (Ctrl+U в Firefox или Google Chrome).
3 – Включите режим поиска (Ctrl+F) и введите в окно “contact-form-7″.
Нашли результат? Файл не используется, но подключается. А если у вас будет 10 неиспользуемых файлов? Или 20?

Большинство плагинов подключают внешние JS и CSS файлы с помощью функции wp_enqueue_script:

wp_enqueue_script ('plugin_script', plugins_url ('/assets/js/script.js', __FILE__), array ('jquery'), '1.0.1', true);

Все отлично, все работает, неужели нужно еще что-то?
Да, нужно. Автор плагина не знает на какой странице будет использоваться его плагин, поэтому он делает так чтобы плагин работал везде.
Но мы-то знаем. Поэтому мы можем сделать дополнительную проверку и подключать скрипт только там где это нужно.

Давайте сделаем это на примере Contact Form 7. Я не люблю хардкод, поэтому сам плагин изменять не будем и добавим проверку в functions.php текущей темы.

function wa_contact_form_javascript () {
	if ( !is_page ('contact') ) {
		wp_deregister_script ( 'contact-form-7' );
	}
}
add_action ( 'wp_print_scripts', 'wa_contact_form_javascript', 999 );

Вместо “contact” укажите пермалинк или ID своей страницы с контактами. Для CSS используйте wp_deregister_style и wp_print_styles соответственно.
Как видим, все достаточно просто, но если есть вопросы – добро пожаловать в комментарии.

Popularity: 6%

Добавлено 2 ноября 2017
Рубрика: Сайтостроителю
Метки: , ,

Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!

Также рекомендую публикации, похожие на "Подключение JS только там, где это необходимо"

SLON – пример плагина

Повторное подключение JavaScript приводит к его повторному выполнению, то есть к проблеме производительности сайта. Кроме того, это может привести к неприятным побочным эффектам – например, если данный скрипт [...]

Single Load Only. Избавляемся от дублирования js

В данной статье я расскажу об одной из проблем Wordpress – повторному подключению javascript. Подключение скрипта несколько раз приводит к его повторному выполнению, т.е. страдает производительность. Кроме того, [...]

WA Edit States List – бесплатный плагин для WooCommerce

Иногда владельцам магазина на базе WooCommerce требуется изменить список штатов США на странице оформления заказа. Причины могут быть разными – например, владелец не хочет доставлять свои товары в [...]

Интернационализация плагинов Wordpress

Итак, предположим мы написали некий плагин, который уже успешно работает. Один из способов сделать его более популярным – это добавить возможность перевода на другие языки. Интернационализация и транслитерация. Для начала [...]

Нет комментариев

No comments yet.

RSS feed for comments on this post.

Leave a comment