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

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

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

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

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

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

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

מהו INP?

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

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

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

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

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

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

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

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

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

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

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

אינטראקציות מתרחשות במסמך הראשי או בפריטי iframe שמוטמעים במסמך – לדוגמה, לחיצה על לחצן ההפעלה בסרטון מוטמע. משתמשי הקצה לא ידעו מה נמצא ב-iframe ומה לא, לכן צריך להשתמש ב-INP בתוך iframe כדי למדוד את חוויית המשתמש בדף ברמה העליונה. לממשקי 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 גם בשטח וגם במעבדה, במידה שאפשר לדמות אינטראקציות מציאותיות של משתמשים.

בשדה

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

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

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

במעבדה

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

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

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

איך משפרים את INP

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

יומן שינויים

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

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

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

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