נתוני השימוש ב-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 כדי למדוד את חוויית המשתמש בדף ברמה העליונה. חשוב לשים לב שלממשקי ה-API של JavaScript באינטרנט לא תהיה גישה לתוכן ה-iframe, לכן ייתכן שלא תהיה אפשרות למדוד את ה-INP בתוך iframe. הפעולה הזו תראה הבדל בין CrUX ו-RUM.
אינטראקציות יכולות לכלול שני חלקים, כשבכל אחד יש מספר אירועים. לדוגמה, הקשה על מקש הזה כוללת את האירועים keydown, keypress ו-keyup. אינטראקציות עם הקשה כוללות אירועים של pointerup ו-pointerdown. האירוע שיימשך הכי הרבה זמן באינטראקציה ייבחר בתור זמן האחזור של האינטראקציה.
מדד INP מחושב כשהמשתמש עוזב את הדף, וכתוצאה מכך מתקבל ערך יחיד שמייצג את רמת התגובה הכוללת של הדף לכל אורך מחזור החיים של הדף. מדד INP נמוך פירושו שהדף מגיב באופן מהימן לקלט של משתמשים.
במה שונה INP מהשהיית קלט ראשון (FID)?
כאשר INP מביא בחשבון את כל האינטראקציות בדף, העיכוב לאחר קלט ראשון (FID) מביא בחשבון רק את האינטראקציה הראשונה. היא גם מודדת רק את השהיית הקלט של האינטראקציה הראשונה, ולא את הזמן שלוקח להפעיל גורמים מטפלים באירועים, או את העיכוב בהצגת הפריים הבא.
FID הוא גם מדד של מהירות התגובה לטעינה, ולכן הנימוק הוא שאם באינטראקציה הראשונה עם דף בשלב הטעינה לא ניתן להבחין בעיכוב בקלט, או שבאינטראקציה הראשונה בדף נוצר רושם ראשוני טוב.
INP עוסק יותר בחשיפות ראשונות. באמצעות דגימת כל האינטראקציות, ניתן להעריך את מידת הרספונסיביות באופן מקיף, מה שהופך את INP למדד מהימן יותר לגבי הרספונסיביות הכוללת בהשוואה ל-FID.
מה קורה אם לא מדווח ערך INP?
ייתכן שדף לא יחזיר ערך INP. יכולות להיות לכך כמה סיבות:
- הדף נטען, אבל המשתמש לא לחץ, הקיש או לחץ על מקש במקלדת.
- הדף נטען, אבל המשתמש ביצע אינטראקציה עם הדף באמצעות תנועות שלא כללו לחיצה, הקשה או שימוש במקלדת. לדוגמה, גלילה או העברת העכבר מעל רכיבים לא משפיעים על אופן החישוב של INP.
- בוט, כמו סורק חיפוש או דפדפן ללא GUI, ניגש לדף הזה, שלא קיים עבורו סקריפט לאינטראקציה עם הדף.
איך מודדים INP
אפשר למדוד את ה-INP גם בשדה וגם בשיעור ה-Lab באמצעות מגוון כלים.
בשדה
במצב אידיאלי, האופטימיזציה של INP תתחיל בנתוני שטח. במיטבם, נתוני השדות מ-Real User Monitoring (RUM) יספקו לא רק את ערך ה-INP של דף, אלא גם נתונים לפי הקשר שמדגישים איזו אינטראקציה ספציפית הייתה אחראית לערך ה-INP עצמו, האם האינטראקציה התרחשה במהלך טעינת הדף או אחריה, סוג האינטראקציה (קליק, הקשה או הקשה) ומידע חשוב נוסף.
אם האתר שלכם עומד בתנאים להשתתפות בדוח חוויית המשתמש ב-Chrome (CrUX), אפשר לקבל במהירות נתוני שדות עבור INP דרך CrUX ב-PageSpeed Insights (ומדדי ליבה לבדיקת חוויית המשתמש באתר). לכל הפחות, תוכלו לקבל תמונה ברמת המקור של ה-INP של האתר, אבל במקרים מסוימים תוכלו גם לקבל נתונים ברמת הדף.
עם זאת, ב-CrUX אפשר ליידע אתכם שיש בעיה ברמה גבוהה, אבל לעיתים קרובות המערכת לא מספקת מספיק פרטים כדי להבין מהי הבעיה. פתרון RUM יכול לעזור לכם להציג פירוט רב יותר לגבי הדפים, המשתמשים או האינטראקציות של המשתמשים שסובלים מאינטראקציות איטיות. היכולת לשייך את INP לאינטראקציות ספציפיות מונעת ניחושים ומאמץ מבוזבז.
במעבדה
באופן אופטימלי, כדאי להתחיל את הבדיקה בשיעור ה-Lab אחרי שיצטברו נתונים מהשטח שמעידים על אינטראקציות איטיות. עם זאת, מכיוון שחסרים נתוני שדה, יש כמה אסטרטגיות לשחזור אינטראקציות איטיות בשיעור ה-Lab. אסטרטגיות כאלה כוללות מעקב אחרי זרימות משתמשים נפוצות ובדיקת אינטראקציות לאורך הדרך, וכן אינטראקציה עם הדף במהלך הטעינה – כשה-thread הראשי הוא לרוב העמוס ביותר – כדי להציג אינטראקציות איטיות במהלך החלק החשוב הזה בחוויית המשתמש.
איך לשפר את ה-INP
אפשר להיעזר באוסף מדריכים לאופטימיזציה של INP כדי להנחות אתכם בתהליך הזיהוי של אינטראקציות איטיות בשטח, תוך שימוש בנתונים מהמעבדה כדי להתעמק בנתונים ולבצע אופטימיזציה שלהן במגוון דרכים.
יומן שינויים
מדי פעם, באגים מתגלים בממשקי ה-API שמשמשים למדידת מדדים, ולפעמים גם בהגדרות של המדדים עצמם. כתוצאה מכך, לפעמים צריך לבצע שינויים, והשינויים האלה עשויים להופיע כשיפורים או רגרסיות בדוחות הפנימיים ובמרכזי הבקרה.
כדי לעזור לכם לנהל זאת, כל השינויים בהטמעה או בהגדרות של המדדים האלה יופיעו ביומן השינויים הזה.
אם יש לכם משוב לגבי המדדים האלה, תוכלו לשלוח אותו בקבוצת Google בנושא Web-vitals-feedback.