איך למנוע טעינת קבצי 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() && ! is_account_page() ) {

            ## 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', 99 );

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

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

נספח א׳

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

בעיית הביצועים של cart-fragments.min.js

מבין כל הסקריפטים של ווקומרס, cart-fragments.min.js ראוי לתשומת לב מיוחדת. סקריפט זה מבצע בקשת AJAX (?wc-ajax=get_refreshed_fragments) בכל טעינת עמוד כדי לעדכן את ווידג׳ט עגלת הקניות המוקטנת. גם כשהעגלה ריקה, הבקשה רצה ויכולה להיות אחת הבקשות האיטיות ביותר באתר.

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

add_action( 'wp_enqueue_scripts', function() {
    if ( ! isset( $_COOKIE['woocommerce_items_in_cart'] ) || $_COOKIE['woocommerce_items_in_cart'] === '0' ) {
        wp_dequeue_script( 'wc-cart-fragments' );
    }
}, 99 );

גישה זו שומרת על פונקציונליות העגלה עבור קונים בפועל תוך ביטול עומס ה-AJAX לכל השאר.

סגנונות בלוקים של ווקומרס

גרסאות ווקומרס מודרניות טוענות גם גיליונות סגנון הקשורים לבלוקים שלא בהכרח נחוצים בכל עמוד. אלה כוללים handles כמו wc-blocks-style ו-wc-blocks-vendors-style. אם אינכם משתמשים בבלוקי הגוטנברג של ווקומרס בעמודים שמחוץ לחנות, אתם יכולים לבטל גם אותם:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_woocommerce' ) && ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
        wp_dequeue_style( 'wc-blocks-style' );
        wp_dequeue_style( 'wc-blocks-vendors-style' );
    }
}, 99 );

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

שאלות נפוצות

שאלות נפוצות בנושא אופטימיזציית נכסי ווקומרס:

סיכום

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

שימו לב במיוחד ל-cart-fragments.min.js, שמבצע בקשת AJAX בכל טעינת עמוד לעדכון העגלה המוקטנת. אם אתם מריצים ווקומרס 7.8 ומעלה, ההתנהגות הזו כבר טופלה. עבור גרסאות ישנות יותר, גישה מותנית מבוססת עוגיות נותנת לכם את האיזון הטוב ביותר בין ביצועים לפונקציונליות.