מדריך INP לשופיפיי: איך לתקן אינטראקציות איטיות ולהגדיל המרות

מדד Interaction to Next Paint (INP) הוא מדד ליבה של גוגל (Core Web Vital) שבוחן את רספונסיביות האתר לכל אורך ביקור המשתמש, ולא רק באינטראקציה הראשונה. ציון INP גבוה בחנות שופיפיי, הנגרם לרוב על ידי סקריפטים כבדים של אפליקציות צד-שלישי או קוד תבנית לא יעיל, פוגע בחוויית המשתמש ועלול להשפיע על הדירוג בגוגל. אבחון וטיפול בבעיות אלו מתחיל בזיהוי האינטראקציות האיטיות ביותר באמצעות כלים כמו PageSpeed Insights ו-Chrome DevTools, ולאחר מכן אופטימיזציה או הסרה של הגורמים המעכבים.

אם אי פעם לחצתם על כפתור ״הוספה לסל״ בחנות אונליין וחיכיתם שנייה או שתיים עד שמשהו קרה? אתם יודעים מהו INP גרוע. התחושה הזו, שהאתר “תקוע” או איטי, היא בדיוק מה שמדד ה-INP החדש של גוגל בא למדוד. וכבעלי חנויות שופיפיי, זה מדד שאתם לא יכולים להרשות לעצמכם להתעלם ממנו.

מה זה INP ולמה הוא החליף את FID כמדד החשוב ביותר לרספונסיביות?

עד ל-12 במרץ 2024, גוגל השתמשה במדד שנקרא First Input Delay (FID) כדי לבדוק רספונסיביות. הבעיה? FID מדד רק את העיכוב באינטראקציה הראשונה של הגולש. בחנות איקומרס, האינטראקציה הראשונה היא לא תמיד החשובה ביותר. מה לגבי לחיצה על וריאנט של מוצר, פתיחת תפריט פילטרים, או הכי חשוב, הוספה לעגלה?

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

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

איך מאבחנים בעיית INP בחנות שופיפיי? מדריך צעד-אחר-צעד

התשובה הקצרה היא: מתחילים מהכלים הכלליים ויורדים לרזולוציות קטנות יותר כדי למצוא את “החוליה החלשה”.

1. תמונה כללית עם Google Search Console: היכנסו לדוח ה-Core Web Vitals בחשבון ה-Search Console שלכם. גוגל יציג לכם קבוצות של כתובות URL ויסמן אותן כ”טוב”, “דורש שיפור” או “גרוע” עבור מדד INP. אם אתם רואים הרבה כתובות בצהוב או אדום, זו נורת אזהרה ראשונה.

2. זיהוי דפים בעייתיים עם PageSpeed Insights: קחו כתובת URL של דף חשוב שמסומן כבעייתי (למשל, דף מוצר פופולרי) והדביקו אותה ב-PageSpeed Insights. הכלי יציג לכם את ציון ה-INP מנתוני משתמשים אמיתיים (Field Data). ציון “טוב” מצביע על כך שהאינטראקציות בחנות מהירות ורספונסיביות, לפי web.dev. כל מה שמעל מצריך שיפור, ובמיוחד מעל 500ms (שנחשב ל”גרוע” לפי web.dev), דורש טיפול.

3. איתור הגורם המדויק עם Chrome DevTools: זה השלב שבו אנחנו הופכים לבלשים. הוא נשמע טכני, אבל התהליך הבסיסי פשוט:

   • פתחו את הדף הבעייתי בדפדפן כרום ולחצו על F12 כדי לפתוח את כלי המפתחים.
   • עברו ללשונית “Performance”.
   • לחצו על כפתור ההקלטה (עיגול שחור).
   • בצעו את הפעולה שאתם חושדים שהיא איטית (למשל, לחיצה על “הוסף לעגלה” או החלפת צבע של מוצר).
   • עצרו את ההקלטה.
   • הסתכלו בציר הזמן על שורת ה-”Interactions”. משימות ארוכות יסומנו באדום. אם תעמדו עם העכבר על משימה כזו, תוכלו לראות איזה סקריפט גרם לעיכוב, ולרוב גם לאיזו אפליקציה הוא שייך.

מהם 3 הגורמים המרכזיים ל-INP גבוה בחנויות שופיפיי?

ברוב המקרים, בעיות INP בחנויות שופיפיי נובעות משילוש קטלני שנלחם על אותו משאב יחיד: ה-”Main Thread” של הדפדפן. דמיינו אותו כעובד אחד שצריך לענות לטלפון, לטפל בלקוח בדלפק ולהכין קפה בו-זמנית. כשהוא עמוס מדי, הכל קורה לאט.

1. אפליקציות צד-שלישי (האשם הנפוץ ביותר): ווידג’טים של צ’אט, אפליקציות לביקורות מוצר, פופאפים, כלי אנליטיקס מתקדמים. כל אלו מוסיפים קוד JavaScript שרץ ברקע או מופעל בכל אינטראקציה, “תופס את הקו” וחוסם את היכולת של הדפדפן להגיב במהירות.
2. תבנית עיצוב (Theme) מורכבת: תבניות עמוסות באנימציות, סליידרים מתוחכמים ופונקציונליות JavaScript כבדה (כמו תפריטי “מגה-מניו”) יכולות להפוך גם אינטראקציות פשוטות לאיטיות להחריד.
3. ריבוי אלמנטים בדף (DOM Size גדול): דפי קולקציה עם מאות מוצרים שנטענים בבת אחת, או דפי מוצר עם אינסוף אפשרויות והתאמות אישיות. כשהמשתמש מבצע פעולה, הדפדפן צריך “לחשב מסלול מחדש” עבור כל האלמנטים האלה, וזה לוקח זמן.

החשודים המיידיים: טבלת איתור ותיקון של גורמי INP נפוצים

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

הגורם הנפוץ ל-INP גבוה בשופיפיי	הפתרון המעשי לאיתור ותיקון
אפליקציות צד-שלישי כבדות (צ’אט, ביקורות, פופאפים)	השתמשו ב-Chrome DevTools (לשונית Performance) כדי לזהות סקריפטים של אפליקציות שרצים לאורך זמן וחוסמים את ה-Main Thread. שקלו להסיר אפליקציות לא חיוניות, לחפש חלופות קלות יותר, או להשתמש באפליקציות המאפשרות טעינה מושהית (Lazy Loading).
קוד JavaScript מורכב בתבנית העיצוב	בדקו אינטראקציות נפוצות כמו פתיחת תפריט ניווט, החלפת וריאנטים של מוצר, או הוספה לעגלה. אם הן איטיות, ייתכן שהבעיה בתבנית. ניתן להשתמש ב-Shopify Theme Inspector או להיעזר במפתח לדחיית (defer) סקריפטים שאינם קריטיים לטעינה הראשונית.
ריבוי אלמנטים בדף (DOM Size גדול)	בדפים עמוסים (כמו דפי קולקציה עם פילטרים רבים או דפי מוצר מורכבים), ריבוי אלמנטים מכביד על הדפדפן. צמצמו את כמות המוצרים הנטענים ראשונית, השתמשו בטעינה הדרגתית (Pagination או Infinite Scroll), ופשטו את מבנה הסקשנים היכן שניתן.
אנימציות ועיבודים מבוססי CSS/JS	אנימציות מורכבות המופעלות בעת אינטראקציה (למשל, פתיחת עגלת הקניות) עלולות לגרום לעיכוב. העדיפו אנימציות CSS פשוטות המשתמשות במאפיינים כמו transform ו-opacity על פני מניפולציות JavaScript מורכבות.

איך מתקנים INP שנגרם מאפליקציות צד-שלישי בשופיפיי?

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

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

לאחר מכן, השתמשו בשיטת האבחון עם DevTools שתיארנו קודם כדי לזהות אילו אפליקציות גורמות לעיכובים. נסו להשבית באופן זמני אפליקציה חשודה ובדקו שוב את מהירות האינטראקציה. אם יש שיפור דרמטי, מצאתם את האשם. מכאן, הדרך היא לחפש חלופה קלה יותר או לבדוק אם בהגדרות האפליקציה יש אפשרות לטעינה מושהית (Lazy Loading). חשוב לזכור זאת גם כשבוחרים כלים חדשים; קראו עוד על כך ב**מדריך לבחירת אפליקציית SEO לשופיפיי**.

כמה עולה לתקן בעיות INP והאם אפשר לעשות זאת לבד?

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

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

מעבר לתיקון: איך להפוך חוויה מהירה ליתרון ב-SEO וב-GEO?

חשוב להבין את ההבחנה בין SEO ל-GEO: SEO מדרג את העמודים שלכם בתוצאות החיפוש הקלאסיות; GEO (Generative Engine Optimization) מכניס את המותג שלכם ישירות לתוך התשובה שמנוע ה-AI מייצר. חנות עם INP נמוך מרוויחה בשתי החזיתות.

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

בחזית ה-GEO, הסיפור אפילו יותר מעניין. מנועי תשובות מבוססי AI שואפים לתת למשתמשים תשובות ישירות והמלצות. הם יעדיפו להמליץ על חנות שמספקת חוויה חלקה ונטולת תסכולים. אתר איטי עם INP גבוה הוא איתות לאיכות נמוכה, מה שהופך אותו למועמד פחות סביר להופיע בתשובה של AI. חוויה מהירה בונה סמכות ואמינות, שהן המטבע החשוב ביותר בעידן החיפוש החדש. תוכלו לקרוא עוד על הנושא במדריך ה-GEO וה-AI המלא לחנויות שופיפיי.

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

מה חשוב לזכור

• INP הוא המדד החדש לאינטראקטיביות: הוא בוחן את כל האינטראקציות בחנות, מה שהופך אותו למדד אמין ומכריע להצלחה באיקומרס.
• התחילו באבחון נכון: השתמשו ב-PageSpeed Insights כדי לזהות את הבעיה וב-Chrome DevTools כדי לאתר את המקור המדויק שלה.
• אפליקציות הן החשוד המיידי: ברוב המקרים, INP גבוה בשופיפיי נגרם מאפליקציה כבדה. ביקורת אפליקציות קשוחה היא הפעולה עם ההחזר הגבוה ביותר על ההשקעה.
• מהירות היא אסטרטגיה: חנות רספונסיבית לא רק מגדילה המרות היום, אלא גם בונה את התשתית שלכם להצלחה ב-SEO וב-GEO, ומבטיחה שהמותג שלכם יומלץ על ידי מנועי התשובות מחר.

---

רוצים לראות איפה החנות שלכם עומדת? Scayla מודדת את הנראות של החנות בגוגל ובמנועי ה-AI, מאבחנת פערים, ובונה את התוכן שסוגר אותם. כך זה עובד