INP, או Interaction to Next Paint, הוא המדד של גוגל לכמה מהר העמוד מגיב כשהגולש לוחץ, מקיש או מקליד. הוא בודק את כל האינטראקציות לאורך הביקור, לא רק את הראשונה, ומדווח על אחת האיטיות שבהן. ציון טוב הוא עד 0.2 שניות. כאן אני מסביר מה הוא מודד ומה בדרך כלל מאט אותו.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מה INP מודד
כשגולש לוחץ על כפתור, הדפדפן צריך להריץ את הקוד שמטפל בלחיצה ואז לצייר את התוצאה על המסך: תפריט שנפתח, מוצר שנכנס לסל, הודעת שגיאה בטופס. INP מודד את הזמן מהלחיצה ועד שהציור הזה מופיע. אם הדפדפן עסוק בהרצת סקריפטים אחרים, הגולש מחכה.
המדד בודק את כל האינטראקציות בביקור ובוחר אחת האיטיות שבהן, כשהוא מתעלם מחריגה בודדת כל חמישים אינטראקציות. לכן עמוד שמגיב מהר לרוב הלחיצות, אבל נתקע פעם אחת על כפתור מסוים, עדיין יקבל ציון גרוע.
מה נחשב ציון טוב
| זמן תגובה | מה הוא אומר |
|---|---|
| עד 0.2 שניות | טוב. הגולש מרגיש שהעמוד מגיב מיד |
| 0.2 עד 0.5 שניות | צריך שיפור. יש עיכוב שמורגש |
| מעל 0.5 שניות | גרוע. הגולש לוחץ שוב כי נראה לו שלא קרה כלום |
כמו בשאר המדדים של Core Web Vitals, גוגל בודקת את הציון על 75 אחוז מהכניסות לעמוד, בנפרד לטלפון ולמחשב. בטלפון הוא כמעט תמיד גרוע יותר, כי המעבד חלש יותר.
מה הוא החליף
במרץ 2024 INP החליף את FID, המדד הקודם. FID בדק רק את הלחיצה הראשונה, ורק את הזמן עד שהדפדפן התחיל לטפל בה, בלי הזמן עד שהתוצאה הופיעה. כמעט כל אתר עבר אותו, גם אתרים שהיו איטיים מאוד בפועל. INP קשוח יותר, ולכן אתרים שהיו ירוקים פתאום הפכו לכתומים.
אם אתם רואים במדריך כלשהו את FID כאחד המדדים של גוגל, הוא כבר לא רלוונטי.
מה מאט את התגובה ללחיצה
הזמן מתחלק לשלושה: העיכוב עד שהדפדפן מתפנה לטפל בלחיצה, הזמן שהקוד של הלחיצה רץ, והזמן עד שהתוצאה מצוירת. ברוב האתרים שאני בודק, הבעיה היא בראשון: הדפדפן עסוק בסקריפטים אחרים בדיוק כשהגולש לוחץ.
סקריפטים של צד שלישי
צ'אטים, פיקסלים של פרסום, כלים להקלטת גולשים וווידג'טים של ביקורות רצים ברקע ותופסים את המעבד. כל אחד מהם קטן, אבל יחד הם משאירים מעט זמן פנוי ללחיצה של הגולש, במיוחד בדקות הראשונות אחרי הטעינה.
עמוד עם מבנה גדול
כשלחיצה משנה משהו בעמוד, הדפדפן צריך לחשב מחדש את המיקום של כל מה שמסביב. בעמוד עם אלפי אלמנטים החישוב הזה כבד. בוני עמודים נוטים לבנות עמודים כאלה, והרחבתי על זה במאמר על DOM.
קוד כבד בלחיצה עצמה
מסננים בחנות שמסננים מאות מוצרים בדפדפן, סליידרים שמחשבים את כל השקופיות בכל החלפה, או טפסים שבודקים כל שדה בכל הקשה. כאן הפתרון הוא בקוד עצמו, ולפעמים בהחלפת התוסף.
איך זה נראה באתר הזה
מדדתי את פתיחת התפריט בטלפון בדף הבית, בדפדפן עם האטה של המעבד פי ארבעה, כדי לדמות טלפון בינוני. התגובה לקחה כ-56 אלפיות שנייה, הרבה מתחת לסף של 200. זה אחרי שצמצמתי סקריפטים, ודחיתי את מה שלא נחוץ ללחיצה הראשונה.
דחייה של סקריפטים עוזרת לזמן התגובה, אבל צריך לדעת מה לדחות. אם דוחים את הסקריפט של התפריט עצמו, הוא פשוט לא נפתח בלחיצה הראשונה, וזו חוויה גרועה יותר מתגובה איטית. את השלבים המעשיים ריכזתי במדריך לאופטימיזציית INP.
שאלות ותשובות על זמן התגובה ללחיצה
למה אין ציון INP בבדיקה של PageSpeed?
כי בבדיקה במעבדה אף אחד לא לוחץ על העמוד. המדד נאסף רק מגולשים אמיתיים, ומופיע בחלק העליון של הדוח כשיש לעמוד מספיק כניסות. במעבדה הכלי מציג במקומו את זמן החסימה הכולל, שנותן רמז טוב לאותה בעיה.
איך מוצאים איזו לחיצה איטית?
בכלי המפתחים של Chrome, בלשונית הביצועים, אפשר להקליט את העמוד, ללחוץ על הכפתורים החשודים ולראות כמה זמן כל לחיצה לקחה ומה רץ באותו רגע. בדרך כלל מתגלה סקריפט מסוים שתופס את המעבד בדיוק בזמן הלחיצה.
האם זמן התגובה משפיע על המיקום בגוגל?
הוא אחד משלושת המדדים שגוגל משתמשת בהם כדי להעריך את חוויית הגולש. הוא לא יקפיץ עמוד חלש למעלה, אבל כפתור הוספה לסל שמגיב באיחור עולה בהמרות, וזה מורגש הרבה לפני שזה מורגש בדירוג.
מה ההבדל בינו לבין זמן הטעינה?
זמן הטעינה מודד מתי העמוד מופיע. זמן התגובה מודד מה קורה אחרי זה, כשהגולש מתחיל להשתמש בעמוד. עמוד יכול להיטען מהר ועדיין להגיב לאט, למשל כשסקריפטים כבדים ממשיכים לרוץ ברקע אחרי שהתוכן כבר הופיע.
הצעד הבא
אם הדוח של גוגל מסמן את זמן התגובה באדום, הצעד הראשון הוא לדעת איזו לחיצה איטית ומה רץ באותו רגע. שלחו לי את הכתובת, ואבדוק את העמודים החשובים בטלפון ואגיד לכם איזה סקריפט אחראי לעיכוב.
