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

Jeremy Wagner

נתוני השימוש ב-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 כדי למדוד את חוויית המשתמש בדף ברמה העליונה. מאחר של-JavaScript Web APIs אין גישה לתוכן של iframes, יכול להיות שיופיע הבדל בין CrUX לבין RUM.

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

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

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

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

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

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

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

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

איך מודדים INP

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

בשדה

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

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

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

במעבדה

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

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

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

איך לשפר את INP

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

יומן שינויים

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

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

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

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