הגדרה קצרה
INP מודד את זמן התגובה של הדף לאינטראקציה של המשתמש (קליק, הקלדה, מגע) לאורך כל הביקור.
הרחבה
החליף את FID במרץ 2024. יעד: מתחת ל-200ms. הגורם המרכזי הוא JavaScript כבד שחוסם את ה-main thread. פתרונות: פיצול קוד, טעינה עצלה של scripts, שימוש ב-Web Workers, וקוד React יעיל יותר (memoization, virtualization).
למה Interaction to Next Paint חשוב לקידום ולשיווק?
INP מודד את מה שגולש מרגיש כ״האתר תקוע״: לוחצים על תפריט ההמבורגר ושום דבר לא קורה, מקלידים בשדה חיפוש והאותיות מופיעות באיחור, מוסיפים מוצר לעגלה והכפתור לא מגיב. מאז מרץ 2024 INP הוא המדד הרשמי לרספונסיביות במקום FID, וההבדל משמעותי: FID מדד רק את העיכוב בלחיצה הראשונה, ואילו INP מסתכל על כל האינטראקציות בביקור ומדווח על אחת מהגרועות שבהן. אתרים רבים שעברו את FID בקלות נכשלים ב-INP.
לעסק ישראלי זה המדד שמשפיע הכי ישירות על המרות, כי הוא נמדד בדיוק ברגעי הפעולה: לחיצה על ״התקשרו״, שליחת טופס ליד, בחירת מידה בחנות. וורדפרס עם תבנית כבדה, בונה עמודים, תוספי מעקב ופיקסלים של פייסבוק וטיקטוק מצטברת לכמות JavaScript שמחזיקה את ה-main thread עסוק בדיוק כשהגולש מנסה לעשות משהו. במכשירי אנדרואיד זולים, שנפוצים בארץ, הבעיה מוחשית בהרבה מאשר במחשב של המעצב.
איך מודדים ומיישמים את זה בפועל?
חשוב להבין את מגבלת המדידה: INP נמדד רק מגולשים אמיתיים. Lighthouse ובדיקת המעבדה של PageSpeed Insights לא מציגים אותו, ולכן מקור האמת הוא דוח Core Web Vitals ב-Search Console ונתוני השדה בראש דף PageSpeed Insights. בבדיקת המעבדה אפשר להשתמש במדד Total Blocking Time כאינדיקציה: TBT גבוה בדרך כלל אומר שגם INP יהיה בעייתי.
לאבחון עצמו פותחים את Chrome DevTools, מקליטים בלשונית Performance, ומבצעים את האינטראקציות שהגולש מבצע: פתיחת תפריט, לחיצה על טאב, הקלדה בטופס. הכלי מסמן את האינטראקציה הארוכה ביותר ומראה איזה סקריפט רץ באותו רגע. ברוב המקרים האשם הוא סקריפט צד שלישי של ניהול תגיות, צ׳אט או A/B testing, או תוסף וורדפרס שמאזין לכל קליק. הפתרונות: להסיר סקריפטים שלא בשימוש, לדחות טעינה של סקריפטים לא קריטיים עד אחרי האינטראקציה הראשונה, לפצל עבודה ארוכה למקטעים קטנים, ולהעניק משוב ויזואלי מיידי ללחיצה גם אם העיבוד ממשיך ברקע. באתרים שנבנו ב-React או בפריימוורקים דומים הבעיה היא לרוב רינדור מחדש של רכיבים גדולים בכל הקלדה.
טעויות נפוצות
- לחגוג ציון מעבדה גבוה ב-PageSpeed ולא לשים לב שהמדד בכלל לא נמדד שם.
- להשאיר שישה או שבעה פיקסלים וסקריפטי מעקב שרצים על כל קליק, בלי לבדוק מי מהם עוד נדרש.
- לדחות את כל ה-JavaScript עד לאינטראקציה הראשונה, ואז לגרום לקיפאון ארוך בדיוק בלחיצה הראשונה.
- לבדוק רק במחשב חזק במשרד, בזמן שהמדד נקבע על מכשירי אנדרואיד איטיים של הגולשים.
- להתמקד בטעינת הדף ולהתעלם מאינטראקציות מאוחרות כמו פילטרים, טאבים וטפסים.
דוגמה מהשטח
לדוגמה, דמיינו חנות אונליין לבגדים שבה בחירת מידה בדף המוצר פותחת מחשבון מלאי, שולחת אירוע לשלוש מערכות אנליטיקס ומרעננת את כל הגלריה. בטלפון זול הלחיצה מגיבה רק אחרי כמעט שנייה, הגולש לוחץ שוב, ובסוף נבחרת מידה אחרת. INP של הדף גבוה בהרבה מהסף של 200 אלפיות השנייה, והדפים מסומנים כ״ירוד״ בדוח. אם החנות מסמנת את המידה הנבחרת מיידית, דוחה את אירועי המעקב למועד שבו הדפדפן פנוי ומונעת רינדור מחדש של הגלריה, הלחיצה מרגישה מיידית. פחות לחיצות כפולות, פחות עגלות נטושות, ודף מוצר שעובר את הסף.
להמשך קריאה
שאלות נפוצות על Interaction to Next Paint
מה נחשב INP טוב?
- גוגל מגדירה INP טוב כנמוך מ-200 אלפיות שנייה באחוזון ה-75 של הביקורים. בין 200 ל-500 אלפיות השנייה הדף מסומן כ״נדרש שיפור״, ומעל 500 הוא נכשל.
למה INP לא מופיע בבדיקת PageSpeed Insights?
- כי INP נמדד מאינטראקציות של גולשים אמיתיים, ובדיקת מעבדה אין מי שילחץ. PageSpeed מציג INP רק בחלק נתוני השדה, אם לדף יש מספיק תנועה. בבדיקת המעבדה אפשר להיעזר במדד Total Blocking Time כאינדיקציה קרובה.
מה ההבדל בין INP ל-FID?
- FID מדד רק את זמן ההמתנה עד שהדפדפן התחיל לטפל בלחיצה הראשונה. INP מודד את כל האינטראקציות לאורך הביקור, כולל זמן העיבוד והצגת התגובה על המסך, ומדווח על אחת מהאיטיות ביותר. לכן הוא מחמיר יותר ומשקף טוב יותר את החוויה.