איך למנוע טעינת קבצי JS & CSS של ווקומרס ולשפר את זמן הטעינה?

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

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

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

מספר דברים שיש לקחת בחשבון לפני שאתם ממשיכים:

• האם ישנם אלמנטים באתר שלכם שתלויים באותם סקריפטים של ווקומרס ונמצאים מחות לעמודים של ווקומרס עצמה? (עמוד התשלום, עגלת הקניות, עמודי מוצר וכדומה…). אלמנטים כגון עגלת קניות המופיעה בהאדר, או ווידג׳ט כלשהו הנמצא בסיידבר לרוחב האתר.
• האם יש לכם סביבת פיתוח? מאד מומלץ לבדוק את השינויים בסביבה לוקאלית (על המחשב האישי) או סביבת פיתוח אם קיימת.
• עליכם לדעת מה אתם עושים ולהרגיש בנוח עם קוד.
• תמיד נכון יהיה לדאוג כי קיים גיבוי מסודר לאתר שלכם לפני שאתם מתחילים לשחק עם קוד.

הסרת הקבצים אותם ווקומרס טוענת כברירת מחדל

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

<!--CSS Files-->
<link  href='.../plugins/woocommerce/assets/css/woocommerce-layout.css' rel='stylesheet' type='text/css' />
<link  href='.../plugins/woocommerce/assets/css/woocommerce-smallscreen.css' rel='stylesheet' type='text/css' />
<link  href='.../plugins/woocommerce/assets/css/woocommerce.css' rel='stylesheet' type='text/css' />

<!--Javascript Files-->
<script src='.../plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/add-to-cart.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/woocommerce.min.js'></script>
<script src='.../plugins/woocommerce/assets/js/frontend/cart-fragments.min.js'></script>

שמות קבצי ה CSS יסתיימו ב rtl במידה וחנות הווקומרס שלכם היא בעברית.

אז אני מניח כי ברור לכולנו שאין זה רלוונטי לטעון את אותו סקריפט האחראי על הוספת מוצרים לעגלה הקניות (add-to-cart.min.js) בעמוד צור קשר נכון? ברור שאין לטעון את קובץ ה CSS האחראי על עימוד החנות (woocommerce-layout.css) בפוסטים של הבלוג שלכם אמת?

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

אתם רוצים כי קבצים אלו ייטענו אך ורק בעמודים הרלוונטים בחנות, למשל עמוד מוצר, עמוד התשלום, עגלת הקניות וכדומה. אז בכדי לעשות זאת ולהסיר את קבצי ה JS וה CSS בעמודים שאינם עמודי ווקומרס, הוסיפו את הקוד הבא לקובץ functions.php:

<?php
//* Enqueue scripts and styles

function savvy_remove_woocommerce_css_js() {

    // Check if WooCommerce is active
    if( function_exists( 'is_woocommerce' ) ){

        // Check if we are on an WooCommerce page
        if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) {

            ## Dequeue WooCommerce styles
            ## Dequeue WooCommerce styles
            wp_dequeue_style('woocommerce-layout');
            wp_dequeue_style('woocommerce-general');
            wp_dequeue_style('woocommerce-smallscreen');

            ## Dequeue WooCommerce scripts
            wp_dequeue_script('wc-cart-fragments');
            wp_dequeue_script('woocommerce');
            wp_dequeue_script('wc-add-to-cart');

            wp_deregister_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-blockui' );

            wp_deregister_script( 'js-cookie' );
            wp_dequeue_script( 'js-cookie' );

        }
    }
}
add_action( 'wp_enqueue_scripts', 'savvy_remove_woocommerce_css_js' );

שימו לב לתנאים (conditional tags) בשורה 10. אם אתם צריכים לטעון את הסקריפטים בעמוד שאינו אחד מהעמודים של ווקומרס, אתם יכולים לשנות תנאים אלו בהתאם לצורך.

אם יש שאלות בנושא אתם מוזמנים לשאול בתגובות ואני מבטיח לענות בהקדם.

נספח א׳

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

// Remove all the stylesheets in one line
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

לחילופין במידה ומעוניינים להסיר קובץ CSS ספציפי, ניתן לעשות זאת בצורה הבאה:

// Remove each style one by one
function sv_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );	    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );		    // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the smallscreen optimisation
    return $enqueue_styles;
}

add_filter( 'woocommerce_enqueue_styles', 'sv_dequeue_styles' );

על נספח א׳ דובר בהרחבה בפוסט כיצד להסיר CSS הנטען כברירת מחדל בווקומרס.

לסיכום

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

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