מהירות חנות אונליין: מה לבדוק ובאיזה סדר לתקן

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

מהירות חנות אונליין נמדדת לפי שלושה מדדים של גוגל: טעינת התוכן הראשי תוך 2.5 שניות (LCP), תגובה ללחיצה תוך 200 מילי-שניות (INP) ויציבות חזותית של 0.1 ומטה (CLS), ב-75% מהביקורים. בחנות כדאי לבדוק קודם את עמודי המוצר והקטגוריה, ואחריהם את העגלה והתשלום, כי שם נקבע אם הגולש קונה או עוזב. את רוב הבעיות פותרים בסדר קבוע: תמונות, סקריפטים של צד שלישי, שרת ומטמון, ורק אחר כך כוונונים עדינים.

למה חנות אינה כמו אתר תדמית

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

יש גם נתון עסקי שכדאי להכיר. מחקר שגוגל הזמינה מחברות Deloitte ו-55, על 37 אתרים של מותגים באירופה ובארצות הברית ויותר מ-30 מיליון ביקורים (סשנים), מצא שהאצה של עשירית שנייה בטעינה בנייד הלכה יד ביד עם עלייה של 8.4% בהמרות באתרי קמעונאות ו-9.2% בגודל ההזמנה הממוצעת. זה קשר סטטיסטי בין מדדים ולא הבטחה, ואין סיבה להניח שבחנות שלכם התוצאה תהיה זהה. אבל הכיוון ברור: בחנות, מהירות היא עניין של הכנסות.

איך בודקים: לא רק עמוד הבית

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

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

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

שלושת המדדים בלשון חנות

מדד יעד מה זה אומר בחנות
LCP עד 2.5 שניות תמונת המוצר או הבאנר הראשי מופיעים במהירות
INP עד 200 מילי-שניות לחיצה על ״הוסף לעגלה״, בחירת מידה או פתיחת תפריט מגיבה מיד
CLS עד 0.1 הכפתור לא קופץ ברגע שהגולש מנסה ללחוץ עליו

שלב 1: תמונות, כי שם נמצא ה-LCP

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

  • לא טוענים את התמונה הראשית בטעינה עצלה. הגדרת lazy loading לתמונה שנמצאת בחלק העליון של המסך מוסיפה השהיה מיותרת. שומרים אותה לתמונות שמתחת לקפל.
  • מסמנים את תמונת ה-LCP כבעדיפות גבוהה עם fetchpriority. עושים זאת לתמונה אחת בלבד, אחרת האות מאבד את משמעותו.
  • מקטינים משקל. תמונות מוצר שהועלו כקבצים של כמה מגה-בייט וקטנו רק בתצוגה הן מקור נפוץ לאיטיות. מעלים בגודל סביר וממירים לפורמט מודרני כמו WebP או AVIF.
  • קובעים רוחב וגובה לכל תמונה. כך הדפדפן שומר מקום מראש וה-CLS לא נפגע.

שלב 2: סקריפטים של צד שלישי

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

  1. רשמו את כל הסקריפטים שנטענים בחנות, והשוו לרשימה של מה שבאמת משתמשים בו.
  2. הסירו כלים שאיש לא פתח את הדוח שלהם בחצי השנה האחרונה.
  3. טענו את מה שנשאר באיחור (defer) או אחרי אינטראקציה ראשונה, ולא בתחילת העמוד.
  4. בדקו אחרי כל שינוי שהמעקב אחרי רכישות עדיין עובד, כי תג שנשבר גורם לאובדן נתונים על רכישות.

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

שלב 3: יציבות חזותית בעמוד המוצר

CLS גבוה הוא בעיה מוכרת בחנויות: באנר הנחה שנדחף מלמעלה, גופן שמוחלף אחרי הטעינה, ווידג׳ט דירוג שמופיע באיחור ודוחף את כפתור הקנייה למטה. לפי web.dev, מה שעוזר הוא לשמור מראש מקום לתמונות, לפרסומות ולתכנים מוטמעים (בעזרת min-height או aspect-ratio), להימנע מהזרקת תוכן מעל תוכן קיים, ולהגדיר גופן חלופי דומה בגודלו לגופן הרשמי. אם יש לכם פס הודעות עליון, הקצו לו גובה קבוע מההתחלה.

שלב 4: שרת, מטמון ומסד נתונים

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

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

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

דוגמה: מה שווה שיפור, בחישוב פשוט

נניח, כהמחשה בלבד, חנות עם 20,000 כניסות בחודש, אחוז המרה של 2% (400 הזמנות) והזמנה ממוצעת של 300 ש״ח. ההכנסה החודשית: כ-120,000 ש״ח. אם אחרי תיקוני מהירות אחוז ההמרה עולה מ-2.0% ל-2.2%, מספר ההזמנות הוא 440 וההכנסה כ-132,000 ש״ח, כלומר כ-12,000 ש״ח נוספים בחודש. המספרים כאן דמיוניים, ושיפור כזה אינו מובטח: חלק מהעלייה בהמרה יכול לנבוע מגורמים אחרים. לכן כדאי למדוד לפני ואחרי, באותם ימים בשבוע ובאותו סוג תנועה.

טעויות נפוצות

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

סדר עבודה מומלץ לשבוע הראשון

  1. יום 1: מדידת ארבעת סוגי העמודים, תיעוד המדדים בנייד.
  2. יום 2: תיקון תמונות בעמודי המוצר והקטגוריה המובילים.
  3. יום 3: מיפוי והסרה של סקריפטים מיותרים.
  4. יום 4: בדיקת יציבות חזותית ותיקון אלמנטים שקופצים.
  5. יום 5: בדיקת מטמון ושרת, ומדידה חוזרת.

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

שאלות נפוצות

מהי מהירות טעינה טובה לחנות אונליין?

לפי גוגל, עמוד טוב טוען את התוכן הראשי תוך 2.5 שניות, מגיב ללחיצה תוך 200 מילי-שניות ושומר על יציבות חזותית של 0.1 ומטה, כשהמדידה נעשית ב-75% מהביקורים.

איזה עמודים בחנות הכי חשוב לבדוק?

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

האם מהירות באמת משפיעה על מכירות?

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

אפשר לשמור את כל החנות במטמון?

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

מה הדבר הראשון לתקן בחנות איטית?

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

מקורות

רוצה לשתף את המאמר?

מאמרים דומים