דף זה תורגם על ידי Cloud Translation API.

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

Jeremy Wagner

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

נתוני השימוש ב-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 אלפיות השנייה.

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

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

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

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

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

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

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

איך מודדים INP

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

בשדה

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

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

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

בשיעור ה-Lab

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

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

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

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

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

יומן שינויים

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

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

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

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

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

כדי למדוד את הזמן שחולף עד שהתוכן הראשון מוצג בדף.

שגוי – המדד הזה מתאר את הצגת התוכן הראשוני (FCP)

אפשר לכמת את היציבות החזותית של הדף ולצמצם שינויים לא צפויים בפריסה.

לא נכון – תיאור השינוי של הפריסה המצטברת

כדי להעריך את הזמן שעובר עד שדף הופך לאינטראקטיבי באופן מלא.

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

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

תשובה נכונה!

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

לחיצה עם העכבר.

תשובה נכונה!

גלילה בדף באמצעות גלגל העכבר או משטח המגע.

שגוי – INP לא מצריך גלילה

הקשה על מסך מגע.

תשובה נכונה!

מעבירים את סמן העכבר מעל רכיבים.

שגוי – INP לא נחשב להעברת העכבר מעל

לחיצה על מקש במקלדת.

תשובה נכונה!

הגדלה או הקטנה של התצוגה בדף.

שגוי – INP לא מתייחס לזום

איך "זמן האחזור" של אינטראקציה שהוגדרה ל-INP?

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

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

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

שגוי – מדד INP מתמקד באינטראקציה הארוכה ביותר, ולא בממוצע

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

לא נכון – המדד הזה מתייחס רק לעיכוב בקלט, ולא לזמן העיבוד והרינדור

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

תשובה נכונה!

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

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

שגוי – התיאור הזה מתייחס להצגת תוכן ראשוני (FCP), ולא ל-INP

מדד INP מביא בחשבון את משך הזמן המלא של כל האינטראקציות, ואילו FID מודד רק את ההשהיה בקלט של האינטראקציה הראשונה.

תשובה נכונה!

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

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

אין הבדל. INP ו-FID הם רק שני שמות שונים לאותו מדד.

לא נכון – יש להם הגדרות נפרדות

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

בדף נעשה שימוש בספרייה מותאמת אישית למדידת ביצועים שלא מדווחת על נתוני INP.

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

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

תשובה נכונה!

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

תשובה נכונה!

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

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

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

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

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

בדיקת אינטראקציות רק אחרי שהדף נטען במלואו ועומד במצב חוסר פעילות.

לא נכון – יכול להיות שיתפספסו אינטראקציות שהטעינה שלהן איטית במהלך הטעינה

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

תשובה נכונה!

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

שגוי – התהליכים הנפוצים של המשתמשים רלוונטיים יותר לזיהוי בעיות אופייניות ב-INP

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