Search

טעינה עצלה של סקריפטים – Lazy Loading Scripts

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

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

רועי יוסף
רועי יוסף

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

6 תגובות...
  • שי 16 יוני 2021, 10:42

    תודה על המאמר אך הפונקציה מפילה לי את האתר.. חשבתי שחסר סיומת ); בסוף הפונקציה אך עדיין האתר נופל..

    אשמח לדעת איפה טעיתי..
    תודה!

    • רועי יוסף 16 יוני 2021, 16:07

      היי שי, באיזה קובץ אתה מוסיף את הפונקציה?

  • שי 20 יוני 2021, 10:51

    כנראה בלא נכון..
    תוכל לכוון אותי איפה להוסיף?
    תודה!

    • רועי יוסף 5 מרץ 2022, 18:45

      אתה אמור להוסיף אותו בקובץ JavaScript כלשהו הנטען באתר שלך…

  • chava kaminer 3 מרץ 2022, 19:26

    איפה אני מוסיפה את הקוד הזה באתר וורדפרס?

    • רועי יוסף 5 מרץ 2022, 18:45

      את אמורה להוסיף אותו בקובץ JavaScript כלשהו הנטען באתר שלך…

תגובה חדשה

Up!
לבלוג