טעינת עצלה של סקריפטים JavaScript לשיפור ביצועי האתר

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

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

לעניינו, בכדי להשתמש בטכניקה זו של Lazy Loading, בואו נגדיר פונקציה בשם loadScript:

function loadScript(url) {
  let isLoaded = document.querySelectorAll('.search-script');
  if(isLoaded.length > 0) {
    return;
  }

  let myScript = document.createElement("script");
  myScript.src = url;
  myScript.className = 'search-script';
  document.body.appendChild(myScript);
}

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

לאחר מכן אנו יוצרים אלמנט מסוג script באמצעות document.createElement ומעבירים לו את כתובת ה URL שתשמש עבור התכונה src של הסקריפט אותו נטען בטעינה עצלה. נוסיף לאותו סקריפט את הקלאס הרלוונטי עבור הבדיקה שעשינו קודם (אם הסקריפט נטען כבר או לא), ולאחר מכן נוסיף את הסקריפט לאלמנט ה body של העמוד.

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

let searchInput = document.querySelector('#trigger-overlay');
searchInput.addEventListener('click', function (e) {
    loadScript('/path/to/search.js');
});

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

בזאת סיימנו. חסכנו טעינה של סקריפט מסויים שאין צורך לטעון אותו תמיד. אגב, לתוסף WP-Rocket ישנה אפשרות דומה בשם Delay Javascript Execution. היא פועלת מעט שונה מכיוון ומתבססת על User Interaction כלשהו באתר ולא אינטראקציה ספציפית שאתם יכולים לקבוע.

Thanks to Alligator.io