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

בטלו את טעינת cf7 מדפים שאינם משתמשים בו על מנת לשפר את מהירות האתר.

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

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

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

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

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

שיטה זו אינה מאפשרת לנו לשלוט באיזה דפים נטען את הפלאגין ולכן אינה משרתת את המטרה שלשמה באנו, לכן, אם אתם משתמשים בפלאגין בגירסה 7.3.9 ומעלה ניתן לבטל את טעינת הפלאגינים על ידי הוספת שורות אלו לקובץ 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 המסומנת למזהה העמוד שגילינו לפני זה.

על הדרך, הצטרפו לרשימת התפוצה !

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

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

רועי יוסף

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

תגובות פייסבוק

{ 4 תגובות… הוסף אחת }

השאירו תגובה

שיתופים
קראו גם את:
בניית אתר דו לשוני בוורדפרס באמצעות Polylang
בניית אתר דו לשוני בוורדפרס באמצעות Polylang

יצירת אתר וורדפרס דו לשוני הוא תהליך די פשוט בעזרת התוסף Polylang. התוסף Polylang הוא...