מאינטראקציה ועד הצגת התגובה (INP)

נתוני השימוש ב-Chrome מראים ש-90% מהזמן של משתמש בדף, אחרי שהוא נטען, חשוב למדוד בצורה זהירה בכל מחזור החיים של הדף. כך נבדק מדד INP.

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

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

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

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

במדריך הזה נסביר איך פועלת INP ואיך למדוד אותה, ונפנה למקורות מידע שיעזרו לכם לשפר אותה.

מה זה INP?

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

אינטראקציה היא קבוצה של גורמים מטפלים באירועים שמופעלים במהלך אותה תנועת משתמש לוגית. לדוגמה, "tap" אינטראקציות במכשיר עם מסך מגע כוללות כמה אירועים, כמו pointerup, pointerdown ו-click. אינטראקציה יכולה להיות מושפעת מ-JavaScript, מ-CSS, מאמצעי בקרה מובנים בדפדפן (כגון רכיבי טופס) או משילוב שלהם.

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

מהו ציון INP טוב?

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

כדי להבטיח שאתם מספקים חוויות משתמש עם רספונסיביות טובה, סף טוב למדידה הוא האחוזון ה-75 של טעינות הדפים שתועדו בשדה, בפילוח בין ניידים ומחשבים:

• ערך INP נמוך מ-200 אלפיות שנייה פירושו שלדף יש מהירות תגובה טובה.
• אם ערך ה-INP גבוה מ-200 אלפיות השנייה או נמוך מ-500 אלפיות השנייה, פירוש הדבר הוא שדרוש שיפור של רמת התגובה של הדף.
• אם ערך INP גבוה מ-500 אלפיות השנייה, המשמעות היא שלדף יש מהירות תגובה נמוכה.

מה נכלל באינטראקציה?

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

למטרות INP, נבדקים רק סוגי האינטראקציות הבאים:

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

האינטראקציות מתרחשות במסמך הראשי או ברכיבי iframe שמוטמעים במסמך. לדוגמה, לחיצה על 'הפעלה' בסרטון מוטמע. משתמשי הקצה לא ידעו מה נמצא ב-iframe או לא, ולכן INP בתוך iframes נדרש כדי למדוד את חוויית המשתמש בדף ברמה העליונה. לממשקי API של JavaScript באינטרנט אין גישה לתוכן של iframes, לכן יכול להיות שהבדל הזה מוצג בין CrUX ל-RUM.

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

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

מה ההבדל בין INP לעיכוב קלט ראשון (FID)?

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

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

מה אם לא מדווח ערך INP?

ייתכן שדף לא יחזיר ערך INP. יכולות להיות לכך כמה סיבות, כולל הסיבות הבאות:

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

איך מודדים INP

אפשר למדוד את INP גם בשדה וגם בשיעור ה-Lab, במידה שתוכלו לדמות אינטראקציות מציאותיות של משתמשים.

בשדה

במצב אידיאלי, התהליך לאופטימיזציה של INP יתחיל בנתוני שדות. במצב מיטבי, נתוני השדות מ-Real User Monitoring (RUM) יספקו לא רק את ערך ה-INP של הדף, אלא גם נתונים הקשריים שמדגישים את האינטראקציה הספציפית שהובילה לערך ה-INP עצמו, האם האינטראקציה התרחשה בזמן טעינת הדף או אחריה, את סוג האינטראקציה (קליק, לחיצה על מקש או הקשה) ותזמונים חשובים נוספים שיכולים לעזור לכם לזהות איזה חלק מהאינטראקציה השפיע על הרספונסיביות.

אם האתר שלכם עומד בתנאים להכללה בדוח על חוויית המשתמש ב-Chrome (CrUX), תוכלו לקבל במהירות נתוני שטח עבור INP דרך CrUX ב-PageSpeed Insights (ומדדי ליבה לבדיקת חוויית משתמש אחרים). לכל הפחות, תוכלו לקבל תמונה ברמת המקור של ה-INP של האתר, אבל במקרים מסוימים תוכלו גם לקבל נתונים ברמת כתובת ה-URL.

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

בשיעור ה-Lab

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

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

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

איך לשפר את INP

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

יומן שינויים

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

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

אם יש לכם משוב על המדדים האלה, אתם יכולים לשלוח אותו בקבוצת Google בנושא web-vitals-feedback.

בוחנים את הידע