אופטימיזציה של Contact Form 7 לביצועים טובים יותר

התוסף Contact Form 7 הוא תוסף מצוין ומהנפוצים ביותר ליצירת טפסים (forms) באתרי וורדפרס. הוא מאפשר יצירת טפסים מגוונים, התאמה אישית של הטופס, עובד ב-Ajax ומאפשר גם שימוש ב-CAPTCHA.

העניין הוא שבדרך כלל משתמשים בטופס שיוצרים בדף אחד בלבד – בדף יצירת קשר. למרות זאת, כברירת מחדל התוסף Contact Form 7 טוען את קבצי ה-CSS וה-JavaScript בכל דף ודף באתר שלכם.

אין צורך לציין כי זה מיותר לטעון קבצים אלו בעמודים שלא קיימים בהם טפסים של תוסף זה, מכיוון שטעינת קבצים אלו מאיטה את זמן הטעינה של אותם עמודים.

נראה כיצד ניתן לבצע אופטימיזציה של Contact Form 7 ולטעון את התוסף רק בעמודים מסוימים כדי לשפר את מהירות האתר.

במדריך זה נדגים כיצד למנוע מ-Contact Form 7 לטעון את הקבצים שלו באופן גלובלי, ובמקום זאת לשלוט בדיוק היכן ומתי הם נטענים.

ביטול טעינת הקבצים מכל הדפים

Contact Form 7 מספק שתי דרכים לבטל את טעינת הקבצים באופן גורף. הראשונה היא הוספת שורות אלו לקובץ wp-config.php:

define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

שיטה זו מבטלת את הטעינה בכל הדפים, אך אינה מאפשרת לנו לשלוט באילו עמודים התוסף ייטען.

הגישה המומלצת היא לבטל את הטעינה באמצעות פילטרים בקובץ functions.php של התבנית:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

שתי השיטות משיגות את אותה תוצאה: קבצי ה-CSS וה-JavaScript לא נטענים יותר באף דף. גישת הפילטרים עדיפה מכיוון שהיא שומרת על קובץ wp-config.php נקי ומאפשרת לתוספים אחרים או לתבנית ילד לדרוס את ההתנהגות במידת הצורך.

טעינת הקבצים רק בדפים שאנו מעוניינים בהם

כעת שביטלנו את הטעינה הגלובלית, עלינו להפעיל מחדש את הקבצים בדפים שבהם קיים טופס. ישנן שתי גישות בהתאם למבנה האתר שלכם.

שימוש בתבנית עמוד

אם דף יצירת הקשר משתמש בתבנית עמוד ייעודית (למשל contact.php), ניתן לקרוא לפונקציות הטעינה ישירות בתבנית. שורות אלו חייבות להופיע לפני הקריאה לפונקציה wp_head:

<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }

    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>

שימוש בפונקציה מותנית (מומלץ)

אם דף יצירת הקשר אינו משתמש בתבנית עמוד משלו, או שאתם מעדיפים גישה נקייה יותר, השתמשו בפונקציה מותנית המחוברת ל-wp_enqueue_scripts.

ראשית, מצאו את מזהה העמוד. גשו ללוח הבקרה של וורדפרס > עמודים ורחפו עם העכבר על העמוד שמכיל את הטופס. בתחתית הדפדפן תראו שורה המכילה את המזהה (ID) של העמוד – post=xxxx. זכרו מספר זה.

כעת הוסיפו את הקוד הבא לקובץ functions.php של התבנית:

<?php
/**
 * Contact Form 7
 *
 * Prevent the JavaScript and styles from loading on every page.
 * Load them only on the Contact page.
 */
function load_cf7_on_contact_page() {
    if ( is_page( xxx ) ) {
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }

        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}
add_action( 'wp_enqueue_scripts', 'load_cf7_on_contact_page' );
?>

החליפו את xxx במזהה העמוד שמצאתם. ניתן גם להעביר מספר מזהים כמערך: is_page( array( 10, 25, 98 ) ).

זיהוי אוטומטי באמצעות Shortcode

אם אתם משתמשים ב-Contact Form 7 במספר דפים ולא רוצים לתחזק רשימת מזהי עמודים, ניתן לזהות את ה-shortcode באופן אוטומטי:

function load_cf7_only_when_needed() {
    global $post;

    if ( is_singular() && has_shortcode( $post->post_content, 'contact-form-7' ) ) {
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }

        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}
add_action( 'wp_enqueue_scripts', 'load_cf7_only_when_needed' );

גישה זו בודקת האם הדף הנוכחי מכיל shortcode של [contact-form-7] וטוענת את הקבצים רק כשהוא קיים. זה עובד בכל הדפים והפוסטים ללא צורך בהזנת מזהים ידנית.

אל תשכחו את reCAPTCHA ו-Turnstile

אם אתם משתמשים ב-reCAPTCHA או ב-Cloudflare Turnstile עם Contact Form 7, שימו לב ששירותים אלו גם הם טוענים JavaScript משלהם בכל דף באתר כברירת מחדל.

ביטול טעינת קבצי CF7 לא מבטל אוטומטית את סקריפטי ה-CAPTCHA. ייתכן שעדיין תראו בקשות חיצוניות ל-google.com/recaptcha או challenges.cloudflare.com בדפים ללא טפסים.

כדי לטפל בכך, ניתן להסיר את סקריפט ה-reCAPTCHA מדפים שלא צריכים אותו:

function remove_recaptcha_from_non_form_pages() {
    if ( ! is_page( xxx ) ) {
        wp_dequeue_script( 'google-recaptcha' );
        wp_dequeue_script( 'wpcf7-recaptcha' );
    }
}
add_action( 'wp_enqueue_scripts', 'remove_recaptcha_from_non_form_pages', 100 );

החליפו את xxx במזהה העמוד/ים בהם הטופס נמצא. העדיפות 100 מוודאת שהקוד רץ אחרי ש-CF7 כבר טען את הסקריפטים.

שאלות נפוצות

שאלות נפוצות בנושא אופטימיזציה של Contact Form 7:

לסיכום

על ידי מניעת טעינת קבצי Contact Form 7 בכל דף, אתם מפחיתים בקשות CSS ו-JavaScript מיותרות ומשפרים את מהירות הטעינה וציוני הביצועים.

לאתרים עם דף יצירת קשר אחד, הגישה המותנית עם is_page() עובדת מצוין. לאתרים עם טפסים במספר דפים, שיטת זיהוי ה-shortcode נוחה יותר לתחזוקה. בכל מקרה, זכרו לטפל גם בסקריפטי reCAPTCHA או Turnstile בנפרד.

אם אתם מחפשים דרכים נוספות לשפר את מהירות אתר הוורדפרס שלכם, עיינו במדריך האופטימיזציה המלא שלנו.