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

Jeremy Wagner

תמיכה בדפדפנים

  • Chrome:‏ 96.
  • Edge:‏ 96.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

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

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

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

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

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

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

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

מהו INP?

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

פרטים על אופן החישוב של INP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ה-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.

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

מהי המטרה העיקרית של מדד INP?

כדי למדוד את הזמן שחלף עד להצגת התוכן הראשון בדף.
שגוי – המדד הזה מתאר את הצגת התוכן הראשוני (FCP)
כדי למדוד את היציבות החזותית של דף ולצמצם את מספר השינויים הבלתי צפויים בפריסה.
שגוי – התיאור הזה מתייחס ל-Cumulative Layout Shift ‏(CLS)
כדי להעריך את משך הזמן שחולף עד שהדף מאפשר אינטראקציה מלאה.
שגוי – המדד הזה קשור ל'זמן עד לאינטראקטיביות', אבל המדד INP מתמקד באופן ספציפי בתגובה לקלט של משתמשים
כדי לקצר את הזמן מהרגע שבו המשתמש מתחיל אינטראקציה ועד לציור של המסגרת הבאה, בכל האינטראקציות שהמשתמש מתחיל או ברובן.
תשובה נכונה!

אילו מסוגי האינטראקציות הבאים נצפים לצורך חישוב INP? (יש לבחור את כל האפשרויות הרלוונטיות)

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

איך נקבע זמן האחזור של אינטראקציה ב-INP?

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

מה ההבדל בין INP לבין FID?

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

באילו נסיבות נתוני INP לא יהיו זמינים לדף בכלים כמו PageSpeed Insights?

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

מהי השיטה היעילה ביותר לשחזור אינטראקציות איטיות בסביבת מעבדה?

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

✨ החידון הזה נוצר על ידי Gemini 1.5 ונבדק על ידי בני אדם. שליחת משוב