Оптимизируем плагин Contact Form 7

Contact Form 7 – один из наиболее востребованных бесплатных плагинов, реализующих функцию формы обратной связи в WordPress.

На момент написания этой статьи Contact Form 7 был загружен более 16 миллионов раз, так что вполне возможно, что этот плагин является наиболее часто используемой в Интернете формой обратной связи.

Понятно, что оптимизация такого распространённого плагина может ускорить огромное количество сайтов. Если вы ещё не знаете этого, то замечу: Contact Form 7 по умолчанию включает свой JS— и CSS-код на каждую страницу вашего сайта.

С этой бессмысленной тратой ресурсов нужно как-то бороться.

Зачем это оптимизировать?

Лишние скрипты и стили на странице – как лишний багаж, который вы вряд ли возьмёте с собой в пешую прогулку. Два лишних HTTP-запроса могут серьёзно повлиять на время загрузки вашего сайта.

Вы наверняка помните, что Google любит ранжировать страницы, которые грузятся не дольше секунды. Первые 14 килобайт наиболее критичны для скорости загрузки сайта.

Как говорит сам автор плагина, Такаюки Миёши: «Я понимаю ваши чувства, но существуют определённые технические сложности в определении плагином, содержит ли данная страница форму обратной связи, в самом начале загрузки этой страницы».

Оптимизация Contact Form 7

Шаг 1. Отмена регистрации стилей CF7

Прежде всего, нужно определить, на каких страницах показывается форма обратной связи. Затем мы отменим регистрацию CSS-файла, сгенерированного CF7, на всех остальных страницах.

Нахождение короткого имени (slug) страницы обратной связи

Сначала найдём короткое имя нужной страницы. Скопируем его в буфер обмена в режиме быстрого редактирования:

Приведём конкретный пример: допустим, наша страница обратной связи имеет короткое имя contact-us. Добавьте следующий код в конец файла functions.php используемой вами темы:

/ Deregister Contact Form 7 styles
add_action( 'wp_print_styles', 'aa_deregister_styles', 100 );
function aa_deregister_styles() {
    if ( ! is_page( 'contact-us' ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

Этот код включит выполнение на каждой странице функции aa_deregister_styles(), которая отменит регистрацию стиля CF7 для всех страниц, кроме нужной.

Шаг 2. Отмена регистрации JavaScript

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

Добавьте этот код в конец файла functions.php вашей темы:

// 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( 'contact-us' ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

Этот код добавляет на страницы сайта функцию aa_deregister_javascript(), которая проверяет slug на равенство значению contact-us, и в противном случае отменяет регистрацию JavaScript-файла плагина CF7.
Вот и всё. Оптимизация завершена.

Что, если у меня несколько форм на разных страницах?

Решить эту проблему совсем несложно. Я использую функцию is_page(), подробно описанную в руководстве WordPress.

Вы можете использовать массив для идентификации страниц. Функция is_page() может принимать в качестве аргумента идентификатор страницы, её заголовок или короткую ссылку (slug):

/**
 * is_page( array( ID, 'slug', 'Title' ) );
 * Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title 
 */
is_page( array( 42, 'about-me', 'Contact' ) );

Перевод статьи «Optimizing Contact Form 7 for Better Performance» был подготовлен дружной командой проекта Сайтостроение от А до Я.