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

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

אז מה הפתרון ?

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

<script>

(function(d, s) {

  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {

    if (d.getElementById(id)) {return;}

    js = d.createElement(s); js.src = url; js.id = id;

    fjs.parentNode.insertBefore(js, fjs);

  };

  load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk');

  load('https://apis.google.com/js/plusone.js', 'gplus1js');

  load('//platform.twitter.com/widgets.js', 'tweetjs');

}(document, 'script'));

</script>

קטע קוד זה ממוקם בסוף ה-Body של דף האינטרנט. למרות שקטע קוד זה טוב בהרבה מהקוד שניתן לנו על ידי פייסבוק למשל, כיון שהוא מופעל רק בשלב ה-Onload, שלב שבו הגולש כבר רואה חלק מהדף, הוספת סקריפטים דינמית באמצעות סקריפט אחר ל-DOM (מבנה הדף) באמצעות appendChild או insertBefore, מעכבת את ביצוע ה-onLoad ובכך מעכבת באופן משמעותי את ציור הדף. זה הופך להיות חשוב יותר כאשר אלו רכיבים שאינם מגיעים לגולשים שלנו בישראל משרתים בארץ, אלא משרתים הנמצאים אי שם בחו"ל.

הפתרון הטוב יותר מבוסס על קטע הקוד הבא:

<script>

(function(w, d, s) {

  function go(){

    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {

         if (d.getElementById(id)) {return;}

         js = d.createElement(s); js.src = url; js.id = id;

         fjs.parentNode.insertBefore(js, fjs);

       };

    load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk');

    load('https://apis.google.com/js/plusone.js', 'gplus1js');

    load('//platform.twitter.com/widgets.js', 'tweetjs');

  }

  if (w.addEventListener) { w.addEventListener("load", go, false); }

  else if (w.attachEvent) { w.attachEvent("onload",go); }

}(window, document, 'script'));

</script>

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

 אחרי כל המאמר הזה, מה באמת חשוב לזכור ?

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