כיצד לעכב (defer) פריסת Javascript ולשפר את זמן הטעינה?

אני נתקל לא מעט בשאלה כיצד לעכב פריסת Javascript באתרי וורדפרס (Defer Loading of Javascript). הסיבה המרכזית שמעוניינים לבצע זאת היא בכדי לשפר את מהירות האתר שלכם ולגרום לכך שהתוכן יוצג עוד לפני טעינת הסקריפטים.

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

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

מדוע יש לעכב פריסת Javascript?

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

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

הרעיון הוא להציג לגולש קודם כל את הטקסט (שברוב המקרים זה התוכן שמעניין אותו) ולעכב את טעינת הסקריפטים עד לאחר שתוכן זה נטען. אם תבדקו את האתר שלכם בכלים כגון Pingdom, GTmetrix or Google Page Speed Insights סביר להניח כי תקבלו אזהרה כגון "Defer loading of javascript״ או משהו בסגנון של ״Remove Render-Blocking JavaScript״. 

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

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

 

יש להסתכל על הדיאגרמות משמאל לימין!

ברירת מחדל <script>

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

<script async>

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

<script defer>

הדפדפן יוריד את הסקריפט תוך כדי שהוא מבצע פריסה ל html ויריץ את הסקריפט רק לאחר שהפריסה הסתיימה. האופציה defer מבטיחה שהסקריפטים באתר שלכם ירוצו בסדר שהם מופיעים ב document.

---

כיצד לעכב פריסת Javascript?

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

1. הדרך המודרנית: פרמטר strategy (וורדפרס 6.3+)

אם אתם עובדים עם וורדפרס 6.3 ומעלה, זו הדרך שאתם צריכים להשתמש בה. העבירו מפתח strategy במערך $args כשמבצעים enqueue:

wp_enqueue_script(
    'my-script',
    get_stylesheet_directory_uri() . '/js/my-script.js',
    array(),
    '1.0.0',
    array(
        'in_footer' => true,
        'strategy'  => 'defer',
    )
);

וורדפרס מטפלת בעץ התלויות בשבילכם – אם סקריפט A תלוי בסקריפט B, שניהם יקבלו את תכונת הטעינה הנכונה באופן אוטומטי.

בכדי להשתמש ב-async במקום, שנו את 'strategy' => 'defer' ל-'strategy' => 'async'.

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

שיטה זו משתמשת בפילטר clean_url כדי להזריק את תכונת defer. היא עובדת, אבל זהו מעין hack – היא מניפולטת את הפלט של ה-URL במקום את תגית הסקריפט עצמה. השתמשתי בה שנים לפני וורדפרס 6.3, ועדיין תמצאו אותה באתרים רבים.

הוסיפו את הקוד הבא לקובץ functions.php:

/* defer all js except jquery.min.js */
if ( !is_admin() ) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.min.js' ) ) return $url;

        // return "$url' defer ";
        return "$url' defer onload='";
    }
}
if ( !is_admin() ) {
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

שימו לב לשם הקובץ של jQuery שהתבנית שלכם טוענת, לפעמים הוא פשוט נקרא jquery.js אז שנו את השורה בהתאם.

הקוד המופיע מעלה יוודא כי כל הסקריפטים יטענו רק לאחר סיום הפריסה של ה html על ידי הדפדפן. אם תתנו מבט בקוד מקור של האתר שלכם, תבחינו כי המילה defer התווספה לכל אחד מהסקריפטים למעט jquery.min.js:

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

3. לעכב את טעינת הסקריפטים לפי ה handle

וורדפרס 4.1 הציגה את הפילטר script_loader_tag והשימוש בפילטר זה מתבצע על ידי הקוד הבא:

function add_defer_attribute($tag, $handle) {
    if ( 'my-js-handle' !== $handle )
        return $tag;
    return str_replace( ' src', ' defer src', $tag );
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

אתם נדרשים לשנות את ה handle בשורה 2 אשר (אם ביצעתם enqueue כראוי לסקריפט) יהיה הפרמטר הראשון ברישום של אותו סקריפט:

wp_register_script('my-js-handle', $src, $deps, $ver, $in_footer);

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

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

על מנת לעכב מספר סקריפטים ע״י שימוש בדרך זו אנו צריכים ליצור מערך, לבצע לולאה על אותו מערך ולהוסיף defer לכל אחד מהסקריפטים. הוסיפו את הקוד הבא לקובץ functions.php והוסיפו את ה handles שלכם בשורה 2:

function add_defer_attribute($tag, $handle) {
   $scripts_to_defer = array('my-js-handle', 'another-handle');
   foreach($scripts_to_defer as $defer_script) {
      if ($defer_script !== $handle) return $tag;
      return str_replace(' src', ' defer src', $tag);
   }
   return $tag;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Defer לעומת Delay – מה ההבדל?

חלק מתוספי הביצועים מציעים אפשרות "Delay JavaScript" לצד defer. אלו דברים שונים:

Defer מוריד את הסקריפט במקביל ומריץ אותו אחרי שה-HTML נותח. הסקריפט עדיין רץ בכל טעינת עמוד – רק מאוחר יותר.

Delay (לפעמים נקרא lazy load JS) לא טוען את הסקריפט בכלל עד שמתרחשת אינטראקציה של המשתמש – גלילה, לחיצה, או הקשה. זה מסיר את הסקריפט לגמרי מנתיב הטעינה הראשוני, מה שיכול לשפר דרמטית את ציוני INP.

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

אם אתם משתמשים בסרטוני YouTube, תנו מבט במדריך עיכוב פריסת Javascript לסרטוני YouTube.

איזו שיטה כדאי לבחור?

וורדפרס 6.3+: השתמשו בפרמטר strategy כשמבצעים enqueue. זו הדרך הנקייה והאמינה ביותר.

אתרים לפני 6.3: השתמשו בפילטר script_loader_tag לשליטה לפי handle.

תיקון כללי מהיר: שיטת clean_url עדיין עובדת אם צריכים לעכב הכל בבת אחת, אבל עברו לפרמטר strategy כשאפשר.

סקריפטים לא חיוניים: שקלו טעינה עצלה של JavaScript או עיכוב ביצוע עד אינטראקציה עבור אנליטיקס, צ'אט וכפתורי שיתוף.

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

שאלות נפוצות

שאלות נפוצות בנושא עיכוב פריסת JavaScript בוורדפרס:

לסיכום

במדריך זה סקרנו שלוש דרכים לעכב פריסת javascript בוורדפרס – פרמטר strategy המודרני, שיטת clean_url הישנה, וגישת script_loader_tag. אם אתם על וורדפרס 6.3 ומעלה, השתמשו בפרמטר strategy המובנה ודלגו על הפילטרים.

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

אם יש לכם שאלות או גישה אחרת שעובדת לכם, כתבו תגובה למטה.