כיצד לשפר את ציון INP באתר שלכם: טיפים מעשיים לעיכוב קלט, עיבוד ותצוגה

מה זה INP ולמה זה חשוב?

INP (Interaction to Next Paint) הוא מדד Core Web Vitals המודד את זמן התגובה של הדף לאינטראקציות של המשתמש. ציון טוב הוא מתחת ל-200 מילישניות, ציון שדורש שיפור הוא בין 200 ל-500 מילישניות, וציון גרוע הוא מעל 500 מילישניות. ,

כדי לשפר את הציון, צריך להבין את שלושת הרכיבים של כל אינטראקציה:

• עיכוב קלט (Input delay): מתחיל כשהמשתמש מתחיל אינטראקציה עם הדף, ומסתיים כשמטפלי האירועים לאינטראקציה מתחילים לרוץ.
• משך עיבוד (Processing duration): הזמן שלוקח למטפלי האירועים לרוץ עד לסיום.
• עיכוב תצוגה (Presentation delay): הזמן שלוקח לדפדפן להציג את הפריים הבא שמכיל את התוצאה החזותית של האינטראקציה.

המלצות מעשיות לאופטימיזציה

1. עיכוב קלט גבוה – חפשו עבודה אחרת על ה-main thread

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

מה לעשות?

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

2. משך עיבוד גבוה – צמצמו את עבודת מטפלי האירועים

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

מה לעשות?

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

3. עיכוב תצוגה גבוה – התמקדו ברינדור

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

איך לאבחן INP במעבדה?

ניתן למדוד INP בקוד JavaScript על ידי מדידת זמני האירועים. כדי לאבחן אינטראקציות איטיות ידנית, השתמשו בכלי הפיתוח של Chrome, במיוחד בחלונית Performance Insights שמציגה פירוט של שלושת הרכיבים.

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

סיכום

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