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