סקירה כללית של שיטות לטעינה יעילה של רכיבים מוטמעים פופולריים של צד שלישי.
באתרים רבים נעשה שימוש בהטמעות של צד שלישי כדי ליצור חוויית משתמש מעניינת, על ידי הענקת גישה לחלקים מסוימים בדף אינטרנט לספק תוכן אחר. הדוגמאות הנפוצות ביותר לתוכן מוטמע של צד שלישי הן נגני וידאו, פידים של רשתות חברתיות, מפות ומודעות.
תוכן של צד שלישי יכול להשפיע על הביצועים של דף בדרכים רבות. זו יכולה להיות חסימת רינדור, התמודדות עם משאבים קריטיים אחרים של רשת ורוחב פס או השפעה על מדדי הליבה לבדיקת חוויית המשתמש באתר. הטמעות של צד שלישי עלולות גם לגרום לתנודות בפריסה בזמן הטעינה. במאמר הזה מפורטות שיטות מומלצות לביצועים שאפשר להשתמש בהן לטעינת הטמעות של צד שלישי, שיטות טעינה יעילות והכלי Layout Shift Terminator שעוזר לצמצם את השינויים בפריסה של הטמעות פופולריות.
מהי הטמעה
הטמעה של צד שלישי היא כל תוכן שמוצג באתר ועומד:
- לא אתה יצרת
- מוצג מהשרתים של צד שלישי
הרבה פעמים משתמשים בהטמעות ב:
- באתרים שקשורים לספורט, לחדשות, לבידור ולאופנה נעשה שימוש בסרטונים כדי להוסיף תוכן טקסטואלי.
- ארגונים שיש להם חשבונות פעילים בטוויטר או ברשתות החברתיות מטמיעים פידים מהחשבונות האלה בדפי האינטרנט שלהם כדי לעורר עניין ולהגיע ליותר אנשים.
- בדפים של מסעדות, פארקים ואולמות אירועים, בדרך כלל מוטמעות מפות.
בדרך כלל, רכיבים מוטמעים של צד שלישי נטענים ברכיבי <iframe> בדף. ספקים של צד שלישי מציעים קטעי HTML, שלרוב מורכבים מתג <iframe> שמושך דף שמורכב מסימני Markup, מסקריפטים ומגיליונות סגנונות. ספקים מסוימים משתמשים גם בקטע קוד של סקריפט שמוסיף <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 מתחיל להיטען).
ריכזנו כאן כמה דרכים לטעינת iframes באיטרציה (lazy load) עבור סוגים שונים של הטמעות.
- סרטוני YouTube: כדי לטעון באיטרציה (lazy-load) 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 להטמעות אחרות של צדדים שלישיים.
שימו לב ש-lazysizes משתמש ב-Intersection Observer API כדי לזהות מתי רכיב הופך למודג.
שימוש ב-data-lazy ב-Facebook
Facebook מספקת סוגים שונים של יישומי פלאגין חברתיים שאפשר להטמיע. האותות האלה כוללים פוסטים, תגובות, סרטונים והלחצן לייק פופולרי. כל יישומי הפלאגין כוללים הגדרה עבור data-lazy. אם מגדירים אותו ל-true, הפלאגין ישתמש במנגנון הטעינה הדרגתית של הדפדפן על ידי הגדרת מאפיין ה-iframe loading="lazy".
פידים של Instagram בטעינה מדורגת
Instagram מספקת בלוק של רכיבי תיוג וסקריפט כחלק מההטמעה. הסקריפט מזין <iframe> לדף. טעינת <iframe> באיטרציות יכולה לשפר את הביצועים, כי הקוד המוטמע יכול להיות גדול מ-100KB בפורמט GZIP. פלאגינים רבים של Instagram לאתרים של WordPress, כמו WPZoom ו-Elfsight, מספקים את האפשרות של טעינת פריטים בזמן אמת.
החלפת הטמעות בחזיתות
הטמעות אינטראקטיביות מוסיפות ערך לדף, אבל משתמשים רבים עשויים שלא לקיים אינטראקציה איתן. לדוגמה, לא כל משתמש שגולל בדף של מסעדה ילחץ על המפה המוטמעת, ירחיב אותה, יגלול בה וינווט בה. באופן דומה, לא כל משתמש בדף של ספק שירותי תקשורת יתכתב עם צ'אטבוט. במקרים כאלה, ניתן להימנע מטעינה או מטעינה מדורגת של ההטמעה על ידי הצגת החזית במקומה.
facade הוא רכיב סטטי שנראה דומה לצד השלישי המוטמע בפועל, אבל הוא לא פונקציונלי, ולכן מפחית את נטל המס על טעינת הדף. בהמשך מפורטות כמה אסטרטגיות לטעינה מיטבית של הטמעות כאלה, ועדיין לספק ערך מסוים למשתמש.
שימוש בתמונות סטטיות כחזיתות
ניתן להשתמש בתמונות סטטיות במקום בהטמעות מפה שבהן לא תצטרכו להפוך את המפה לאינטראקטיבית. אתם יכולים להתקרב לאזור העניין במפה, לצלם תמונה ולהשתמש בה במקום בהטמעה של המפה האינטראקטיבית. אפשר גם להשתמש בתכונה צילום מסך של צומת בכלי הפיתוח כדי לצלם צילום מסך של רכיב iframe המוטמע.
כלי הפיתוח מצלמים את התמונה בתור png, אבל אפשר גם להמיר אותה לפורמט WebP כדי לשפר את הביצועים.
שימוש בתמונות דינמיות כחזיתות
הטכניקה הזו מאפשרת ליצור תמונות שתואמות להטמעה אינטראקטיבית בזמן הריצה. בהמשך מפורטים כמה מהכלים שמאפשרים ליצור גרסאות סטטיות של הטמעות בדפים שלכם.
Maps Static API: שירות Maps Static API של Google יוצר מפה על סמך הפרמטרים של כתובת ה-URL שכלולים בבקשת 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 הוא אחד מהכלים שבהם אפשר להשתמש כדי ליצור צילומי מסך של ציוצים. Tweetpik API מקבל את כתובת ה-URL של הטוויט ומחזיר תמונה עם התוכן שלו. ה-API מקבל גם פרמטרים להתאמה אישית של הרקע, הצבעים, הגבולות והמאפיינים של התמונה.
שימוש ב'קליק כדי לטעון' לשיפור חזיתות
הקונספט של 'קליק כדי לטעון' משלב בין טעינה באיטרציה לבין חזיתות. הדף נטען בהתחלה עם החזית. כשהמשתמש יוצר אינטראקציה עם מקום ה-placeholder הסטטי בלחיצה עליו, הקוד המוטמע של הצד השלישי נטען. הדפוס הזה נקרא גם ייבוא באינטראקציה ואפשר להטמיע אותו באמצעות השלבים הבאים.
- בטעינת הדף: חזית או אלמנט סטטי כלולים בדף.
- בהעברות עכבר: Facade מתחברת מראש לספק ההטמעה של צד שלישי.
- בלחיצה: חזית האתר מוחלפת במוצר של הצד השלישי.
אפשר להשתמש בחזיתות עם הטמעות של צד שלישי לנגני וידאו, לווידג'טים של צ'אט, לשירותי אימות ולווידג'טים של רשתות חברתיות. אנחנו נתקלים לעיתים קרובות בתמונות עם לחצן הפעלה שמוטמעות בסרטונים ב-YouTube, והן משמשות כחזית. הסרטון עצמו נטען רק כשלוחצים על התמונה.
אפשר ליצור חזית מותאמת אישית של 'קליק כדי לטעון' באמצעות התבנית ייבוא במהלך אינטראקציה, או להשתמש באחת מהחזיתות הבאות בקוד פתוח שזמינות לסוגים שונים של הטמעות.
חזית YouTube
Lite-youtube-embed הוא חזית מומלצת לנגן 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 
הטמעה של YouTube חזיתות דומות אחרות שזמינות לנגני YouTube ו-Vimeo הן lite-youtube, lite-vimeo-embed ו-lite-vimeo.
חזית הווידג'ט של Chat
הטעינה של צ'אט בשידור חי ב-React טוענת לחצן שנראה כמו הטמעת צ'אט במקום הטמעת הצ'אט עצמה. אפשר להשתמש בו עם פלטפורמות שונות של ספקי צ'אט, כמו 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>
מסיים שינוי הפריסה
מאחר שהטמעות של צד שלישי לרוב משמיטות את המידות (רוחב, גובה) של התוכן הסופי שהן מעבדות, הן עלולות לגרום לשינויים משמעותיים בפריסה של הדף. קשה לפתור את הבעיה הזו בלי לבדוק באופן ידני את הגדלים הסופיים באמצעות DevTools במגוון גדלים שונים של חלון תצוגה.
עכשיו יש כלי אוטומטי, Layout Shift Terminator, שיכול לעזור לכם לצמצם שינויים בפריסה שנובעים מהטמעות פופולריות, כמו Twitter, Facebook וספקים אחרים.
רכיב סיום של שינוי פריסה:
- טעינת ההטמעה מצד הלקוח ב-iframe.
- משנה את גודל ה-iframe למגוון גדלים פופולריים של אזור תצוגה.
- בכל שדה תצוגה פופולרי, מתועדים המאפיינים של הטמעת הקוד כדי ליצור מאוחר יותר שאילתות מדיה ושאילתות של קונטיינרים.
- הקוד מגדיר את הגודל של עטיפה עם גובה מינימלי סביב ה-Markup של ההטמעה באמצעות שאילתות מדיה (ושאילתות של קונטיינרים) עד שההטמעה מופעלת (לאחר מכן סגנונות הגובה המינימלי יוסרו).
יוצר קטע קוד מוטמע שעבר אופטימיזציה שניתן להעתיק ולהדביק במקום שבו היית כולל את ההטמעה בדף.
אתם מוזמנים לנסות את ה-Layout Shift Terminator ולשלוח לנו משוב ב-GitHub. הכלי נמצא במצב בטא והמטרה שלו היא להשתפר עם הזמן, בעזרת שיפורים נוספים.
סיכום
הטמעות של צד שלישי יכולות לספק למשתמשים ערך רב, אבל ככל שמספר ההטמעות והגודל שלהן בדף גדלים, הביצועים עשויים להיפגע. לכן חשוב למדוד, לשפוט ולהשתמש באסטרטגיות טעינה מתאימות להטמעות על סמך המיקום שלהן, הרלוונטיות שלהן והצרכים של המשתמשים הפוטנציאליים.