Search

אופטימיזציה של 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. זכרו מספר זה.

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

<?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. אך קחו בחשבון שהציון בכלי המהירות של גוגל אינו רלוונטי

רועי יוסף
רועי יוסף

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

4 תגובות...
  • אורי 2 יולי 2015, 11:07

    עובד פגז, תודה

  • בצלאל 27 ספטמבר 2015, 1:20

    מעניין ושימושי. טנקס

  • ברק 16 ספטמבר 2017, 10:33

    אז בעצם את הקוד שמבטל את הטעינה כליל צריך להכניס לקובץ ה functions, ואת הקוד שדורש טעינה רק בעמוד שאנחנו בוחרים צריך להכניס ל template הנכון?

    • רועי יוסף 16 ספטמבר 2017, 11:25

      נכון, אך האמת שיהיה נכון יותר להשתמש בדרך השנייה שתיארתי. תשתמש בפונקציה is_page_template במקום is_page ושים את הקוד ב functions.php..

תגובה חדשה

ניווט מהיר

Up!
לבלוג