המדד החדש שכולנו צריכים להכיר: INP -חוץ

כאשר משתמש מקיים אינטראקציה עם אתר אינטרנט, הוא אמור להגיב מהר. הדפדפן יציג את המשוב החזותי שנוצר על ידי תגובת העמוד לאינטראקציה בפריים הבא.

אתם יכולים לראות אם תפריט נפתח במכשיר הנייד שלכם, אם פרטי ההתחברות שלכם מאומתים על ידי השרת, אם פריט מועבר לעגלת הקניות המקוונת שלך וכן הלאה. משתמשים מבלים 90% מזמנם בדף לאחר טעינתו, לפי נתוני השימוש ב-Chrome. 

זה מדגיש את הצורך במדידת היענות בכל שלבי מחזור החיים של הדף. מדד interaction to next paint / INP מעריך היבט זה.

מה זה Interaction to Next Paint?

הזמן שלוקח להשלים אינטראקציה בין המשתמש לעמוד הנטען בדפדפן ישתנה בהתאם למורכבות של האינטראקציה, אבל זה חיוני לתת למשתמש תחושה של התקדמות בהקדם האפשרי. 

ניתן למדוד את ההיענות של ממשק המשתמש של אתר אינטרנט, או כמה מהר הוא מגיב לקלט מהמשתמש, כגון לחיצת עכבר או לחיצת מקלדת, באמצעות נתון interaction to next paint / INP

לצורך כך, הוא עוקב אחר משך הזמן שעובר בין פעולת משתמש (כגון לחיצה או לחיצה על מקש) לבין העדכון הגרפי שלאחר מכן.


מה זה ציון INP טוב?


interaction to next paint / INP הם מדדי core web vitals אשר בודקים באיזו מהירות אתר מגיב לקלט המשתמש על ידי מעקב אחר זמן האחזור הממוצע של כל האינטראקציות הכשירות המתרחשות בזמן שהמשתמש נמצא בדף. 

בעת חישוב INP, נעשה שימוש באינטראקציה הארוכה ביותר. אתרי אינטרנט צריכים לשאוף לאינטראקצית INP של 200 ms או פחות כדי להבטיח חווית משתמש טובה. 

על פי מסמכי web.dev של גוגל, ערך INP מצוין הוא 200ms או מתחת. באופן ספציפי, הוא קובע:

  • הדף מגיב מעולה אם ה-INP קטן או שווה ל-200 אלפיות השנייה.
  • אם ה-INP של הדף הוא מעל 200ms ופחות או שווה ל-500ms, עליכם לעבוד על הפיכתו למגיב יותר.
  • אם ה-INP שלכם הוא יותר מ-500 אלפיות השנייה, התגובה של הדף נמוכה.
Interaction to Next Paint

גוגל גם מזהירה שההמלצות הנוכחיות שלה לגבי נתון זה עשויות להשתנות, מכיוון ש-INP עדיין בשלבי הפיתוח המוקדמים שלה.


למה חשוב לבצע שיפור מהירות אתר לשיפור המדד?

מדד INP הוא מורכב. ייתכן שהאתר שלכם מהיר כבזק ונטען מהר. למרבה הצער, כל interaction to next paint / INP תתעכב אם אפילו אינטראקציה אחת היא איטית. 

זכרו שה-INP מורכב משלושה חלקים: השהיית הקלט, זמן העיבוד והשהיית ההצגה.

אם משתמש לוחץ או מקיש במקום כלשהו באתר בזמן שהוא עדיין נטען, ה-INP כמעט תמיד יחמיר. 

מסיבה זו, חשוב לתעד לא רק את מצב הטעינה של הדף הנוכחי אלא גם את כל האינטראקציות הקודמות עם ה-INP.

צמצמו את זמן ההשהיה בין קלט המשתמש לפעולה על ידי הימנעות מפעולות ממושכות של השרשור הראשי.

כאשר דף נטען לראשונה, ההיענות שלו פוחתת לעתים קרובות. בשלב זה, רוב העיבוד בשרשור הראשי (כגון ניתוח, פענוח וסקריפט) יושלם. 


כדי לא להסיח את הדעת מהנושא הראשי, מומלץ לבחון את פעולות האופטימיזציה הבאות:

  • להסיר כל שורות קוד מיותרות. ביטול קוד מיותר ופיצול קוד הן שתי טכניקות שיכולות לעזור להשיג מטרה זו.
  • בזמן שהדפדפן ממתין, לטעון את הקוד המשלים. האם ווידג'ט של צ'אט, למשל, באמת נחוץ ב-500 אלפיות השניות הראשונות לאחר טעינת אתר אינטרנט? כמעט בטוח שלא!
  • למצוא סקריפטים עתירי משאבים שפועלים לאט ובצעו אופטימיזציה שלהם.
  • אל תשתמשו בהרבה תמונות, סרטונים, אנימציות CSS וכו' שיכולים לגרום לטעינה איטית של העמוד.
  • לצמצם את זמני הטעינה ככל האפשר והאתר יגיב באופן מיידי לפעולות המשתמש.

אם אתם רוצים לשפר את חווית המשתמש מכל בחינה אפשרית באתר שלכם, קבלו ייעוץ, ליווי וביצוע מקצועי על ידי מומחה בתחום שיפור מהירות לאתרים רוני קוקליטסקי.

תגובה אחת

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

portfolio-2
רוני קוקליטסקי
המהירות היא המפתח לשיפור האתר ההמרות באתר
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
יצירת אפקט מעבר צבע בכפתור אלמנטור
שדרגו את הנראות של הכפתורים באתרים שלכם.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
אלמנטור
יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור
נמאס לכם להשתמש באותם עיצובים משעממים? המדריך הזה הוא בשבילכם.
ווקומרס
איך ליצור תוויות למוצרים בווקומרס עם ג'ט
הוספת תוויות חיווי למוצרים באתרי מכירות – משפר את חווית המשתמש ומגדיל את המכירות.
חיפוש חופשי
חיפוש חכם ע"י AI (בהרצה)
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).