אם סקריפט של צד שלישי מאט את טעינת הדף, יש לכם שתי אפשרויות לשיפור הביצועים:
- אם הוא לא מוסיף ערך ברור לאתר, כדאי להסיר אותו.
- מבצעים אופטימיזציה של תהליך הטעינה.
במאמר הזה נסביר איך לבצע אופטימיזציה של תהליך הטעינה של סקריפטים של צד שלישי באמצעות הטכניקות הבאות:
- שימוש במאפיין
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 אם ההורדה מסתיימת בזמן שהמנתח עדיין בעבודה.
async עדיין יכולים לחסום
ניתוח HTML.defer
סקריפטים עם המאפיין defer מופעלים אחרי שניתוח ה-HTML מסתיים, אבל לפני האירוע DOMContentLoaded. defer מוודא שהסקריפטים פועלים בסדר שבו הם מופיעים ב-HTML ולא חוסמים את המנתח.
defer ממתינים להרצה עד שהדפדפן מסיים לנתח את ה-HTML.- משתמשים ב-
asyncאם חשוב שהסקריפט ירוץ מוקדם יותר בתהליך הטעינה. - כדאי להשתמש ב-
deferלמשאבים פחות קריטיים, כמו נגן וידאו בחלק הנגלל.
השימוש במאפיינים האלה יכול להאיץ משמעותית את טעינת הדף. לדוגמה, חברת Telelegraph דחו את כל הסקריפטים, כולל מודעות וניתוח נתונים, ושפרו את זמן הטעינה של המודעות בארבע שניות בממוצע.
יצירת חיבורים מוקדמים למקורות הנדרשים
אפשר לחסוך 100 עד 500 אלפיות השנייה על ידי יצירת חיבורים מוקדמים למקורות חשובים של צד שלישי.
שני סוגי <link>, preconnect ו-dns-prefetch, יכולים לעזור כאן:
preconnect
<link rel="preconnect"> מורה לדפדפן שהדף שלכם רוצה ליצור חיבור למקור אחר, ושאתם רוצים שהתהליך יתחיל בהקדם האפשרי. כשהדפדפן מבקש משאב מהמקור שמחובר מראש, ההורדה מתחילה מיד.
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch> מטפל בקבוצת משנה קטנה של הדומיינים <link rel="preconnect">. יצירת חיבור כוללת חיפוש DNS ולחיצת יד של TCP, וכשלמקורות מאובטחים, מו"מ ב-TLS (אבטחת שכבת התעבורה).
dns-prefetch מורה לדפדפן לפענח רק את ה-DNS של דומיין ספציפי לפני שנקראה באופן מפורש.
הרמז preconnect מתאים במיוחד לחיבורים הכי קריטיים. לדומיינים פחות חשובים של צדדים שלישיים, אפשר להשתמש ב-<link rel=dns-prefetch>.
<link rel="dns-prefetch" href="http://example.com">
התמיכה בדפדפנים ב-dns-prefetch שונה במקצת מהתמיכה ב-preconnect, כך ש-dns-prefetch יכול לשמש כחלופה לדפדפנים שלא תומכים ב-preconnect. כדי להטמיע את התג בצורה בטוחה, צריך להשתמש בתגי קישור נפרדים:
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
טעינה מדורגת של משאבים של צד שלישי
משאבים מוטמעים של צד שלישי יכולים להאט משמעותית את טעינת הדף אם הם לא בנויים בצורה טובה. טעינה מדורגת היא דרך טובה לשפר את מהירות הדף ואת מדדי ציור הסקר אם הם לא חיוניים, או נמצאים בחלק הנגלל (כלומר, אם המשתמשים צריכים לגלול כדי לראות אותן). כך, המשתמשים מקבלים מהר יותר את התוכן הראשי בדף ונהנים מחוויה טובה יותר.
גישה יעילה אחת היא לבצע טעינה מדורגת של תוכן של צד שלישי אחרי שהתוכן הראשי של הדף נטען. כדאי להשתמש במודעות כדי ליישם את הגישה הזו.
מודעות הן מקור הכנסה חשוב לאתרים רבים, אבל המשתמשים מגיעים לאתר בגלל התוכן. טעינה מדורגת של מודעות והצגת התוכן העיקרי מהירה יותר יכולים להגדיל את אחוז הניראות הכולל של מודעה. לדוגמה, חברת MediaVine עברה למודעות בטעינה מדורגת ונהנתה משיפור של 200% במהירות הטעינה של דפים. ב-Google Ad Manager יש מסמכי תיעוד בנושא טעינה מדורגת של מודעות.
אפשר גם להגדיר שתוכן של צד שלישי ייטען רק כשהמשתמשים גוללים לקטע הזה בדף בפעם הראשונה.
Intersection Observer הוא ממשק API של דפדפן שמזהה ביעילות מתי רכיב נכנס לאזור התצוגה של הדפדפן או יוצא ממנו, ואפשר להשתמש בו כדי ליישם את השיטה הזו. lazysizes היא ספרייה פופולרית של JavaScript לטעינה מדורגת של תמונות ו-iframes.
הוא תומך בהטמעות וווידג'טים של YouTube.
הוא גם כולל תמיכה אופציונלית ב-Intersection Observer.
השימוש במאפיין loading לטעינה מדורגת של תמונות ורכיבי iframe הוא חלופה מצוינת לשיטות של JavaScript, והוא זמין לאחרונה בגרסה 76 של Chrome.
אופטימיזציה של הצגת סקריפטים של צד שלישי
ריכזנו כאן כמה שיטות מומלצות לאופטימיזציה של השימוש בסקריפטים של צד שלישי.
אירוח CDN של צד שלישי
בהרבה מקרים ספקי צד שלישי מספקים כתובות URL של קובצי JavaScript שהם מארחים, בדרך כלל ברשת להעברת תוכן (CDN). היתרונות של הגישה הזו הם שאפשר להתחיל במהירות – פשוט מעתיקים ומדביקים את כתובת ה-URL – ואין עלויות תחזוקה נוספות. הספק של הצד השלישי מטפל בהגדרת השרת ובעדכוני הסקריפטים.
אבל מכיוון שהם לא באותו מקור כמו שאר המשאבים, טעינת קבצים מ-CDN ציבורי כרוכה בעלות רשת. הדפדפן צריך לבצע חיפוש DNS, ליצור חיבור HTTP חדש, ובמקורות מאובטחים לבצע לחיצת יד של SSL עם השרת של הספק.
כשמשתמשים בקבצים משרתים של צד שלישי, רק לעיתים רחוקות יש לכם שליטה על השמירה במטמון. אם תסתמכו על אסטרטגיית מטמון של מישהו אחר, יכול להיות שסקריפטים יתאחזרו מהרשת ללא צורך בתדירות גבוהה מדי.
סקריפטים של צד שלישי באירוח עצמי
סקריפטים של צד שלישי באירוח עצמי הם אפשרות שמעניקה שליטה רבה יותר על תהליך הטעינה של סקריפט. כשמארחים בעצמם, אפשר:
- לקצר את זמני חיפוש ה-DNS והמעבר הלוך ושוב.
- שיפור כותרות אחסון במטמון של HTTP.
- כדאי להשתמש ב-HTTP/2 או ב-HTTP/3 החדש יותר.
לדוגמה, ב-Casper הצליחו לקצר את זמני הטעינה ב-1.7 שניות על ידי אירוח עצמאי של סקריפט לבדיקת A/B.
עם זאת, באירוח עצמי יש חיסרון גדול אחד: סקריפטים עשויים להיות לא מעודכנים ולא מקבלים עדכונים אוטומטיים כשיש שינוי בממשק API או תיקון אבטחה.
שימוש בקובצי שירות (service workers) כדי לשמור בסשן סקריפטים משרתים של צד שלישי
אפשר להשתמש בשירותי עובדים כדי לשמור סקריפטים משרתים של צד שלישי במטמון, כחלופה לאירוח עצמי. כך אפשר לשלוט בצורה טובה יותר בשמירה במטמון, תוך שמירה על היתרונות של רשתות CDN של צד שלישי.
אתם יכולים לקבוע באיזו תדירות הסקריפטים יאוחזרו מהרשת, וליצור אסטרטגיית טעינה שמגבילה את הבקשות למשאבים של צד שלישי שאינם חיוניים, עד שהמשתמש מגיע לאינטראקציה מרכזית בדף.
בעזרת preconnect אפשר ליצור חיבורים מוקדמים וגם להוזיל את עלויות הרשת.