אופטימיזציית INP היא עבודה על דבר אחד: כמה מהר העמוד מגיב כשהגולש לוחץ, מקיש או נוגע. הסברתי מה המדד בודק במאמר על מה זה INP. כאן אני מתמקד במעשי: איך מוצאים את האינטראקציה האיטית, מה בדרך כלל אחראי לה, ומה מדדתי באתר הזה.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מה נחשב תגובה טובה
תגובה עד 200 אלפיות שנייה נחשבת טובה, ומעל 500 נחשבת גרועה. לפי web.dev, הזמן נמדד מהלחיצה ועד שהמסך מציג את התוצאה, ובכל ביקור נלקחת בחשבון בערך האינטראקציה האיטית ביותר. כלומר, כפתור אחד איטי מספיק כדי לקלקל את הציון.
מה מדדתי באתר הזה
האינטראקציה הנפוצה ביותר בטלפון באתר הזה היא פתיחת התפריט. מדדתי אותה בדפדפן אמיתי, בדימוי טלפון, עם האטה של המעבד פי 1, פי 4 ופי 6. בכל המקרים התגובה לקחה בין 32 ל-40 אלפיות שנייה, הרבה מתחת לסף.
הסיבה העיקרית היא שרוב הסקריפטים באתר נדחים עד אחרי הטעינה, והתפריט עצמו לא מריץ עבודה כבדה בלחיצה. זה לא היה תמיד המצב: כשתוסף המהירות דחה גם את סקריפטי התפריט, הלחיצה הראשונה חיכתה שניות שלמות עד שהקוד נטען. אופטימיזציית INP כוללת גם לבדוק שדחיית סקריפטים לא דוחה את מה שהגולש צריך מיד.
מה בדרך כלל מאט תגובה
משימות ארוכות בזמן הלחיצה
כשהמעבד עסוק בסקריפט ארוך, הלחיצה מחכה בתור. סקריפטים של תוספים, כלי מעקב וווידג'טים רצים לפעמים בדיוק כשהגולש מתחיל לגלול וללחוץ. הפתרון הוא לדחות אותם, או לפצל עבודה ארוכה לחלקים קטנים.
עבודה כבדה בתוך הלחיצה עצמה
כפתור שמסנן מאות מוצרים, מחשב מחיר או בונה מחדש חלק גדול מהעמוד, עושה הרבה עבודה לפני שהמסך מתעדכן. ההנחיות של web.dev ממליצות להציג קודם משוב מיידי, ואת החישוב הכבד להריץ אחרי שהמסך התעדכן.
עמוד עם יותר מדי אלמנטים
כל שינוי בעמוד גדול מחייב את הדפדפן לחשב מחדש את המבנה. בעמוד עם אלפי אלמנטים, גם שינוי קטן לוקח זמן. דף הבית כאן מכיל כ-820 אלמנטים, ולכן פתיחת התפריט זולה.
איך מוצאים את האינטראקציה האיטית
ב Chrome פותחים את לשונית הביצועים, מתחילים הקלטה, לוחצים על הכפתורים החשודים ועוצרים. הלשונית מציגה כל אינטראקציה עם הזמן שלקחה, ומה רץ בזמן הזה. כך אופטימיזציית INP מתחילה מנתון ולא מניחוש, ומגיעים ישר לסקריפט האחראי.
אם לאתר יש נתוני גולשים אמיתיים, הדוח של Chrome מראה את מדד התגובה לפי עמוד. כדאי להתחיל מהעמודים עם הכי הרבה תנועה, ושם לבדוק את הכפתורים הנפוצים: תפריט, הוספה לסל, סינון וטפסים.
שאלות ותשובות על זמן תגובה
למה Lighthouse לא מציג את מדד התגובה?
כי Lighthouse טוען את העמוד ולא לוחץ על שום דבר. הוא מציג במקום זה את זמן החסימה, שמעיד על הסיכון. את התגובה עצמה מודדים בנתוני גולשים או בהקלטה ידנית בלשונית הביצועים.
האם דחיית סקריפטים משפרת את זמן התגובה?
בדרך כלל כן, כי פחות קוד רץ בזמן שהגולש מתחיל ללחוץ. אבל אם דוחים גם את הקוד של התפריט או של הכפתורים, הלחיצה הראשונה תחכה עד שהוא ייטען, והתגובה תהיה איטית יותר.
איזה תוספים פוגעים בזמן התגובה?
תוספים שמריצים קוד בכל גלילה או לחיצה: צ'אטים, כלי הקלטת גלישה, חלונות קופצים מתוחכמים, ופיקסלים של פרסום. מודדים כל אחד בנפרד, ושומרים רק את מה שבאמת בשימוש.
האם בטלפון זמן התגובה גרוע יותר?
כמעט תמיד. מעבד של טלפון בינוני חלש בכמה מונים ממחשב, ולכן אותו סקריפט רץ לאט יותר. לכן בודקים עם האטה של המעבד, ובמכשיר אמיתי כשאפשר.
הצעד הבא
האתר שלכם מגיב לאט ללחיצות, או שמדד התגובה בנתוני הגולשים אדום? שלחו לי את הכתובת. אמדוד את הכפתורים החשובים, אמצא מה רץ בזמן הלחיצה, ואגיד לכם מה לדחות ומה לפצל.
