נתוני השימוש ב-Chrome מראים ש-90% מזמן הביקור של משתמש בדף הוא אחרי שהוא נטען. לכן, חשוב למדוד בצורה זהירה את מהירות התגובה לאורך כל מחזור החיים של הדף. כך אנחנו מחשבים את המדד INP.
תגובה טובה פירושה שהדף מגיב במהירות לאינטראקציות. כאשר דף מגיב לאינטראקציה, הדפדפן מציג משוב חזותי במסגרת הבאה שהוא מצבוע. לפי משוב חזותי תוכל לדעת אם, לדוגמה, פריט שהוספת לעגלת קניות באינטרנט אכן נוסף, האם נפתח תפריט ניווט בנייד, אם התוכן של טופס ההתחברות מאומת על ידי השרת וכן הלאה.
באופן טבעי, אינטראקציות מסוימות נמשכות זמן רב יותר מאחרות, אבל באינטראקציות מורכבות במיוחד, חשוב לספק במהירות משוב חזותי ראשוני כדי לעדכן את המשתמש שמתרחש משהו. המסגרת הבאה שהדפדפן יצייר היא ההזדמנות המוקדמת ביותר לעשות זאת.
לכן, הכוונה של INP היא לא למדוד את כל ההשפעות הסופיות של אינטראקציה — כמו אחזורי רשת ועדכונים בממשק המשתמש מפעולות אסינכרוניות אחרות), אלא את השעה שבה הצגת הנתונים הבאה חסומה. אם מעכבים את המשוב הוויזואלי, המשתמשים עשויים לקבל רושם שהדף לא מגיב מהר מספיק. טכנולוגיית INP פותחה כדי לעזור למפתחים למדוד את החלק הזה בחוויית המשתמש.
בסרטון הבא, הדוגמה בצד ימין מספקת משוב חזותי מיידי על כך שפותח אקורדיון. דוגמה לתגובה נמוכה מוצגת בצד ימין, ואיך היא עלולה לפגוע בחוויית המשתמש.
במדריך הזה נסביר איך INP עובד, איך למדוד אותו ונציג מקורות מידע שאפשר לשפר.
מה זה INP?
INP הוא מדד שמעריך את רמת התגובה הכוללת של דף לאינטראקציות של משתמשים. לשם כך, בוחנים את זמן האחזור של כל האינטראקציות בין קליקים, הקשה ומקלדת שמתרחשות במהלך משך החיים של משתמש בדף. ערך ה-INP הסופי הוא משך הזמן הארוך ביותר של אינטראקציה שזוהה, ללא חריגים חשודי טעות.
INP מחושב על ידי בחינת כל האינטראקציות שהתבצעו עם דף. ברוב האתרים, האינטראקציה עם זמן האחזור הגרוע ביותר מדווחת כ-INP.
עם זאת, בדפים עם מספר רב של אינטראקציות, בעיות אקראיות עלולות לגרום לאינטראקציה עם זמן אחזור גבוה באופן חריג בדף עם יכולת תגובה אחרת. ככל שמתרחשות יותר אינטראקציות בדף נתון, כך גובר הסיכוי שזה יקרה.
כדי לספק לכם מדידה טובה יותר של רמת התגובה בפועל בדפים עם מספר רב של אינטראקציות, אנחנו מתעלמים מאינטראקציה אחת ברמה הגבוהה ביותר לכל 50 אינטראקציות. הרוב המכריע של חוויות המשתמש בדפים לא צבר יותר מ-50 אינטראקציות, לכן הדיווח על האינטראקציה הגרועה ביותר הוא בדרך כלל. האחוזון ה-75 של כל הצפיות בדפים מדווח לאחר מכן כרגיל, וכתוצאה מכך מסירים חריגות כדי לציין ערך שרוב המשתמשים נהנים ממנו או טוב יותר.
אינטראקציה היא קבוצה של גורמים מטפלים באירועים שמופעלים במהלך אותה תנועה לוגית של משתמש. לדוגמה, אינטראקציות שמקישים על 'הקשה' במכשיר עם מסך מגע כוללות כמה אירועים, כמו pointerup, pointerdown ו-click. אינטראקציה יכולה להיות מבוססת על JavaScript, CSS, פקדי דפדפן מובנים (כמו רכיבי טופס) או שילוב של השניים.
זמן האחזור של אינטראקציה מורכב ממשך הזמן הארוך ביותר של קבוצה של גורמים מטפלים באירועים שגורמים לאינטראקציה, מהרגע שבו המשתמש מתחיל את האינטראקציה ועד לרגע שהדפדפן מצייר את הפריים הבא.
מהו ציון INP טוב?
קשה להצמיד תוויות כמו 'טובה' או 'חלשה' למדד יכולת תגובה. מצד אחד, כדאי לעודד שיטות פיתוח שמתעדפות יכולת תגובה טובה. מצד שני, צריך לקחת בחשבון את העובדה שיש שונות רבה ביכולות של המכשירים שבהם אנשים משתמשים כדי להגדיר ציפיות ניתנות להשגה לפיתוח.
כדי לוודא שאתם מספקים חוויות משתמש עם יכולת תגובה טובה, סף טוב למדידה הוא האחוזון ה-75 של טעינות דפים שתועדו בשדה, בפילוח לפי מכשירים ניידים ומחשבים:
- ערך INP מתחת או 200 אלפיות השנייה פירושו שלדף יש מהירות תגובה טובה.
- ערך INP שגבוה מ-200 אלפיות השנייה ונמוך מ-500 אלפיות השנייה פירושו דרוש שיפור של מהירות התגובה של הדף.
- ערך INP מעל 500 אלפיות השנייה פירושו שלדף יש מהירות תגובה נמוכה.
מה קורה באינטראקציה?
הגורם העיקרי לאינטראקטיביות הוא לעיתים קרובות JavaScript, אף על פי שדפדפנים מספקים אינטראקטיביות באמצעות פקדים שאינם מופעלים על ידי JavaScript, כגון תיבות סימון, לחצני בחירה ופקדים המופעלים על ידי CSS.
ב-INP, אנחנו בודקים רק את סוגי האינטראקציות הבאים:
- לחיצה עם העכבר.
- מקישים על מכשיר עם מסך מגע.
- הקשה על מקש במקלדת פיזית או במקלדת שמופיעה במסך.
האינטראקציות מתרחשות במסמך הראשי או ב-iframes שמוטמעים במסמך. למשל, לחיצה על 'הפעלה' בסרטון מוטמע. משתמשי הקצה לא יהיו מודעים מה יש ב-iframe או לא, ולכן יש צורך ב-INP בתוך מסגרות iframe כדי למדוד את חוויית המשתמש בדף ברמה העליונה. לממשקי JavaScript Web API אין גישה לתוכן של iframes, ולכן הדבר עשוי להיות הבדל בין CrUX ל-RUM.
אינטראקציות יכולות לכלול כמה אירועים. לדוגמה, הקשה על מקש כוללת את האירועים keydown, keypress ו-keyup. אינטראקציות עם הקשה כוללות אירועים של pointerup ו-pointerdown. האירוע עם משך הזמן הארוך ביותר בתוך האינטראקציה הוא זה שתורם לזמן האחזור הכולל של האינטראקציה.
ערך ה-INP של הדף מחושב כשהמשתמש עוזב את הדף. התוצאה היא ערך יחיד שמייצג את התגובה הכוללת של הדף לכל אורך מחזור החיים שלו. המשמעות של INP נמוך היא שדף הגיב באופן מהימן לקלט של משתמשים.
במה שונה INP מהשהיית קלט ראשון (FID)?
INP הוא המדד העוקב להשהיה לאחר קלט ראשון (FID). שני המדדים הם מדדי תגובה, אבל ב-FID נמדד רק עיכוב הקלט של האינטראקציה הראשונה בדף. מדד INP משפר את FID על ידי בחינת כל האינטראקציות בדף, החל מהשהיית הקלט ועד הזמן שלוקח להפעיל גורמים מטפלים באירועים, ולבסוף עד שהדפדפן מצייר את הפריים הבא.
משמעות ההבדלים האלה היא שגם INP וגם FID הם סוגים שונים של מדדי תגובה. כאשר FID היה מדד רספונסיביות לעומס (RDA) שנועד להעריך את החשיפה הראשונה של הדף אצל המשתמש, 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. האסטרטגיות כוללות מעקב אחר תהליכים נפוצים של משתמשים ובדיקת אינטראקציות לאורך התהליך, וכן אינטראקציה עם הדף במהלך הטעינה שלו – כאשר ה-thread הראשי הוא לעיתים קרובות העמוס ביותר – כדי לזהות אינטראקציות איטיות במהלך החלק החשוב הזה בחוויית המשתמש.
איך לשפר את ה-INP
אפשר להיעזר באוסף מדריכים לאופטימיזציה של INP כדי להנחות אתכם בתהליך הזיהוי של אינטראקציות איטיות בשטח, ובשימוש בנתונים מהמעבדה שיעזרו לכם לזהות את הסיבות ולטפל בהן.
יומן שינויים
מדי פעם, באגים מתגלים בממשקי ה-API שמשמשים למדידת מדדים, ולפעמים גם בהגדרות של המדדים עצמם. כתוצאה מכך, לפעמים צריך לבצע שינויים, והשינויים האלה עשויים להופיע כשיפורים או רגרסיות בדוחות הפנימיים ובמרכזי הבקרה.
כדי לעזור לכם לנהל זאת, כל השינויים בהטמעה או בהגדרות של המדדים האלה יופיעו ביומן השינויים הזה.
אם יש לכם משוב לגבי המדדים האלה, תוכלו לשלוח אותו בקבוצת Google בנושא Web-vitals-feedback.