אם סקריפט של צד שלישי מאט את טעינת הדף, יש לך שתי אפשרויות לשיפור הביצועים:
- צריך להסיר אותו אם הוא לא מוסיף ערך ברור לאתר.
- אופטימיזציה של תהליך הטעינה.
בפוסט הזה נסביר איך לייעל את תהליך הטעינה של סקריפטים של צד שלישי באמצעות הטכניקות הבאות:
- שימוש במאפיין
asyncאו במאפייןdeferבתגי<script> - יצירת קשרים מוקדמים למקורות נדרשים
- טעינה מדורגת
- אופטימיזציה של הצגת סקריפטים של צד שלישי
שימוש ב-async או ב-defer
מכיוון שסקריפטים סינכרוניים מעכבים את היצירה והעיבוד של DOM, צריך תמיד לטעון סקריפטים של צד שלישי באופן אסינכרוני, אלא אם הסקריפט צריך לפעול לפני שאפשר לעבד את הדף.
המאפיינים async ו-defer מורים לדפדפן שאפשר לנתח את ה-HTML בזמן טעינת הסקריפט ברקע, ולאחר מכן להפעיל אותו לאחר שהוא נטען. כך, הורדות של סקריפטים לא חוסמות את בניית ה-DOM או את עיבוד הדפים, ולכן המשתמשים יכולים לראות את הדף לפני שהטעינה של כל הסקריפטים הסתיימה.
<script async src="script.js">
<script defer src="script.js">
ההבדל בין המאפיינים async ו-defer הוא כשהדפדפן מריץ את הסקריפטים.
async
סקריפטים עם המאפיין async מופעלים בהזדמנות הראשונה אחרי שההורדה שלהם הסתיימה ולפני אירוע הטעינה של החלון. כלומר, ייתכן (וסביר להניח) שסקריפטים של async לא יפעלו בסדר שבו הם מופיעים ב-HTML. זה גם אומר שהם עלולים להפסיק את בניית ה-DOM אם ההורדה תסתיים בזמן שהמנתח עדיין בעבודה.
async עדיין יכולים לחסום
את ניתוח ה-HTML.defer
סקריפטים עם המאפיין defer מופעלים אחרי שניתוח ה-HTML מסתיים לחלוטין, אבל לפני האירוע DOMContentLoaded. defer מבטיח שהסקריפטים ירוצו בסדר שבו הם מופיעים ב-HTML, ולא יחסום את המנתח.
defer ממתינים להפעלה
עד שהדפדפן יסיים לנתח את ה-HTML.- אם חשוב לכם שהסקריפט ירוץ מוקדם יותר בתהליך הטעינה, השתמשו ב-
async. - כדאי להשתמש ב-
deferלמשאבים פחות קריטיים, כמו נגן וידאו בחלק הנגלל.
השימוש במאפיינים האלה יכול להאיץ משמעותית את טעינת הדף. לדוגמה, Telegraph דחה את כל הסקריפטים שלהם, כולל מודעות וניתוח נתונים, וכתוצאה מכך שיפרה את זמן הטעינה של המודעות בארבע שניות בממוצע.
יצירת קשרים מוקדמים למקורות נדרשים
אפשר לחסוך 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 Overer הוא ממשק API לדפדפן שמזהה ביעילות מתי רכיב נכנס לאזור התצוגה של הדפדפן או יוצא ממנו. תוכלו להשתמש בו כדי ליישם את השיטה הזו. lazysizes היא ספריית JavaScript פופולרית לטעינה מדורגת של תמונות וגם iframes.
הוא תומך בהטמעות וווידג'טים של YouTube.
יש לו גם תמיכה אופציונלית ב'צפייה בצמתים'.
השימוש במאפיין loading לטעינה מדורגת של תמונות ומסגרות iframe הוא חלופה מצוינת לשיטות של JavaScript, ולאחרונה היא זמינה ב-Chrome 76!
אופטימיזציה של אופן ההצגה של סקריפטים של צד שלישי
ריכזנו כאן כמה אסטרטגיות מומלצות לאופטימיזציה של השימוש בסקריפטים של צד שלישי.
אירוח CDN של צד שלישי
מקובל שספקי צד שלישי מספקים כתובות URL לקובצי JavaScript שהם מארחים, בדרך כלל ברשת להעברת תוכן (CDN). היתרונות של גישה זו הם שאתה יכול להתחיל במהירות - פשוט להעתיק ולהדביק את כתובת האתר - ללא תקורת תחזוקה. ספק הצד השלישי מטפל בעדכונים של הגדרות השרת ובסקריפטים.
אבל מכיוון שהם לא מאותו מקור כמו שאר המשאבים, טעינת קבצים מ-CDN ציבורי כרוכה בעלות רשת. הדפדפן צריך לבצע חיפוש DNS, ליצור חיבור HTTP חדש, ובמקורות מאובטחים לבצע לחיצת יד של SSL עם השרת של הספק.
כשמשתמשים בקבצים משרתים של צד שלישי, רק לעיתים רחוקות יש לכם שליטה על השמירה במטמון. הסתמכות על אסטרטגיית השמירה במטמון של מישהו אחר עלולה לגרום לשליפה מחדש של סקריפטים שלא לצורך מהרשת לעיתים קרובות מדי.
סקריפטים של צד שלישי באירוח עצמי
אפשרות באירוח של סקריפטים של צד שלישי מעניקה לכם יותר שליטה בתהליך הטעינה של הסקריפט. אירוח עצמי מאפשר לכם:
- צמצום חיפושי DNS וקיצורים של פעולות הלוך ושוב.
- לשפר את הכותרות של שמירת HTTP במטמון.
- נצלו את HTTP/2 או HTTP/3 החדש יותר.
לדוגמה, Casper הצליחה לקצר 1.7 שניות מזמני הטעינה על ידי אירוח עצמי של סקריפט לבדיקת A/B.
אבל לאירוח עצמי יש יתרון אחד חשוב: סקריפטים יכולים לעבור למצב לא עדכני ולא יקבלו עדכונים אוטומטיים כשיש שינוי ב-API או תיקון אבטחה.
שימוש ב-Service Workers כדי לשמור סקריפטים במטמון משרתים של צד שלישי
אתם יכולים להשתמש ב-Service Workers כדי לשמור סקריפטים במטמון משרתים של צד שלישי במקום באירוח עצמי. כך יש לכם שליטה רבה יותר על השמירה במטמון, תוך שמירה על היתרונות של רשתות CDN של צד שלישי.
ניתן לכם לקבוע באיזו תדירות סקריפטים מאוחזרים מחדש מהרשת וליצור אסטרטגיית טעינה ומווסתת בקשות למשאבים לא חיוניים של צד שלישי, עד שמשתמש מגיע לאינטראקציה חשובה בדף.
בעזרת preconnect אפשר ליצור חיבורים מוקדמים וגם להוזיל את עלויות הרשת.