שיטות מומלצות לשימוש בהטמעות של צד שלישי

סקירה כללית של טכניקות לטעינה יעילה של רכיבים פופולריים שהוטמעו בדף, שיצרו צדדים שלישיים.

Addy Osmani
Katie Hempenius
Katie Hempenius
X
Leena Sohoni
Leena Sohoni
X

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

תוכן של צד שלישי יכול להשפיע על הביצועים של דף בדרכים רבות. היא יכולה לחסום את העיבוד, להתחרות עם משאבים קריטיים אחרים על הרשת ורוחב הפס, או להשפיע על מדדי Core Web Vitals. רכיבים מוטמעים של צד שלישי עשויים גם לגרום לשינויים בפריסה בזמן הטעינה שלהם. במאמר הזה נדון בשיטות מומלצות לשיפור הביצועים שאפשר להשתמש בהן כשמטמיעים תוכן של צד שלישי, בטכניקות יעילות לטעינה ובכלי Layout Shift Terminator שעוזר לצמצם שינויים בפריסה של הטמעות פופולריות.

מהי הטמעה

הטמעה של צד שלישי היא כל תוכן שמוצג באתר שלכם ומתקיים לגביו אחד מהתנאים הבאים:

  • לא נוצר על ידך
  • הצגת מודעות משרתים של צד שלישי

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

הטמעה נפוצה במקרים הבאים:

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

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

השפעת ההטמעות של צד שלישי על הביצועים

הרבה הטמעות פופולריות כוללות יותר מ-100 KB של JavaScript, ולפעמים אפילו מגיעות ל-2 MB. הם נטענים לאט יותר ומעמיסים על השרשור הראשי בזמן ההפעלה. כלי מעקב אחר ביצועים כמו Lighthouse וכלי הפיתוח ל-Chrome עוזרים למדוד את ההשפעה של תוכן מוטמע מצד שלישי על הביצועים.

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

מומלץ לבדוק מדי פעם את ההשפעה של ההטמעות ושל קוד צד שלישי על הביצועים, כי קוד המקור של ההטמעה עשוי להשתנות. זו הזדמנות טובה להסיר קוד מיותר.

ביקורת של Lighthouse שמציגה את ההשפעה של כל קטע קוד של צד שלישי על דף.

שיטות מומלצות לטעינה

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

סדר הסקריפטים

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

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

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

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="/articles/index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

טעינה מדורגת

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

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

טעינה מדורגת בדפדפן עבור <iframe>

אם הטמעתם תוכן של צד שלישי באמצעות רכיבי <iframe>, אתם יכולים להשתמש בטעינה מדורגת ברמת הדפדפן כדי לדחות את הטעינה של רכיבי iframe שלא מוצגים במסך עד שהמשתמשים יגללו קרוב אליהם. מאפיין הטעינה של <iframe> זמין בכל הדפדפנים המודרניים.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

המאפיין loading תומך בערכים הבאים:

  • ‫lazy: מציין שהדפדפן צריך לדחות את הטעינה של ה-iframe. הדפדפן יטען את ה-iframe כשהוא יתקרב לאזור התצוגה. משתמשים בתכונה הזו אם ה-iframe מתאים לטעינה עצלה.
  • ‫eager: טעינת ה-iframe באופן מיידי. משתמשים בתכונה הזו אם ה-iframe לא מתאים לטעינה עצלה. אם לא צוין מאפיין loading, זוהי התנהגות ברירת המחדל – למעט במצב Lite.
  • ‫auto: הדפדפן קובע אם לבצע טעינה עצלה של המסגרת הזו.

דפדפנים שלא תומכים במאפיין loading מתעלמים ממנו, כך שאפשר להחיל טעינה עצלה ברמת הדפדפן כשיפור הדרגתי (progressive enhancement). דפדפנים שתומכים במאפיין עשויים להשתמש בהטמעות שונות של ערך הסף distance-from-viewport (המרחק שבו מתחיל הטעינה של ה-iframe).

בהמשך מפורטות כמה דרכים לטעינה עצלה של iframe לסוגים שונים של הטמעות.

  • סרטונים ב-YouTube: כדי להשתמש בטעינה מדורגת של iframe של נגן וידאו ב-YouTube, צריך לכלול את המאפיין loading בקוד ההטמעה שסופק על ידי YouTube. טעינה מדורגת של תוכן מוטמע מ-YouTube יכולה לחסוך כ-500 KB בטעינת הדף הראשונית.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>
  • מפות Google: כדי להטעין iframe של מפות Google בטעינה עצלה, צריך לכלול את המאפיין loading בקוד של הטמעת ה-iframe שנוצר על ידי Google Maps Embed API. הנה דוגמה לקוד עם placeholder למפתח Google Cloud API.
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

ספריית lazysizes

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

‫lazysizes הוא כלי מהיר לטעינה מדורגת של תמונות ושל iframe, שמתאים לקידום אתרים (SEO). אחרי שמורידים את הרכיב, אפשר להשתמש בו עם iframe להטמעה של YouTube באופן הבא.

<script src="/articles/lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

באופן דומה, אפשר להשתמש ב-lazysizes עם תגי iframe להטמעות אחרות של צד שלישי.

שימו לב: הספרייה lazysizes משתמשת ב-Intersection Observer API כדי לזהות מתי רכיב הופך לגלוי.

שימוש ב-data-lazy בפייסבוק

פייסבוק מספקת סוגים שונים של תוספים לרשתות חברתיות שאפשר להטמיע. הנתונים האלה כוללים פוסטים, תגובות, סרטונים והלחצן הכי פופולרי לייק. כל הפלאגינים כוללים הגדרה של data-lazy. הגדרת הערך true מבטיחה שהתוסף ישתמש במנגנון הטעינה העצלנית של הדפדפן על ידי הגדרת מאפיין ה-iframe‏ loading="lazy".

טעינה מדורגת של פידים באינסטגרם

‫Instagram מספקת בלוק של תגי עיצוב וסקריפט כחלק מההטמעה. הסקריפט מוסיף <iframe> לדף. טעינה עצלה של <iframe> יכולה לשפר את הביצועים, כי גודל ההטמעה יכול להיות יותר מ-100 KB אחרי דחיסה ב-gzip. פלאגינים רבים של Instagram לאתרי WordPress, כמו WPZoom ו-Elfsight, מספקים את האפשרות של טעינה עצלה.

החלפת הטמעות בחזיתות

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

מפה מוטמעת עם אפשרות להגדיל ולהקטין את התצוגה.
חזית של מפה שהיא תמונה.

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

שימוש בתמונות סטטיות כחזיתות

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

האפשרות 'יצירת צילום מסך של הצומת' מודגשת בתפריט הקשר בכלי לעריכת HTML.

כלי הפיתוח מצלם את התמונה בפורמט png, אבל אפשר גם להמיר אותה לפורמט WebP כדי לשפר את הביצועים.

שימוש בתמונות דינמיות כחזיתות

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

  • ‫Maps Static API: שירות Maps Static API של Google יוצר מפה על סמך פרמטרים של כתובת URL שכלולים בבקשת HTTP רגילה, ומחזיר את המפה כתמונה שאפשר להציג בדף אינטרנט. כתובת ה-URL צריכה לכלול את מפתח Google Maps API ולהופיע בתג <img> בדף כמאפיין src.

    הכלי Static map maker עוזר להגדיר את הפרמטרים הנדרשים לכתובת ה-URL ומספק את הקוד של רכיב התמונה בזמן אמת.

    בקטע הקוד הבא מוצג קוד של תמונה עם מקור שמוגדר לכתובת URL של Maps Static API. היא נכללת בתג קישור שמבטיח שאפשר לגשת למפה עצמה בלחיצה על התמונה. (הערה: מאפיין מפתח ה-API לא נכלל בכתובת ה-URL)

    <a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>

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

שימוש בטכנולוגיית click-to-load כדי לשפר את חזיתות הבניינים

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

  1. בטעינת הדף: דוגמה לפיתוח או רכיב סטטי כלול בדף.
  2. כשמעבירים את העכבר מעל: מתבצעת התחברות מראש של חזית האתר לספק ההטמעה של צד שלישי.
  3. במקרה של קליק: חזית המוצר מוחלפת במוצר של הצד השלישי.

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

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

  • YouTube facade

    ‫Lite-youtube-embed הוא facade מומלץ לנגן YouTube, שנראה כמו הנגן האמיתי אבל מהיר פי 224. כדי להשתמש בו, צריך להוריד את הסקריפט ואת גיליון הסגנונות, ואז להשתמש בתג <lite-youtube> ב-HTML או ב-JavaScript. אפשר לכלול פרמטרים מותאמים אישית של נגן שנתמכים על ידי YouTube באמצעות המאפיין params.

    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

    בהמשך מופיעה השוואה בין lite-youtube-embed לבין ההטמעה בפועל.

    הטמעה של YouTube Lite
    A lite-YouTube embed
    הטמעה בפועל של סרטון YouTube
    A YouTube embed

    חזיתות דומות אחרות שזמינות לנגני YouTube ו-Vimeo הן lite-youtube,‏ lite-vimeo-embed ו-lite-vimeo.

  • חזית של ווידג'ט צ'אט

    React live chat loader טוען לחצן שנראה כמו הטמעה של צ'אט במקום ההטמעה עצמה. אפשר להשתמש בו עם פלטפורמות שונות של ספקי צ'אט, כמו Intercom, ‏ Help Scout ו-Messenger. הווידג'ט של התכונה 'קהלים שדומים לקהלים קיימים' קל הרבה יותר מווידג'ט הצ'אט, והוא נטען מהר יותר. אפשר להחליף אותו בווידג'ט הצ'אט בפועל כשהמשתמש מעביר את העכבר מעל הכפתור או לוחץ עליו, או אם הדף לא היה פעיל במשך זמן רב. במקרה לדוגמה של Postmark מוסבר איך הם הטמיעו את react-live-chat-loader ושיפרו את הביצועים.

    ווידג'ט צ'אט של Postmark בעורך HTML שבו מוצג קוד האריזה.

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

יציבות הפריסה

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

יציבות חזותית חשובה לחוויית משתמש חלקה, ולכן מדד יציבות חזותית (CLS) מודד באיזו תדירות מתרחשים שינויים כאלה וכמה הם משבשים את חוויית המשתמש.

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

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

הטמעה של רכיבים פופולריים כמו YouTube, מפות Google ו-Facebook מספקת את קוד ההטמעה עם מאפייני גודל שצוינו. עם זאת, יכול להיות שיש ספקים שלא כוללים את זה. לדוגמה, בקטע הקוד הזה לא מצוינים הממדים של ההטמעה שמתקבלת.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

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

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

רכיב מסיים של שינוי הפריסה

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

עכשיו יש כלי אוטומטי, Layout Shift Terminator, שיכול לעזור לכם לצמצם את התזוזות בפריסה של תוכן מוטמע פופולרי, כמו תוכן מטוויטר, מפייסבוק ומספקים אחרים.

רכיב מסיים של שינוי הפריסה:

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

  • יוצר קטע קוד מוטמע אופטימלי שאפשר להעתיק ולהדביק במקום שבו הייתם כוללים את ההטמעה בדף.

    הכלי Layout Shift Terminator מציג פלט קוד ותצוגה מקדימה.

אתם מוזמנים לנסות את Layout Shift Terminator ולשלוח משוב על פרויקט Layout Shift Terminator ב-GitHub. הכלי נמצא בשלב בטא, ומטרתו היא להשתפר עם הזמן באמצעות שיפורים נוספים.

סיכום

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