מה זה INP ולמה האתר מרגיש איטי גם אחרי שנטען

נטען מהר, עובד לאט

בטח נתקלתם בזה: העמוד מופיע מהר, אתם לוחצים על "תפריט" או "הוספה לסל" — ולרגע לא קורה כלום. מדדי הטעינה תקינים, אבל האתר מרגיש איטי. בדיוק את העיכוב הזה מודד Interaction to Next Paint (INP).

ב-12 במרץ 2024 החליף INP את First Input Delay (FID) כמדד התגובתיות ב-Core Web Vitals של Google. FID מדד רק את העיכוב עד שהדפדפן מתחיל לטפל באינטראקציה הראשונה. INP בוחן את האינטראקציות לאורך כל הביקור ומדווח כמה זמן עבר עד שהמסך באמת התעדכן.

איך נראה ציון טוב

• 200 מילישניות או פחות — טוב
• 200–500 מילישניות — דורש שיפור
• מעל 500 מילישניות — חלש

Google בודקת את האחוזון ה-75 של ביקורים אמיתיים, בנפרד לנייד ולדסקטופ. כלומר, החוויה של גולשים בטלפונים בינוניים חשובה לא פחות מהמחשב הנייד המהיר של המפתח.

איך מוצאים את הבעיה

• PageSpeed Insights ודוח Core Web Vitals ב-Search Console מציגים נתוני שטח ממשתמשי Chrome אמיתיים — התחילו שם כדי לבדוק אם INP בכלל בעיה
• Chrome DevTools, לשונית Performance: הקליטו לחיצה על האלמנט האיטי וחפשו משימות ארוכות ב-main thread
• ספריית ה-JavaScript ‏web-vitals יכולה לדווח INP מהגולשים שלכם, כולל האלמנט שבו הייתה האינטראקציה

הסיבות הנפוצות — והפתרונות

כמעט תמיד, ה-main thread של הדפדפן עסוק ב-JavaScript ברגע שהמשתמש לוחץ. משימה שנמשכת יותר מ-50 מילישניות נחשבת "משימה ארוכה", ובזמן שהיא רצה העמוד לא יכול להגיב.

• פצלו משימות ארוכות. בצעו קודם את העדכון הנראה, החזירו את השליטה לדפדפן וסיימו את שאר העבודה אחר כך
• בדקו סקריפטים של צד שלישי. וידג׳טים של צ׳אט, מנהלי תגיות, בדיקות A/B ופיקסלים של מדידה הם חשודים קבועים; טענו אותם מאוחר יותר או הסירו את מה שלא בשימוש
• שמרו על DOM רזה. עמודים ענקיים עם אלפי אלמנטים יקרים לרינדור מחדש אחרי כל לחיצה
• ב-React הימנעו מרינדור כל העמוד בכל הקלדה; סמנו עדכונים לא דחופים עם useTransition ובצעו memoization לקומפוננטות כבדות
• השתמשו ב-debounce בשדות חיפוש ובפילטרים במקום לחשב מחדש בכל הקשה

למה זה שווה את המאמץ

Core Web Vitals הם חלק מאותות חוויית העמוד של Google, אבל הסיבה הגדולה יותר אנושית: אנשים לוחצים שוב, נוטשים סלי קניות ומניחים שהאתר תקול כשהוא לא מגיב. תגובתיות היא משהו שמשתמשים מרגישים ישירות.

הפלטפורמה קובעת את נקודת הפתיחה — השוו בין WordPress ל-Next.js — ולאפליקציות דינמיות יש פשרות משלהן בחיפוש, שמוסברות במאמר SEO לאפליקציות ווב דינמיות. אנחנו משפרים תגובתיות במסגרת פיתוח אפליקציות ווב ותמיכה שוטפת באתרים.

האתר שלכם מגיב לאט? Codearia מנתחת Core Web Vitals ומתקנת בעיות ביצועים באתרי Next.js, React ו-WordPress — שלחו לנו את הכתובת.