כמעט כל בעל חנות ראה פעם ציון אדום בבדיקת מהירות והחליט להתעלם ממנו, כי האתר מרגיש מהיר במחשב שלו. התגובה הזאת הגיונית ובכל זאת שגויה, כי מדדי הביצועים לאתר לא מודדים הרגשה אלא רגעים ספציפיים בטעינה. בחנות עם קטלוג גדול הרגעים האלה הם בדיוק המקום שבו הגולש נושר, לפני שהוא בכלל ראה מוצר אחד. ההבדל בין חנות מהירה לחנות איטית לא נמדד בשניות שלמות אלא בשבריר שנייה שבו הגולש מחליט אם להישאר.
להבין מה המדדים בודקים בפועל
מדדי הביצועים לאתר לא נותנים ציון כללי למהירות. הם מודדים שלושה רגעים נפרדים בטעינה, וכל אחד מהם מתאר חוויה אחרת של הגולש. כשמבינים מה כל מדד מודד, פתאום ברור למה ציון נמוך בדסקטופ לא מלמד כלום על מה שקורה בטלפון.
שלושת המדדים שגוגל סופרת:
- טעינת האלמנט הגדול בעמוד, בדרך כלל תמונת ההירו או קוביית המוצר הראשונה
- זמן התגובה לפעולה ראשונה של הגולש, לחיצה על מוצר או על שורת חיפוש
- יציבות ויזואלית, כלומר כמה העמוד קופץ וזז בזמן שהוא נטען
שימו לב שאף אחד מהשלושה לא מודד מתי העמוד סיים להיטען. הם מודדים מתי הגולש רואה משהו, מתי הוא יכול לעשות משהו, ומתי הוא מפסיק לרדוף אחרי כפתור שזז. זאת אומרת שהמדדים מתארים את חוויית הקנייה, לא את הרשת.
ההבחנה הזאת משנה את כל אופן העבודה. אם המטרה הייתה לסיים טעינה מהר, הפתרון היה להוריד דברים מהעמוד. מכיוון שהמטרה היא שהגולש יראה, ילחץ ולא יקפוץ, הפתרון הוא סדר: מה עולה ראשון, מה מחכה, ומה שומר לעצמו מקום מראש. אותו עמוד בדיוק, באותו משקל, יכול לקבל שני ציונים שונים לגמרי לפי הסדר הזה בלבד.
בחנות ההבדל בולט אפילו יותר. עמוד קטגוריה עם 40 מוצרים הוא כבד מטבעו ואי אפשר להוריד ממנו מוצרים, אבל אפשר בהחלט להחליט שהשורה הראשונה עולה מיד והשאר מחכה לגלילה. זו לא הקטנה של העמוד אלא ארגון מחדש שלו.
להבדיל בין ציון מעבדה לנתוני שטח
כשמריצים בדיקת מהירות מקבלים שני סוגי נתונים ולא תמיד שמים לב להבדל. ציון מעבדה הוא סימולציה: הכלי טוען את העמוד פעם אחת בתנאים מוגדרים מראש ונותן ציון. נתוני שטח הם מה שקרה לגולשים אמיתיים שלכם לאורך שבועות.
הבעיה מתחילה כשמתחילים לרדוף אחרי ציון המעבדה. אפשר להעלות אותו בעשר נקודות בלי שאף גולש ירגיש הבדל, ואפשר לתקן דבר אחד קטן שלא מזיז את הציון בכלל אבל משנה את נתוני השטח. גוגל עצמה מסתכלת על נתוני השטח כשהיא מחליטה מה החוויה בעמוד שלכם.
הכלל הפשוט: הציון הוא כלי ניווט, נתוני השטח הם התוצאה. אם השניים סותרים זה את זה, לכו אחרי השטח. יש לי מדריך שלם על איך לנתח ביצועים של עמוד ולהבין מה הכלי בעצם אומר לכם.
יש עוד סיבה מעשית להעדיף את השטח. נתוני השטח נאספים לאורך תקופה ולכן הם מחליקים רעש: יום עמוס, קמפיין שהביא קהל אחר, תקלה של שעה. ציון מעבדה, לעומת זאת, מושפע מהרגע המדויק שבו הרצתם אותו, ושתי הרצות ברצף יכולות להיבדל בכמה נקודות בלי ששום דבר באתר השתנה.
בפועל זה אומר לא להסיק מסקנות מהרצה אחת. מריצים שלוש פעמים, לוקחים את התוצאה האמצעית, ומשווים אותה לאותה בדיקה מלפני חודש. הפער בין שתי נקודות בזמן מלמד הרבה יותר מכל מספר בודד.
למדוד במובייל ולא בדסקטופ
רוב בעלי החנויות בודקים את האתר במחשב, על חיבור סיבים, עם דפדפן שכבר שמר את כל הקבצים בזיכרון. זאת הבדיקה הכי מנחמת ולכן גם הכי חסרת ערך. הגולש שלכם נמצא בטלפון, לרוב על סלולר, ולעיתים קרובות בפעם הראשונה באתר.
מה שקורה בפועל במובייל שונה בכל פרמטר: מעבד חלש יותר, רשת פחות יציבה, מסך צר שמכריח את העיצוב להתארגן מחדש. עמוד שנטען בשנייה וחצי בדסקטופ יכול לקחת ארבע שניות באותו רגע בטלפון.
מה לבדוק בכל מדידה במובייל:
- טעינה ראשונה בלי זיכרון מטמון, כמו גולש חדש שהגיע מגוגל
- טעינה על רשת סלולרית ולא על הוויי פיי של המשרד
- מכשיר בינוני ולא הטלפון החדש שלכם
- גלילה בפועל בעמוד הקטגוריה, לא רק את רגע הטעינה
שלוש הבדיקות האלה לוקחות עשר דקות ומייצרות תמונה אמיתית של מה שקורה. בלעדיהן אתם מתקנים בעיה שאולי לא קיימת ומפספסים את זאת שכן.
לזהות מתי מדדי ביצועים לאתר כבר עולים בכסף
לא כל שיפור מהירות שווה את הזמן שהוא לוקח. יש טווח שבו הגולש לא מרגיש כלום, ויש נקודה שבה הוא פשוט חוזר לתוצאות החיפוש. הסף שאני עובד לפיו הוא ברור: זמן טעינה של מעל 5 שניות במובייל זו כבר בעיה עסקית, לא בעיה טכנית.
מעל הסף הזה קורים שלושה דברים בבת אחת. הגולש נוטש לפני שראה מוצר, גוגל רואה שהוא חזר מיד לתוצאות, והתקציב שהבאתם איתו את התנועה נשרף על ביקור שלא התחיל. בגדול, כל שנייה שם עולה יותר מכל תוספת תוכן שתעשו באותו עמוד.
מתחת לסף התמונה אחרת. הפער בין שתי שניות לשלוש שניות קיים אבל הוא לא מה שיציל את החנות. שם עדיף להשקיע בקוביית מוצר, בדף מקשר ובתוכן, ולא בעוד עשירית שנייה.
הדרך לזהות איפה אתם עומדים היא לא לשאול כמה שניות לוקח לעמוד להיטען, אלא לשאול איפה הגולש נושר. שלושה מקומות מספרים את הסיפור:
- אחוז הגולשים שנכנסו ויצאו בלי לגלול בכלל
- הפער בין תנועה לעמוד קטגוריה לבין כניסות לדפי מוצר ממנו
- נטישה בשלב הראשון של תהליך התשלום
כשאחד משלושת אלה חריג במובייל ותקין בדסקטופ, זו כמעט תמיד בעיית ביצועים ולא בעיית תוכן. זה ההבדל בין לתקן מהירות כי הציון אדום לבין לתקן אותה כי היא עולה בהזמנות.
לטפל בתמונת ההירו לפני כל דבר אחר
האלמנט הגדול בעמוד הוא כמעט תמיד תמונה, ובחנות זו בדרך כלל תמונת ההירו בדף הבית או התמונה הראשית בדף מוצר. המדד שמודד את הרגע הזה נקבע כמעט לגמרי על ידה, ולכן כאן נמצא השיפור הגדול ביותר ליחידת עבודה.
שלוש טעויות שחוזרות כמעט בכל חנות שאני נכנס אליה:
- תמונת ההירו מסומנת לטעינה נדחית, ולכן הדפדפן דוחה בדיוק את מה שהגולש אמור לראות ראשון
- התמונה נטענת בגודל מלא של דסקטופ גם במסך של טלפון
- התמונה יושבת בתוך קרוסלה שנטענת רק אחרי שהסקריפט שלה עלה
סדר הפעולות פשוט: מוציאים את ההירו מטעינה נדחית, מגישים לה גרסה במידה שמתאימה למובייל, ואם היא בתוך קרוסלה דואגים שהשקופית הראשונה תעלה כתמונה רגילה. זה בדרך כלל השינוי הבודד עם ההחזר הגדול ביותר.
לקבוע מידות מפורשות לכל תמונה
היציבות הוויזואלית נשברת בעיקר בגלל תמונות בלי מידות. הדפדפן לא יודע כמה מקום להשאיר, מסדר את העמוד בלעדיהן, ואז התמונה מגיעה והכל קופץ מטה. הגולש שכבר הושיט אצבע לכפתור לוחץ על משהו אחר.
בחנות זה כואב פי כמה כי הבעיה מוכפלת במספר הקוביות בעמוד קטגוריה. כשיש 40 מוצרים בעמוד, 40 תמונות בלי מידות מייצרות רצף קפיצות לאורך כל הגלילה.
התיקון לא דורש עיצוב מחדש. מגדירים לכל תמונה רוחב וגובה, ומוודאים שקוביית המוצר שומרת על אותו יחס ממדים גם כשהתמונה עוד לא הגיעה. באנרים ומודולים שנטענים דינמית צריכים מקום שמור בדיוק באותה שיטה.
יש עוד שלושה חשודים קבועים שמזיזים עמוד גם כשהתמונות בסדר:
- באנר הודעה עליון שנכנס אחרי טעינה ודוחף את כל העמוד מטה
- גופן מותאם שמחליף גופן ברירת מחדל ומשנה את גובה הטקסט
- מודול המלצות או מוצרים אחרונים שנטען אחרון ונפתח באמצע העמוד
לכל אחד מהם הפתרון זהה: לשמור לו מקום מראש במקום להכניס אותו לתוך עמוד בנוי. זו הגדרה קטנה שכמעט אף אחד לא עושה, והיא מסבירה חלק גדול מהקפיצות שגולשים מרגישים בטלפון.
לדחות טעינת תמונות שמתחת לקפל בלבד
טעינה נדחית היא כלי טוב שהופך למזיק ברגע שמפעילים אותו על הכל. הרעיון הוא שהדפדפן יטען קודם את מה שרואים ורק אחר כך את השאר. ברגע שהוא מיושם בלי הבחנה, הוא דוחה גם את התמונה שהגולש מסתכל עליה.
החלוקה שאני עובד לפיה:
- כל מה שנראה במסך הראשון נטען מיד, בלי דחייה
- שורת המוצרים הראשונה בעמוד קטגוריה נטענת מיד
- כל מה שמתחת לזה נדחה
- לוגו, אייקוני תשלום ואלמנטים קטנים בהדר לא נדחים בכלל
החלוקה הזאת נשמעת טכנית אבל היא בעצם החלטה עיצובית: מה הגולש חייב לראות בשנייה הראשונה. ברגע שעונים על השאלה הזאת, ההגדרה נגזרת מעצמה.
להקטין משקל תמונות בלי להרוס איכות
קטלוג של חנות הוא בראש ובראשונה אוסף תמונות, ולכן משקל התמונות הוא בדרך כלל רוב משקל העמוד. הפיתוי הוא להריץ דחיסה גורפת על הכל ולסיים. זה עובד עד שמסתכלים על דף מוצר ורואים מוצר מרוח.
מה שכן עובד הוא סדר עבודה בשלושה שלבים. קודם ממירים לפורמט תמונה מודרני שמייצר קובץ קטן יותר באותה איכות. אחר כך מגישים לכל מכשיר את המידה שהוא באמת צריך, במקום להקטין תמונת ענק בדפדפן. ורק בסוף נוגעים ברמת הדחיסה עצמה, ובזהירות.
אני לא מותח תמונות ולא דוחס אותן בעיוורון. מותר להקטין משקל, אסור שהמוצר ייראה פחות טוב, כי המדף הדיגיטלי הוא כל מה שיש לגולש כדי להחליט.
בקטלוג גדול צריך גם שיטה, לא רק כלל. כשיש אלפי מק"טים אי אפשר לעבור תמונה תמונה, אבל אפשר בהחלט להגדיר שתי רמות: קוביות מוצר בעמודי קטגוריה מקבלות מידה קטנה ודחיסה חזקה יותר, ותמונות הגלריה בדף המוצר נשארות באיכות גבוהה. בעמוד קטגוריה אף אחד לא מזום על התמונה, ובדף מוצר זה בדיוק מה שהוא עושה.
שווה גם לעבור על ההעלאות הישנות. בהרבה חנויות שאני נכנס אליהן יש תמונות שהועלו לפני שנים במידות מסך של אז, והן ממשיכות להיטען בכל עמוד קטגוריה עד היום.
לצמצם סקריפטים של צד שלישי
סקריפט של צד שלישי הוא כל קוד שמישהו אחר מריץ באתר שלכם: אנליטיקס, פיקסלים, צ׳אט, וידג׳טים, כלי סקרים, מפות. כל אחד מהם נראה זניח בפני עצמו, וביחד הם לרוב הסיבה שהמדד של זמן התגובה לפעולה נראה רע.
הבעיה מתחילה כשאף אחד לא מנהל את הרשימה. מתקינים כלי לקמפיין אחד, הקמפיין נגמר, הסקריפט נשאר. אחרי שנתיים יש שם דברים שאיש בעסק לא זוכר למה הם שם.
שאלות לכל סקריפט ברשימה:
- מי בעסק מסתכל על הנתונים שהוא מייצר
- האם הוא נטען בכל עמוד או רק במקום שבו הוא נחוץ
- האם יש כלי אחר שכבר עושה את אותו דבר
- מה נשבר אם נכבה אותו מחר
בפועל, ברוב החנויות אפשר להוריד שליש מהרשימה בלי שאף אחד ירגיש חוסר. זה חלק מסדרת הבדיקות השבועיות שכל חנות צריכה להריץ על עצמה.
לדחות סקריפטים שלא נחוצים לרגע הראשון
אחרי שמצמצמים את הרשימה, נשארים סקריפטים שבאמת צריך. כאן נכנס העיקרון של דחייה: לא כל מה שרץ בעמוד חייב לרוץ ברגע הטעינה. וידג׳ט וואטסאפ צף, למשל, נחוץ רק כשהגולש מתקרב אליו, לא כשהעמוד עולה.
מה שקורה בפועל כשלא דוחים כלום זה שהדפדפן עסוק בסקריפטים בדיוק ברגע שהגולש מנסה ללחוץ. העמוד נראה מוכן, האצבע כבר על המסך, ושום דבר לא קורה. זאת בדיוק החוויה שהמדד השני מודד.
מה שכן, יש דבר אחד שאסור לדחות בלי מחשבה: מדידה. אם דוחים את האנליטיקס אגרסיבי מדי, מפסיקים לספור חלק מהגולשים ומאבדים את היכולת לדעת אם השיפור עבד. דוחים את מה שהגולש לא צריך בשנייה הראשונה, ושומרים על מה שסופר.
לא לגעת באיחוד ודחיסת קבצים בעיוורון
כאן נמצא הסיכון הגדול ביותר בכל אופטימיזציה של חנות. איחוד קבצים ודחיסת קוד נשמעים כמו הצעד הבא הטבעי, וכל כלי מציע אותם בלחיצת כפתור. הם גם הדבר שהכי מפיל עיצובים.
מיזוג נכסים שובר עיצוב. זה לא סיכון תיאורטי אלא מה שקורה בפועל: תפריט שלא נפתח, פופאפ שלא נסגר, קרוסלה שנתקעת על השקופית הראשונה, טופס שנראה תקין ולא נשלח. הכי מסוכן זה שהשבירה לרוב חלקית, מופיעה רק במובייל או רק בדפדפן אחד, ואף אחד לא מגלה אותה עד שלקוח מתקשר.
אם בכל זאת נוגעים, זה נראה כך:
- גיבוי מלא לפני כל שינוי
- שינוי אחד בכל פעם, לא ערימה של הגדרות ביחד
- בדיקה ויזואלית מלאה של דף בית, קטגוריה, מוצר, עגלה וטופס
- בדיקה במובייל בנפרד ולא רק בדסקטופ
- החזרה אחורה מיידית ברגע שמשהו נראה חשוד
אם אין לכם דרך לבצע את חמשת השלבים האלה, עדיף לוותר על השיפור הזה לגמרי. עמוד איטי במקצת שעובד עדיף על עמוד מהיר שהתפריט שלו לא נפתח בטלפון.
לבדוק עמוד מכל סוג ולא רק את דף הבית
דף הבית הוא העמוד שכולם בודקים והעמוד שהכי פחות משפיע. הגולש שמגיע מגוגל נוחת בדף מוצר או בדף קטגוריה, והגולש שמגיע מקמפיין נוחת בדף נחיתה. הציון של דף הבית לא מנבא שום דבר מהם.
העמודים שצריך למדוד בנפרד:
- דף הבית
- עמוד קטגוריה ראשית עם הרבה קוביות מוצר
- דף מקשר בין קטגוריה למוצרים
- דף מוצר עם גלריה ומפרט מלא
- תוצאות חיפוש פנימיות באתר
- עגלה ותהליך התשלום
כל סוג עמוד נשבר במקום אחר. עמוד קטגוריה נשבר על תמונות, דף מוצר על גלריה וסקריפטים, העגלה על קוד דינמי שלא ניתן לשמור במטמון. מדידה של עמוד אחד מכל סוג נותנת תמונה שלמה בהרבה ממאה מדידות של דף הבית.
חשוב גם לבחור עמוד מייצג ולא עמוד נוח. אם תמדדו את הקטגוריה עם 12 מוצרים תקבלו תוצאה יפה שלא מתארת את הקטגוריה עם 300 מוצרים שאליה מגיעה רוב התנועה. אותו דבר בדף מוצר: מוצר עם תמונה אחת מתנהג אחרת ממוצר עם גלריה של 12 תמונות ומפרט ארוך.
ברגע שבחרתם את העמודים, קבעו אותם ואל תחליפו. מדידה חוזרת על אותם עמודים בכל חודש היא מה שהופך מספרים בודדים למגמה שאפשר לעבוד לפיה.
לגבות ולבדוק אחרי כל שינוי
אופטימיזציה היא סדרת שינויים בדברים שכרגע עובדים. זה אומר שכל צעד הוא סיכון קטן, וההגנה היחידה היא גיבוי לפני ובדיקה אחרי. בלי שני אלה, שיפור מהירות הוא הימור.
אחרי כל שינוי, בדיקה קצרה:
- דף הבית ודף מוצר נטענים תקין בדסקטופ ובמובייל
- התפריט הראשי וההמבורגר נפתחים
- טופס יצירת קשר נשלח בפועל ומגיע למייל
- הוספה לעגלה עובדת עד סוף התשלום
- המדידה עדיין רושמת ביקורים ואירועים
הבדיקה הזאת לוקחת חמש דקות ומונעת ימים של תיקונים. הרבה מהתקלות שאני נקרא לתקן בחנויות הן תקלות חוזרות באתרי סחר שנולדו בדיוק ככה, משיפור שאיש לא בדק אחריו.
לתעדף לפי השפעה על מכירות ולא לפי הציון
הפיתוי הגדול הוא לעבוד לפי הרשימה שהכלי נותן, מלמעלה למטה. הבעיה היא שהרשימה מסודרת לפי כמה כל סעיף מזיז את הציון, לא לפי כמה הוא מזיז הזמנות. אלה שני סדרים שונים לגמרי.
סדר העדיפויות שאני עובד לפיו:
- העמודים שמביאים הכי הרבה תנועה אורגנית וממומנת
- העמודים שבהם הגולש מחליט לקנות, כלומר דף מוצר ודף קטגוריה
- תהליך התשלום, כי נטישה שם היא כסף שכבר היה בעגלה
- כל השאר
בתוך כל שלב, קודם מה שבטוח ואחר כך מה שמסוכן. תמונת הירו ומידות מפורשות הן שינויים בטוחים עם החזר גבוה. איחוד קבצים הוא ההפך. אחרי 10 שנים ו-60 חנויות ומעלה, כמעט תמיד השיפור האמיתי הגיע משלושה תיקונים בטוחים ולא מעשרים הגדרות אגרסיביות.
שאלות ותשובות
איזה ציון במדדי הביצועים לאתר נחשב מספיק טוב לחנות
הציון עצמו פחות חשוב מהעמידה בשלושת המדדים בנתוני השטח במובייל. חנות שעומדת ביעדים המקובלים לטעינת האלמנט הגדול, לזמן התגובה לפעולה וליציבות הוויזואלית נמצאת במקום טוב גם אם הציון הכללי לא ירוק. מנגד, זמן טעינה של מעל 5 שניות במובייל הוא בעיה עסקית בכל ציון.
למה האתר מרגיש מהיר אצלי ואיטי בבדיקה
כי אתם בודקים בדסקטופ, על רשת מהירה, עם דפדפן ששמר כבר את כל הקבצים של האתר. הבדיקה מדמה גולש חדש במובייל על רשת סלולרית, וזה מצב שונה לגמרי מבחינת מעבד, רשת וזיכרון מטמון. הגולש שמגיע מגוגל נמצא במצב של הבדיקה, לא במצב שלכם.
האם כדאי להפעיל איחוד ודחיסה של קבצים בחנות
רק אם יש גיבוי, אפשרות לחזור אחורה ובדיקה ויזואלית מלאה אחרי כל שינוי. מיזוג נכסים שובר עיצוב, וזה הסיכון הגדול ביותר בכל אופטימיזציה. השבירה לרוב חלקית ומופיעה רק במובייל או רק בדפדפן אחד, ולכן היא מתגלה מאוחר. בלי תהליך בדיקה מסודר עדיף לוותר על השיפור הזה.
מה משפר מהירות בחנות יותר מכל דבר אחר
הטיפול בתמונות, ובתוכו קודם כל תמונת ההירו והתמונה הראשית בדף מוצר. מוציאים אותן מטעינה נדחית, מגישים גרסה במידה שמתאימה למובייל, וקובעים מידות מפורשות לכל תמונה כדי שהעמוד לא יקפוץ. בקטלוג גדול התמונות הן רוב משקל העמוד, ולכן שם ההחזר הגבוה ביותר ליחידת עבודה.
כל כמה זמן צריך לבדוק את ביצועי החנות
אחת לחודש כבדיקה קבועה על אותם עמודים ובאותה שיטה, ובנוסף אחרי כל שינוי משמעותי כמו העלאת באנרים לחג, התקנת כלי חדש או החלפת תבנית של קוביית מוצר. חנות מוסיפה משקל כל הזמן, ולכן מדידה חד פעמית מראה נקודה במקום מגמה.
ביצועים הם עבודת תחזוקה מתמשכת ולא פרויקט חד פעמי
חנות היא לא אתר תדמית. מוסיפים מוצרים, מעלים באנרים לחג, מתקינים כלי לקמפיין, מחליפים תבנית קוביית מוצר. כל אחת מהפעולות האלה מוסיפה משקל, וכולן קורות בין הבדיקה של החודש שעבר לחודש הבא.
לכן חנות שעברה אופטימיזציה מוצלחת חוזרת לאט לאותו מקום אם אף אחד לא מסתכל. לא בגלל שהתיקונים לא החזיקו, אלא בגלל שהקטלוג המשיך לגדול והשכבה השיווקית המשיכה להתעבות.
הדבר היחיד שמחזיק לאורך זמן הוא מדידה קבועה של אותם עמודים באותה שיטה, כדי לראות מגמה ולא נקודה. ברגע שיש מגמה, רואים ירידה בחודש שבו היא קרתה ויודעים מה השתנה אז.
בסופו של דבר, מדדי הביצועים לאתר הם לא מבחן טכני אלא תיאור של מה שהגולש עובר בשלוש השניות הראשונות. חנות שמטפלת בתמונות, מנקה את שכבת הסקריפטים ולא נוגעת במיזוג נכסים בעיוורון תעמוד ביעדים בלי לסכן את העיצוב. מה שנשאר אחרי זה הוא לא פרויקט אלא הרגל, בדיוק כמו כל שאר התחזוקה של החנות.
אם אתם רוצים שמישהו יחזיק את זה עבורכם לאורך זמן, זה בדיוק מה שכולל שירות תחזוקת אתרי איקומרס.
