Наверняка вы не раз слышали от разработчиков, что чем больше плагинов вы используете, тем медленнее будет работать сайт на WordPress. И это частично правда. Некоторые плагины добавляют небольшой запрос, который практически не влияет на скорость загрузки, тогда как другие плагины добавляют jQuery и CSS при каждой загрузке страницы (в секции <head></head> вашего сайта). То есть для примера если каждый плагин добавит один файл jQuery и одну таблицу стилей CSS и у вас будет активировано 8 подобных плагинов, то выходит что будут обрабатываться 16 HTTP запросов. Ситуация реально может выйти из под контроля, когда плагины будут добавлять более одной таблицы стилей или файлов jQuery. В этой статье мы покажем вам как можно продолжать использовать все нужные вам плагины WordPress без дополнительных HTTP запросов.
Примечание: Рекомендуется хотя бы минимальное знание PHP перед углублением в этот мануал.
Наша цель: Отключить все дополнительные скрипты и таблицы стилей, которые плагины добавляют при каждой загрузке страницы.
Нам нужно контролировать подгружаемые файлы и ускорить загрузку наших сайтов. Отключение этих скриптов и стилей позволит нам реализовать несколько вещей:
- Скомбинировать несколько файлов в один (Технология спрайтов).
- Загружать файлы только на тех страницах, где скрипты и стили реально используются.
Отключаем скрипты и стили в WordPress
В WordPress есть отличная система, которая позволяет отменять регистрацию скриптов и стилей, добавляемых плагинами. Минусом в этой ситуации является то, что WordPress является опен-сорс, поэтому плагины создаются людьми сообщества (продвинутые разработчики и начинающие). Это означает, что не все плагины используют корректные способы для загрузки скриптов и стилей, что затрудняет нашу работу. Правильный способ — это регистрация таблицы стилей или скриптов с помощью функций WordPress: wp_enqueue_script() и wp_enqueue_style(). Если автор вашего плагина не использует эти функции, тогда отправьте ему письмо по электронной почте с просьбой обновить плагин. Это не сложно, это всего лишь повод «повысить квалификацию» как разработчика.
Для того, чтобы выяснить какие скрипты или стили необходимо отключить, необходимо углубиться внутрь сайта и немного запачкать свои руки. Нужно смотреть в код ваших плагинов.
Отключаем CSS (Таблицы стилей)
В этом примере мы будем использовать плагин под названием Cleaner Gallery, который добавляет свой собственный CSS файл на каждую страницу сайта. Во-первых, вам необходимо проверить, использует ли плагин правильный способ добавления таблиц стилей. Для этого вам нужно открыть файл плагина gallery.php (для этого конкретного плагина). Здесь же нужно запустить поиск “wp_enqueue_style”. Результатом поиска будет что-то вроде этого:
wp_enqueue_style( 'cleaner-gallery', CLEANER_GALLERY_URL . 'cleaner-gallery.css', false, 0.8, 'all' );
Теперь вы знаете имя обращения (handle) к стилю, коим здесь является ‘cleaner-gallery’. Затем вам нужно открыть файл functions.php вашей темы и добавить туда следующие строки кода:
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'cleaner-gallery' );
}
В ваших силах отменить регистрацию стольких хендлов, сколько это необходимо с помощью этой функции. Итак, если у вас на примете есть более одного плагина, которым нужно отменить регистрацию таблиц стилей, нужно проделать следующее:
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'cleaner-gallery' );
wp_deregister_style( 'Хендл стилей плагина' );
wp_deregister_style( 'Хендл стилей плагина' );
}
Теперь, когда мы убрали загрузку таблиц стилей на каждой страницы, мы «поломали» функциональность плагина. Например, в нашем случае внешний вид и расположение элементов будет НАРУШЕНО. Для того, чтобы исправить ситуацию, вам необходимо открыть файл style.css темы и ВЕСЬ код CSS плагина(плагинов) добавить в конец файла style.css. В нашем примере мы убрали таблицу стилей галереи cleaner, поэтому открываем cleaner-gallery.css, который располагается в папке плагина. Копируем код и вставляем в файл style.css темы. Таким образом вы не только сможете настроить внешний вид вашей галереи, но и уменьшите количество HTTP запросов на один.
Идеальный способ
Плагин, известный под именем WP-PageNavi дает своим пользователям возможность отключать таблицу стилей плагина прямо из настроек консоли.
![pagenavioptions[1]](https://wpincode.com/wp-content/uploads/2013/07/pagenavioptions1.gif)
В большинстве случаем вам придется настраивать внешний вид плагина для того, чтобы его гармонично вписать в цветовую схему сайта. Поэтому большинство пользователей заканчивают его настройку добавлением стилей в файл style.css своей темы. Теперь же автор плагина позволяет вам отменять регистрацию таблицы стилей простой галочкой в настройках.
Мы надеемся, что все больше и больше разработчиков плагинов последуют его примеру, чтобы облегчить работу нам.
Отключаем JavaScript’ы
Некоторые плагины также добавляют JavaSscript на страницу ради фунциональности. В нашем примере мы будем использовать плагин Contact Form 7.
Необходимо будет углубиться в файлы плагина для поиска хендла скрипта так же, как мы делали это для стилей. Для этого плагина, хендлом является ‘contact-form-7?. Нужно скопировать и вставить функцию ниже в файл functions.php вашей темы:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}
Можно отменять регистрацию несколько скриптов одной функцией по вашему желанию. После того, как мы отключили JavaScript, функциональность плагина будет нарушена. Поэтому нам нужно скомбинировать JavaScript-ы вместе, однако иногда такой способ не срабатывает, поэтому важно чтобы вы понимали, что делаете. Можно учиться методом проб и ошибок (как и многие из нас), но мы не рекомендуем учиться на работающем сайте.
Загрузка скриптов только на определенных страницах
Допустим, вам известно, что скрипт Contact Form необходим, и его не получается скомбинировать с другими скриптами по определенным причинам. Есть возможность загружать его только на странице контактов с помощью нижеприведенной функции:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}
Проделав это, вы убираете ненужную загрузку скрипта на всех страницах сайта, на которых нет Contact Form. Это реально полезная технология для уменьшения времени загрузки сайта. Также можно использовать другие параметры, например !is_single и т.д.
Если вы используете большое количество плагинов на своем сайте, мы рекомендуем вам открыть браузер FireFox и просмотреть Исходный код вашей главной страницы сайта (Ctril + U). Затем посмотрите в секцию </head> и проанализируйте, сколько плагинов добавляют HTTP запросы в виде таблиц стилей и ява-скриптов. Также установите плагин YSlow в Firefox, чтобы увидеть, какими еще способами можно ускорить сайт. Используйте эту статью и хвастайтесь, на сколько пунктов удалось ускорить сайт согласно YSlow.
Дополнительные материалы
Justin Tadlock
YSlow
WordPress Codex: Scripts / Styles
