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» був підготовлений дружною командою проекту Сайтостроение від А до Я.