משאבים של צד שלישי לרוב משמשים להצגת מודעות או סרטונים ולשילוב עם מדיה חברתית. גישת ברירת המחדל היא לטעון משאבים של צד שלישי מיד לאחר טעינת הדף, אבל הדבר עלול להאט שלא לצורך את טעינת הדף. אם התוכן של הצד השלישי לא קריטי, תוכלו להפחית את עלות הביצועים הזו על ידי טעינה מדורגת.
הביקורת הזו מדגישה הטמעות של צדדים שלישיים שניתן לטעון אותן בהדרגה במהלך האינטראקציה. במקרה כזה, משתמשים בפרופיל במקום בתוכן של צד שלישי עד שהמשתמש יוצר איתו אינטראקציה.
איך מערכת Lighthouse מזהה הטמעות של צדדים שלישיים שניתן לדחות
מערכת Lighthouse מחפשת מוצרים של צד שלישי שניתן לדחות אותם, כמו ווידג'טים של לחצנים חברתיים או הטמעות סרטונים (לדוגמה, נגן מוטמע של YouTube).
הנתונים לגבי מוצרים שניתנים לדחייה והחזיתות הזמינות נשמרים באינטרנט של צד שלישי.
הבדיקה נכשלת אם הדף טוען משאבים ששייכים לאחת מההטמעות האלה של צד שלישי.
איך לעכב טעינת רכיבים של צדדים שלישיים באמצעות דוגמאות לפיתוח
במקום להוסיף הטמעה של צד שלישי ישירות ל-HTML, צריך לטעון את הדף עם רכיב סטטי שנראה דומה לצד השלישי המוטמע בפועל. דפוס האינטראקציה אמור להיראות כך:
בטעינה: מוסיפים חזית לדף.
בעת ריחוף עם העכבר: החזית מתחברת מראש למשאבים של צד שלישי.
בלחיצה: החזית מחליפה את עצמה במוצר של צד שלישי.
חזיתות מומלצות
באופן כללי, הטמעות סרטונים, ווידג'טים של לחצנים חברתיים ווידג'טים של צ'אט יכולים ליישם את דפוס החזית. ברשימה הבאה מוצגות ההמלצות שלנו לגבי חזיתות בקוד פתוח. כשבוחרים חזית, חשוב להביא בחשבון את האיזון בין הגודל לבין קבוצת התכונות. ניתן גם להשתמש בטוען iframe מדורג, כמו vb/lazyframe.
נגן מוטמע של YouTube
נגן מוטמע של Vimeo
צ'אט בשידור חי (Intercom, Drift, Help Scout, Facebook Messenger)
כתיבת חזית משלכם
תוכלו לבחור ליצור פתרון חזית בהתאמה אישית לפי דפוס האינטראקציה שתוארו למעלה. החזית צריכה להיות קטנה באופן משמעותי בהשוואה למוצר הנדחה מראש, ולכלול כמות מספיקה של קוד רק כדי לחקות את המראה של המוצר.
אם אתם מעוניינים שהפתרון שלכם ייכלל ברשימה שלמעלה, תוכלו לעיין בתהליך להגשת בקשות הצטרפות.
מקורות מידע
קוד מקור לטעינה מדורגת של משאבים של צד שלישי עם ביקורת של תבניות WebView.