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