מאינטראקציה ישירה (Interaction to Next Paint) (INP) הוא מדד ליבה יציב של מדד הליבה לבדיקת חוויית המשתמש באתר, שמעריך את מהירות התגובה של הדף על סמך נתונים מה-Event Timing API. מדד INP בודק את זמן האחזור של כל האינטראקציות של קליקים, הקשה ומקלדת עם דף במהלך משך החיים שלו, ומדווח על משך הזמן הארוך ביותר, תוך התעלמות מחריגות. המשמעות של INP נמוך היא שהדף יכול להגיב במהירות לרוב המכריע של האינטראקציות של המשתמשים.
תגובה טובה פירושה שהדף מגיב במהירות לאינטראקציות. כשמשתמש מגיב לאינטראקציה, הדפדפן מציג משוב חזותי בפריים הבא שהוא מציג כדי להראות שהאינטראקציה הצליחה. לדוגמה, תוכלו לקבל משוב על הנושאים הבאים:
- האם פריט שאתם מוסיפים לעגלת קניות באינטרנט מתווסף בפועל.
- האם נפתח תפריט ניווט בנייד.
- האם התוכן של התחברות מאומת על ידי השרת.
באופן טבעי, אינטראקציות מסוימות נמשכות יותר זמן מאחרות, אבל באינטראקציות מורכבות במיוחד, חשוב להציג במהירות משוב חזותי ראשוני כדי להודיע למשתמש שמתרחש משהו. הזמן עד לציור הבא הוא ההזדמנות המוקדמת ביותר לעשות זאת. לכן, המטרה של INP היא למדוד לא את כל ההשפעות הסופיות של האינטראקציה (כמו אחזורי רשת ועדכונים בממשק המשתמש מפעולות אסינכרוניות אחרות), אלא את השעה שבה הצבע הבא חסום. עיכוב של משוב חזותי גורם למשתמשים לחשוב שהדף לא מגיב לפעולות שלהם.
המטרה של INP היא למזער את הזמן שעובר מהרגע שבו משתמש יוזם אינטראקציה ועד לציור הפריים הבא, לכל האינטראקציות שהמשתמש יזם.
INP מחושב על ידי בחינת כל האינטראקציות שהתבצעו עם דף. ברוב האתרים, האינטראקציה עם זמן האחזור הגרוע ביותר מדווחת כ-INP. עם זאת, בדפים עם מספר גדול של אינטראקציות, בעיות אקראיות עלולות לגרום לאינטראקציה עם זמן אחזור גבוה באופן חריג באתר עם יכולת תגובה אחרת. ככל שיהיו יותר אינטראקציות, יש יותר סיכוי שזה יקרה. כדי להתמודד עם התופעה הזו ולספק מדידה טובה יותר של התגובה בפועל לסוגים האלה של דפים, אנחנו מתעלמים מאינטראקציה אחת ברמה הגבוהה ביותר לכל 50 אינטראקציות. מאחר שהרוב המכריע של חוויות המשתמש בדפים לא כולל יותר מ-50 אינטראקציות, הדפדפן כמעט תמיד עדיין מדווח על האינטראקציה הגרועה ביותר. לאחר מכן מתבצע דיווח כרגיל באחוזון ה-75 של כל הצפיות בדפים, וכך מסירים חריגים כדי לספק ערך שמייצג יותר את חוויית המשתמש הכללית.
אינטראקציה היא קבוצה של גורמים מטפלים באירועים שמופעלים במהלך אותה תנועת משתמש לוגית. לדוגמה, אינטראקציות "הקשה" במכשיר עם מסך מגע כוללות מספר אירועים, כמו pointerup, pointerdown ו-click. האינטראקציה יכולה להתבסס על JavaScript, CSS, אמצעי בקרה מובנים בדפדפן כמו רכיבי טופס או שילוב של הפעולות האלה.
זמן האחזור של אינטראקציה מורכב ממשך הזמן הארוך ביותר ביותר של קבוצה של גורמים מטפלים באירועים שגורמים לאינטראקציה, מהרגע שבו המשתמש מתחיל את האינטראקציה ועד לפריים הבא שמוצג עם משוב חזותי.
נקודה חשובה: פרטים נוספים על אופן המדידה של INP זמינים במאמר מה נמצא באינטראקציה?.
מהו ציון INP טוב?
כדי לוודא שאתם מספקים חוויית משתמש עם יכולת תגובה טובה, סף טוב למדידה הוא האחוזון ה-75 של טעינות דפים שתועדו בשדה, בפילוח לניידים ולמחשבים:
- ערך INP שווה ל-200 אלפיות השנייה או קטן ממנו, פירושו שלדף יש מהירות תגובה טובה.
- ערך INP באורך של 200 אלפיות השנייה עד 500 אלפיות שנייה פירושו שנדרש שיפור בתגובת הדף.
- ערך INP גדול מ-500 אלפיות השנייה פירושו שלדף יש מהירות תגובה נמוכה.
מה קורה באינטראקציה?
הגורם העיקרי לאינטראקטיביות הוא לעיתים קרובות JavaScript, אבל דפדפנים מספקים אינטראקטיביות באמצעות אמצעי בקרה שאינם מופעלים על ידי JavaScript, כמו תיבות סימון, לחצני בחירה ואמצעי בקרה המופעלים על ידי CSS.
למטרות INP, המערכת מזהה רק את סוגי האינטראקציות הבאים:
- לחיצה עם העכבר.
- מקישים על מכשיר עם מסך מגע.
- הקשה על מקש במקלדת פיזית או במקלדת שמופיעה במסך.
נקודה חשובה: העברת העכבר והגלילה לא נלקחת בחשבון ב-INP. עם זאת, גלילה במקלדת (מקש הרווח, דף למעלה, דף למטה וכן הלאה) כוללת הקשה על המקשים, שיכולה להפעיל אירועים אחרים ש-INP מודד. גלילה שמתקבלת לא נכללת בחישוב ה-INP.
האינטראקציות מתרחשות במסמך הראשי או במסגרות iframe שמוטמעות במסמך, למשל לחיצה על 'הפעלה' בסרטון מוטמע. מכיוון שמשתמשי הקצה לא יודעים אילו חלקים בדף נמצאים ב-iframes, צריך למדוד את ה-INP בתוך מסגרות iframe כדי למדוד אותו במדויק לכל הדף. עם זאת, לממשקי API של JavaScript באינטרנט אין גישה לתוכן ה-iframe, ויכול להיות שלא ניתן יהיה למדוד את ה-INP בתוך iframe. ההבדל הזה מוצג כהבדל בין CrUX ו-RUM.
אינטראקציות יכולות לכלול כמה אירועים. לדוגמה, הקשה על מקש כוללת את האירועים keydown, keypress ו-keyup, והאינטראקציות עם הקשה כוללות את האירועים pointerup ו-pointerdown. האירוע שיימשך הכי הרבה זמן במהלך האינטראקציה נבחר בתור זמן האחזור של האינטראקציה.
מדד INP מחושב כשהמשתמש עוזב את הדף, וכתוצאה מכך ערך יחיד מייצג את רמת התגובה הכוללת של הדף לכל אורך מחזור החיים שלו. מדד INP נמוך פירושו שהדף מגיב באופן מהימן לקלט של משתמשים.
במה שונה INP מהשהיית קלט ראשון (FID)?
INP הוא המדד המחליף את 'השהיה לאחר קלט ראשון' (FID). על אף ששני מדדי התגובה הם מדדי תגובתיות, FID מדד רק את זמן ההשהיה בקלט של האינטראקציה הראשונה בדף. מדד INP משפר את ה-FID על ידי התייחסות לכל האינטראקציות עם הדף, החל מהשהיית הקלט ועד הזמן שלוקח להפעיל גורמים מטפלים באירועים, ולבסוף עד שהדפדפן מצייר את הפריים הבא.
בזכות ההבדלים האלה, גם INP וגם FID הם סוגים שונים של מדדי תגובה. כאשר FID היה מדד מהירות תגובה לעומס, שנועד להעריך את החשיפה הראשונה של דף למשתמש, INP הוא מדד אמין יותר של מהירות התגובה הכוללת, ללא קשר למועד שבו מתרחשות אינטראקציות בדף.
מה קורה אם לא מדווח ערך INP?
ייתכן שדף לא יחזיר ערך INP. יכולות להיות לכך כמה סיבות, כולל:
- הדף נטען, אבל המשתמש לא יצר איתו אינטראקציה.
- הדף נטען, אבל המשתמש יצר איתו אינטראקציה באמצעות תנועות שלא נמדדות, כמו גלילה או העברת העכבר מעל רכיבים.
- בוט ניגש לדף הזה, כמו סורק חיפוש או דפדפן ללא GUI, שלא הוגדר לו סקריפט לאינטראקציה עם הדף.
איך מודדים INP
אפשר למדוד את ה-INP גם בשדה וגם בשיעור ה-Lab באמצעות מגוון כלים.
נקודה חשובה: הדרך הטובה ביותר למדוד את ה-INP של האתר היא לאסוף מדדים ממשתמשים בפועל בשטח. אם אתם רגילים להסתמך על נתונים של שיעורי Lab לצורך הערכת ביצועים, מומלץ לקרוא את המאמר למה הנתונים של שיעורי Lab ושטח עשויים להיות שונים (ומה לעשות בעניין).
בשדה
הדרך הטובה ביותר לבצע אופטימיזציה של INP מתחילה בנתוני שטח. במיטבם, נתוני השטח מ-Real User Monitoring (RUM) מספקים לא רק את ערך ה-INP של הדף, אלא גם נתונים לפי הקשר שמדגישים איזו אינטראקציה ספציפית הייתה אחראית לערך ה-INP עצמו, האם האינטראקציה התרחשה במהלך טעינת הדף או אחריה, סוג האינטראקציה (קליק, לחיצה על מקש או הקשה) ומידע חשוב נוסף.
אם האתר שלכם עומד בתנאים להיכלל בדוח חוויית המשתמש ב-Chrome (CrUX), אפשר לקבל במהירות נתוני שדה INP דרך CrUX ב-PageSpeed Insights, לצד נתונים בדוח מדדי ליבה לבדיקת חוויית המשתמש באתר. לכל הפחות, תוכלו לקבל תמונה ברמת המקור של ה-INP של האתר, אבל במקרים מסוימים תוכלו גם לקבל נתונים ברמת הדף.
עם זאת, ב-CrUX אפשר לדווח על יש בעיה ברמה גבוהה, אבל בדרך כלל היא לא מספקת מספיק פרטים כדי להבין מהי הבעיה, באופן מלא. פתרון RUM יכול לעזור לכם לחשוף פרטים נוספים על הדפים, המשתמשים או האינטראקציות של המשתמשים עם אינטראקציות איטיות. האפשרות לשייך את INP לאינטראקציות ספציפיות עוזרת להימנע מניחושים וממאמץ מבוזבז.
במעבדה
באופן אופטימלי, כדאי להתחיל את הבדיקה בשיעור ה-Lab אחרי שמצטברים נתוני שטח שמעידים על אינטראקציות איטיות. עם זאת, מכיוון שחסרים נתוני שדה, יש כמה אסטרטגיות לשחזור אינטראקציות איטיות בשיעור ה-Lab. האסטרטגיות כוללות מעקב אחרי זרימות נפוצות של המשתמשים ובדיקת אינטראקציות לאורך הדרך, וכן אינטראקציה עם הדף במהלך הטעינה, כשה-thread הראשי הוא לרוב העמוס ביותר, כדי לחשוף אינטראקציות איטיות במהלך החלק החשוב הזה בחוויית המשתמש.
איך לשפר את ה-INP
באוסף המדריכים שלנו לאופטימיזציה של INP אפשר למצוא הנחיות לזיהוי אינטראקציות איטיות בשטח ולשימוש בנתוני שיעור ה-Lab לאופטימיזציה שלהן.
יומן שינויים
מדי פעם מתגלים באגים בממשקי ה-API שמשמשים למדידת מדדים, ולפעמים גם בהגדרות של המדדים עצמם. כתוצאה מכך, לפעמים צריך לבצע שינויים, והם עשויים להופיע כשיפורים או רגרסיות בדוחות הפנימיים ובמרכזי הבקרה.
כדי לעזור לכם לנהל זאת, כל השינויים בהטמעה או בהגדרה של המדדים האלה מופיעים ב-Changelog.
אם יש לכם משוב לגבי המדדים האלה, אפשר לשלוח אותו בקבוצת Google בנושא Web-vitals-feedback.