דף זה תורגם על ידי Cloud Translation API.

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

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

Addy Osmani

Katie Hempenius

Leena Sohoni

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

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

מהי הטמעה

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

לא אתה יצרת
מוצג מהשרתים של צד שלישי

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

הרבה פעמים משתמשים בהטמעות ב:

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

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

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

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

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

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

הפחתת ההשפעה של קוד צד שלישי

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

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

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

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

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

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

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="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>

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

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

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

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

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

<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>

ספריית עצלנים

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

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

<script src="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>

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

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

שימוש בעצימות נתונים ב-Facebook

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

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

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

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

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

הטמעה של מפה — מפה מוטמעת עם תכונת הגדלה והקטנה.

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

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

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

יצירת צילום מסך של הצומת

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

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

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

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

הכלי יוצר המפה הסטטי עוזר להגדיר את הפרמטרים הנדרשים לכתובת ה-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 מקבל גם פרמטרים להתאמה אישית של הרקע, הצבעים, הגבולות והמידות של התמונה.

שימוש בקליק לטעינה כדי לשפר חזיתות

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

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

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

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

חזית YouTube

Lite-youtube-embed היא דוגמה בחזית מומלצת לנגן YouTube, שנראית כמו הנגן האמיתי, אבל מהירה יותר פי 224. כדי להשתמש בו, צריך להוריד את הסקריפט ואת גיליון הסגנונות ולאחר מכן להשתמש בתג <lite-youtube> ב-HTML או ב-JavaScript. אפשר לכלול באמצעות המאפיין params פרמטרים מותאמים אישית של נגן, שנתמכים ב-YouTube.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
בהמשך מוצגת השוואה בין lite-youtube-embed לבין ההטמעה בפועל.

הטמעת גרסה Lite של YouTube

הטמעה של YouTube

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

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

הסרה או החלפה של הטמעות בקישורים

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

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

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

מאחר שהיציבות החזותית חשובה לחוויית משתמש חלקה, Cumulative Layout Shift (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, שיכול לעזור לכם לצמצם שינויים בפריסה שנובעים מהטמעות פופולריות, כמו Twitter, Facebook וספקים אחרים.

מסיים שינוי הפריסה:

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

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

סיכום

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