החרגת סקריפטים מהפיצ׳ר “Load JS Deferred” של WP Rocket

WP Rocket הוא תוסף שכולנו אוהבים. אחת מאפשרויות התוסף היא "Load JavaScript Deferred", וזו עוזרת להאיץ את טעינת האתר על ידי דחיית הטעינה של קבצי JavaScript עד לאחר הצגת התוכן העיקרי. עם זאת, לפעמים פעולה זו עשויה להפריע לסקריפטים מסוימים הצריכים להיטען מיד.

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

מתי כדאי להשתמש ב-"Load JavaScript Deferred"?

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

יש לציין כי WP Rocket מציע גם פיצ׳ר נפרד בשם "Delay JavaScript Execution" שמעכב את הרצת הסקריפטים עד לאינטראקציה ראשונה של המשתמש (כמו גלילה, הקלדה או תזוזת עכבר). ההבדל העיקרי: Defer טוען את הסקריפט ברקע ומריץ אותו אחרי שה-HTML מוכן, בעוד Delay לא טוען את הסקריפט כלל עד שהמשתמש מבצע פעולה כלשהי בדף.

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

• צ׳אט חי (Live Chat)
• סליידרים אינטראקטיביים
• מפות (כמו Google Maps)
• סקריפטים לוולידציה של טפסים
• כלי אנליטיקס ומעקב

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

החרגת קבצים ודומיינים

כדי להחריג קובץ סקריפט, עברו אל WP Rocket → File Optimization → JavaScript Files, וחפשו את השדה "Excluded JavaScript Files".

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

• ה-URL המלא של הסקריפט (להסיר ?ver= או פרמטרים נוספים)
• מילת מפתח מתוך ה-URL
• Wildcard כדי להחיל על קבוצת קבצים

פירוט נוסף תוכלו למצוא במדריך הדפוסים הלא חוקיים.

איך לזהות אילו סקריפטים להחריג

אם משהו נשבר אחרי הפעלת הפיצ׳ר, פתחו את כלי המפתחים של הדפדפן (F12 או קליק ימני → Inspect) ועברו ללשונית Console כדי לבדוק שגיאות. חפשו:

• שגיאות 404 בסקריפטים
• שגיאות JavaScript is not defined
• בעיות שקשורות ל-jQuery

התאימו את השמות או ה-IDs של הסקריפטים לאלה שבקוד המקור של האתר.

איך למצוא את ה-URL או ה-Handle של הסקריפט

לאחר שזיהיתם שגיאה בקונסול, תצטרכו למצוא את ה-URL המדויק של הסקריפט הבעייתי. עברו ללשונית Sources בכלי המפתחים, או חפשו בקוד המקור של הדף (Ctrl+U / Cmd+U) את תגיות ה-<script>.

כל סקריפט שנטען דרך הפונקציה wp_enqueue_script מקבל id בפורמט handle-js. לדוגמה, אם ה-handle הוא jquery-core, תמצאו בקוד המקור:

<script src="...jquery.min.js" id="jquery-core-js"></script>

מילת המפתח שתזינו בשדה ההחרגה היא חלק מה-URL או מה-id של הסקריפט.

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

החרגת Inline Scripts

אם הבעיה נובעת מסקריפט שמוטמע ישירות ב-HTML (ולא נטען כקובץ), ניתן להחריג אותו באמצעות הפילטר הבא ב-functions.php של התבנית:

add_filter( 'rocket_defer_inline_exclusions', function( $inline_exclusions_list ) {
  if ( ! is_array( $inline_exclusions_list ) ) {
    $inline_exclusions_list = array();
  }

  // הוסיפו כאן את מילת המפתח
  $inline_exclusions_list[] = 'custom-chat-widget-inline-js';

  return $inline_exclusions_list;
} );

בדוגמה זו, אנו מחריגים סקריפט עם ID כזה:

<script id="custom-chat-widget-inline-js">
var chatOptions = { theme: "dark", autoOpen: false };
</script>

המחרוזת custom-chat-widget-inline-js תזהה בדיוק את הסקריפט המדובר.

דוגמאות

1. החרגת סקריפט של צ'אט חי

<script src="https://cdn.livechat.com/widget.js?account=12345"></script>

השתמשו בזה בשדה ההחרגה:

cdn.livechat.com

2. החרגת קובץ ספציפי של תבנית

כדי להחריג את הקובץ:

https://yoursite.com/wp-content/themes/your-theme/js/animations.js?ver=1.2.0

השתמשו ב:

/wp-content/themes/your-theme/js/animations.js

3. החרגת כל קבצי JavaScript של תוסף כלשהו

השתמשו בתבנית כזו כדי להחיל על כל הקבצים בתיקייה מסוימת:

/wp-content/plugins/custom-gallery/js/(.*).js

4. החרגת minified script שנטען מה- Cache

כדי להחריג את הקובץ:

https://yourdomain.com/wp-content/cache/min/1/wp-content/plugins/social-share/js/share.min-ab123c456.js

השתמשו ב:

social-share/js/share.min

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

טיפים לניהול החרגות סקריפטים

הנה כמה טיפים שיעזרו לכם להפיק את המקסימום מהפיצ׳ר ועדיין לשמור על האתר תקין:

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

שאלות נפוצות

שאלות נפוצות בנושא החרגת סקריפטים מ-Load JavaScript Deferred:

סיכום

האפשרות "Load JavaScript Deferred" של WP Rocket עוזרת לשפר את מהירות האתר על ידי דחיית טעינת סקריפטים. לפעמים זה עשוי לגרום לבעיות עם סקריפטים מסוימים, ובמקרים אלו ניתן להחריג קבצים או Inline Scripts:

• השתמשו בשדה Excluded JavaScript Files ב-WP Rocket → File Optimization.
• החריגו סקריפטים לפי URL מלא (ללא ?ver=), מילת מפתח או wildcard.
• להחרגת Inline Scripts, השתמשו בפילטר rocket_defer_inline_exclusions ב-functions.php של התבנית.

תמיד בדקו את האתר אחרי כל החרגה וודאו שהכול פועל כראוי.