אם סקריפט של צד שלישי מאט את מהירות האתר, טעינת דף, יש לך שתי אפשרויות לשיפור הביצועים:
- אפשר להסיר אותו אם הוא לא מוסיף ערך ברור לאתר.
- מבצעים אופטימיזציה של תהליך הטעינה.
בפוסט הזה מוסבר איך לבצע אופטימיזציה של תהליך הטעינה של סקריפטים של צד שלישי באמצעות הטכניקות הבאות:
- שימוש במאפיין
asyncאו במאפייןdeferבתגי<script> - יצירת חיבורים מוקדמים למקורות נדרשים
- טעינה מדורגת
- אופטימיזציה של הצגת סקריפטים של צד שלישי
אפשר להשתמש ב-async או ב-defer
כי סקריפטים סינכרוניים משהים DOM ביצירה וברינדור, צריך תמיד לטעון סקריפטים של צד שלישי באופן אסינכרוני, אלא אם הסקריפט צריך לרוץ לפני שניתן לעבד את הדף.
המאפיינים async ו-defer מציינים לדפדפן שהוא יכול להמשיך בתהליך ניתוח
בזמן טעינת הסקריפט ברקע, ואז להריץ את הסקריפט
לאחר הטעינה. כך, הורדות של סקריפטים לא חוסמות יצירה או דפים של 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למשאבים פחות קריטיים, כמו נגן וידאו שמופיע למטה לקפל.
השימוש במאפיינים האלה יכול להאיץ משמעותית את טעינת הדף. לדוגמה, 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 יש מסמכים לטעינה מדורגת של מודעות.
ניתן גם להגדיר תוכן של צד שלישי להיטען רק כאשר המשתמשים גוללים לראשונה אל בקטע הזה בדף.
תצפית צומת
הוא ממשק API של דפדפן שמזהה ביעילות כאשר רכיב נכנס או יוצא
אזור התצוגה של הדפדפן, ואפשר להשתמש בה כדי ליישם את השיטה הזו.
lazysizes היא ספריית JavaScript פופולרית
לטעינה מדורגת של תמונות וגם iframes.
הוא תומך בהטמעות של YouTube
ווידג'טים.
יש בו גם תמיכה אופציונלית
עבור Intersection Observer.
שימוש במאפיין 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 worker כדי לשמור סקריפטים במטמון מהשרתים של צד שלישי
אפשר להשתמש בעובדי שירות כדי לשמור סקריפטים במטמון משרתים של צד שלישי כחלופה לאירוח עצמי. כך מקבלים שליטה רבה יותר על שמירה במטמון, תוך שמירה על היתרונות של רשתות CDN של צד שלישי.
ניתן לקבוע באיזו תדירות סקריפטים מאוחזרים מחדש מהרשת,
ליצור אסטרטגיית טעינה שמווסתת בקשות לבקשות לא חיוניות,
במשאבים של צד שלישי, עד שמשתמש מגיע לאינטראקציה חשובה בדף.
בעזרת preconnect אפשר ליצור קשרים מוקדמים וגם לעזור
לצמצם את עלויות הרשת.