טעינת סקריפטים בוורדפרס עם ‎’in_footer’‎ ו – ‎’strategy’‎

החל מגרסה 6.3 של וורדפרס, שיטת ניהול הסקריפטים בתבניות ותוספים קיבלה שדרוג. בפוסט הזה נסביר מהו הפרמטר 'strategy', איך הוא משתלב (או מחליף) את 'in_footer', וכיצד להשתמש בו בצורה נכונה לטובת ביצועים מיטביים.

וורדפרס 6.3 מציגה גישה נקייה ומודרנית יותר לניהול טעינת סקריפטים באמצעות הפרמטר 'strategy'.

מה השתנה ב־WordPress 6.3?

לפני גרסה 6.3, מפתחים נהגו להשתמש בפרמטר החמישי בפונקציה wp_enqueue_script() כדי לקבוע האם לטעון את הסקריפט בפוטר על ידי 'in_footer' => true.

השיטה הזו עדיין נתמכת, אך גרסה 6.3 הוסיפה אפשרות גמישה ומודרנית יותר: הפרמטר 'strategy'.

• 'in_footer' (התנהגות ישנה): בוליאני שקובע אם הסקריפט ייטען בפוטר (true) או בהדר (false).
• 'strategy' (חדש): מחרוזת שמקבלת ערכים 'defer' או 'async' ומספקת שליטה מדויקת יותר בהתנהגות הטעינה בדפדפנים מודרניים.

שימוש נכון

כך מומלץ לרשום ולטעון סקריפטים כיום:

wp_register_script(
    'my-script',
    get_template_directory_uri() . '/js/my-script.js',
    array(),
    '1.0.0',
    array(
        'strategy' => 'defer'
    )
);
wp_enqueue_script('my-script');

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

wp_register_script(
    'legacy-script',
    get_template_directory_uri() . '/js/legacy.js',
    array(),
    '1.0.0',
    array(
        'in_footer' => true
    )
);
wp_enqueue_script('legacy-script');

ואפשר גם לשלב בין שניהם:

wp_register_script(
    'hybrid-script',
    get_template_directory_uri() . '/js/hybrid.js',
    array(),
    '1.0.0',
    array(
        'in_footer' => true,
        'strategy'  => 'defer'
    )
);
wp_enqueue_script('hybrid-script');

שימוש ב־'strategy' => 'defer' יכול לשפר את ביצועי הטעינה ולמנוע חסימות רינדור שנגרמות מסקריפטים כבדים.

מתי להשתמש ב־'defer' או 'async'

הבחירה בין defer ל async תלויה בהתנהגות הסקריפט ובשאלה האם הוא תלוי בסקריפטים אחרים או ב־DOM. שניהם משפרים את מהירות הטעינה, אך כל אחד מתאים לשימוש שונה:

• defer: מריץ את הסקריפט רק לאחר ניתוח מלא של ה HTML ובסדר הנכון. מתאים לסקריפטים התלויים בכך שה DOM נפרש במלואו בכדי לעבוד.
• async: מריץ את הסקריפט ברגע שהוא נטען, ללא סדר, ואינו ממתין ל DOM. מתאים לסקריפטים עצמאיים.

היתרונות של strategy

שימוש בפרמטר 'strategy' מיישר קו עם שיטות מודרניות לפיתוח אתרי וורדפרס יעילים ומהירים:

• מפחית חסימות רינדור
• משפר מדדי Core Web Vitals ומהירות טעינה
• מבהיר את כוונת הטעינה (לעומת מיקום בפוטר שלא תמיד ברור)
• מאפשר caching יעיל יותר וסדרי עדיפויות בין סקריפטים

טיפים לשימוש נכון

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

• השתמשו ב־'strategy' => 'defer' לסקריפטים שאינם קריטיים
• השתמשו ב־'strategy' => 'async' רק אם הסקריפט עצמאי לחלוטין
• המנעו משימוש ב־async לסקריפטים שתלויים באחרים
• העדיפו wp_register_script ולאחר מכן wp_enqueue_script עבור קוד מסודר ונקי

אמנם 'in_footer' עדיין נתמך, אך מעבר ל־'strategy' יבטיח תאימות עתידית ושיפור ביצועים משמעותי.