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

תמיכה בדפדפן

  • Chrome: 96.
  • קצה: 96.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

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

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

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

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

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

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

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

מה זה INP?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אילו מסוגי האינטראקציות הבאים מתועדים לצורך חישוב ה-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, אבל המדד עדיין רלוונטי ומדווח אם הנתונים זמינים

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

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

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