אם סקריפט של צד שלישי מאט את טעינת הדף, יש לכם שתי אפשרויות לשיפור הביצועים:
- אם הוא לא מוסיף ערך ברור לאתר, כדאי להסיר אותו.
- מבצעים אופטימיזציה של תהליך הטעינה.
במאמר הזה נסביר איך לבצע אופטימיזציה של תהליך הטעינה של סקריפטים של צד שלישי באמצעות הטכניקות הבאות:
- שימוש במאפיין
asyncאוdeferבתגים<script> - יצירת חיבורים מוקדמים למקורות הנדרשים
- טעינה מדורגת
- אופטימיזציה של הצגת סקריפטים של צד שלישי
משתמשים ב-async או ב-defer
מאחר שסקריפטים סינכרוניים מעכבים את היצירה והעיבוד של DOM, תמיד צריך לטעון סקריפטים של צד שלישי באופן אסינכרוני, אלא אם הסקריפט צריך לפעול לפני שאפשר לעבד את הדף.
המאפיינים async ו-defer מאפשרים לדפדפן להמשיך לנתח את ה-HTML בזמן הטעינה של הסקריפט ברקע, ולאחר מכן להריץ את הסקריפט אחרי שהוא נטען. כך, הורדות הסקריפטים לא חוסמות את היצירה של DOM או את העיבוד של הדף, ומאפשרות למשתמש לראות את הדף לפני שכל הסקריפטים מסתיימים להיטען.
<script async src="script.js">
<script defer src="script.js">
ההבדל בין המאפיינים async ו-defer הוא המועד שבו הדפדפן מפעיל את הסקריפטים.
async
סקריפטים עם המאפיין async מופעלים בפעם הראשונה אחרי שההורדה שלהם מסתיימת, לפני אירוע load של החלון. המשמעות היא שיכול להיות (וסביר להניח) שהסקריפטים של async לא יפעלו בסדר שבו הם מופיעים ב-HTML. המשמעות היא גם שהם יכולים להפריע ליצירת DOM אם הם מסיימים את ההורדה בזמן שהמנתח עדיין פועל.