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

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

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

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

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

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

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

שיטה זו אינה מאפשרת לנו לשלוט באיזה עמודים נטען את התוסף ולכן אינה משרתת את המטרה שלשמה באנו. לכן (ואם אתם משתמשים בתוסף בגירסה 4.7) ניתן לבטל טעינת קבצים אלו על ידי הוספת שורות אלו לקובץ functions.php:

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

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

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

בואו נניח שיש לנו דף בשם ״צרו קשר״ והוא הדף היחיד שמכיל טופס של Contact Form 7. בואו גם נניח שדף זה משתמש בתבנית עמוד (page template) שנקראית contact.php.

על מנת לטעון את הקבצים רק בתבנית עמוד זו ערכו את הקובץ contact.php והוסיפו לו את השורות הבאות (שימו לב כי שורות אלא חייבות להופיע לפני הקריאה לפונקציה wp_head בתבנית שלכם).

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

מה עושים במידה ודף יצירת הקשר אינו משתמש ב page template משלו?

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

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

<?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_footer', 'load_cf7_on_contact_page' );

?>

וודאו כי אתם משנים את xxx בשורה 9 המסומנת למזהה העמוד שגילינו לפני זה.

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

לסיכום

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