נתוני השימוש ב-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, רק סוגי האינטראקציות הבאים נצפים:
- לחיצה בעכבר.
- הקשה במכשיר עם מסך מגע.
- לחיצה על מקש במקלדת פיזית או במקלדת במסך.
האינטראקציות מתרחשות במסמך הראשי או ברכיבי iframe שמוטמעים במסמך. לדוגמה, לחיצה על 'הפעלה' בסרטון מוטמע. משתמשי הקצה לא ידעו מה נמצא ב-iframe או לא, ולכן INP בתוך iframes נדרש כדי למדוד את חוויית המשתמש בדף ברמה העליונה. מאחר של-JavaScript Web APIs אין גישה לתוכן של iframes, יכול להיות שיופיע הבדל בין CrUX ל-RUM.
אינטראקציות יכולות לכלול כמה אירועים. לדוגמה, מקש קיצור כולל את האירועים keydown
, keypress
ו-keyup
. מקישים על 'אינטראקציות שכוללות אירועים מסוג pointerup
ו-pointerdown
'. האירוע עם משך הזמן הארוך ביותר באינטראקציה הוא זה שתורם לזמן האחזור הכולל של האינטראקציה.
ה-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?
אילו מסוגי האינטראקציות הבאים מתועדים לצורך חישוב ה-INP? (יש לבחור את כל האפשרויות המתאימות)
איך "זמן האחזור" של אינטראקציה שהוגדרה ל-INP?
מה ההבדל בין INP ל-FID?
באילו נסיבות ייתכן שנתוני INP לא יהיו זמינים לדף בכלים כמו PageSpeed Insights?
מה האסטרטגיה היעילה ביותר לשחזור אינטראקציות איטיות בסביבת שיעור Lab?
✨ החידון הזה נוצר על ידי Gemini 1.5 ונבדק על ידי בני אדם. שליחת משוב