מבנה ה-Pagespeed של גוגל, שהורגלנו אליו במשך שנים, בנוי סביב הבטחת הטעינה והשירות של אתרים במהירות. על ידי הפקת פרמטרים מדידים ומינוף הנתונים האנונימיים שנאספו מנתח השוק של כרום, גוגל משתמשת במדדים אלו כאינדיקטורים לקידום אתרים. עם הצגת האינטראקציה ל-Next Paint (INP) בשנת 2022, ההתמקדות עברה ממהירות טעינת עמוד בלבד לפרספקטיבה רחבה יותר של ביצועי אינטרנט. INP לא רק מודד כמה מהר דף נטען אלא גם כמה מהר מעובדות אינטראקציות המשתמש בדף. בעיקרו של דבר, זה הופך את חוויית הניווט באתר למדד מהירות דף.
בבלוג של כרם, המונח "General Interaction Delay" מוצע כהתאמה טובה למושג הזה, שגוגל גם מסבירה היטב בסרטון משלה. עם זאת, כדי להבין את המדד הזה במלואו, נעמיק בנושא בסעיפים הבאים.
מה ההסבר של משך INP?
משך ה-INP כולל:
- הזמן בין האינטראקציה של המשתמש עם הדף לביצוע המטפל באירועים.
- זמן ביצוע התסריט.
- הזמן מביצוע הקוד ועד להצגת הפלט למשתמש.
תהליכים אלה מתרחשים בדרך כלל בתוך אלפיות שניות, אך במכשירים ניידים, במיוחד בטלפונים אנדרואיד ישנים יותר עם כוח מעבד נמוך, עיכובים כאלה (השהייה) יכולים להיות מורגשים לעתים קרובות. ראוי לציין שנתוני INP, כמו נתוני Lighthouse אחרים, נאספים בעילום שם ומוערכים על סמך אחוזון 75. לכן, המטרה היא ליצור אפליקציות עם ביצועים טובים במכשירים ממוצעים ולא רק במכשירים מתקדמים.
דוגמאות מהחיים האמיתיים של משך INP
הנה כמה דוגמאות מהחיים האמיתיים מדפי האינטרנט שאנו מבקרים מדי יום כדי להסביר את המושג הזה:
הזנת כתובת באתר מסחר אלקטרוני
כאשר אתה קונה באתר מסחר אלקטרוני ומזין את הכתובת למשלוח, אתה תחילה בוחר את המחוז. לאחר מכן, כאשר אתה לוחץ על תיבת הבחירה כדי לבחור את המחוז, אתה ממתין זמן מה לטעינת תוצאת Ajax, ולאחר זמן מסוים, המידע המחוזי נטען. זוהי דוגמה טובה ל-INP. שיפור חווית המשתמש בדוגמה זו עשוי לכלול הוספת "אינדיקטור טעינה" כדי ליידע את המשתמש על תהליך Ajax.
מיון מבחר
בעת שימוש במסננים בדפי פרטי מוצרים, אם המוצרים המסונננים אינם מנוהלים כראוי לאחר לחיצה על תיבת סימון, זה יגדיל את ה-INP. שימוש ב-JS פחות מורכב והתחשבות בחוויית משתמש במהלך פעולות סינון יכולים לעזור לשמור על ערך INP גבוה ככל האפשר.
גלריות תמונות של מוצרים
הזמן שמשתמשים ממתינים לטעינת גלריית התמונות לאחר לחיצה על תמונת מוצר בדפי פרטי המוצר עלול להשפיע על INP.
לחצן הזמנה
עיכוב האינטראקציה בין לחיצה על כפתור "בצע הזמנה" לבין הדף הבא הוא דוגמה ל-INP.
כפתור הוסף לעגלה
אלפיות השניות של עיכוב בעת לחיצה על כפתור "הוסף לעגלה" ותוהה אם הפריט התווסף לעגלת הקניות או לא מגדיר בצורה מושלמת את INP.
כפי שניתן לראות בדוגמאות אלה, מלכודות INP קיימות בתרחישים המשפיעים הן על SEO והן על שיעורי ההמרה הישירים.
כיצד לשפר את ה-INP?
- השתמש בספריות JS Frontend עדכניות: שיפור הביצועים על ידי שימוש בספריות חזיתיות JS מודרניות כמו Vue, React ו-Angular מועיל מכיוון שהן מציעות יתרונות ביצועים ושימוש חוזר.
- צמצם את המורכבות של ספריות JS: מומלץ להשתמש בספריות JS פחות מורכבות. באופן אישי, אני ממליץ להימנע ככל האפשר מ-jQuery.
רמות מדדי INP מקובלות
ערכי הסף עבור רמות INP טובות, בינוניות ועניות הן 200 מילישניות ו-500 מילישניות. שמירה על ה-INP מתחת לסף הזה חיונית לשמירה על חווית משתמש טובה וביצועי אינטרנט כלליים.
