איך Swappie הגדילה את ההכנסות מהנייד ב-42% על ידי התמקדות בדוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals)

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

Lina Hansson

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

הדגשת ההזדמנות

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

הממוצע של עשרת אתרי המסחר האלקטרוני הגדולים ביותר בארצות הברית הוא 50%Rel mCvR, אבל 24% של Swappie. הנתונים האלה מצביעים על כך שיש אתגרים באתר לנייד ושהחברה החמיצה הכנסות, וזה הוביל להשקת הפרויקט לשיפור הביצועים.

מדידת ההשפעה של שיפורי ביצועים

Swappie השתמשה ב-Google Analytics כדי להגדיר מעקב יומי אחר זמן הטעינה הממוצע של דף Rel mCvR לנייד, באמצעות התבנית הזו בגיליון האלקטרוני. (הוראות לשימוש בגיליון האלקטרוני). החברה התחילה גם במעקב אחר מדדי הליבה לבדיקת חוויית המשתמש באתר באמצעות Google Analytics ו-BigQuery. לאחר המעקב, המפתחים התחילו לעבוד על ביצועי האתר.

אחרי שלושה חודשים בלבד של עבודה, ההשפעה הייתה ברורה – Rel mCvR גדל מ-24% ל-34%, וההכנסה מהנייד עלתה ב-42%!

אופטימיזציות

אופטימיזציה ל-LCP ו-CLS

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

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

תמונות

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

גופנים

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

סקריפטים של צד שלישי

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

הסרת קוד שלא נעשה בו שימוש וביצוע אופטימיזציה לקיבוץ

האופטימיזציה של הייבוא והסרת ה-JS ו-CSS שאינם בשימוש תרמה לשיפורים קלים בביצועי האתר של Swappie, אבל השיפורים הקטנים האלה מתווספים עם הזמן. היא גם ביצעה אופטימיזציה של הגדרת הקיבוץ.

יצירת תרבות ביצועים ב-Sweappie

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

מנהל ההנדסה, טימו הוובינן (Teemu Huovinen), מסביר:

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

טימו הוובינן

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

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

טימו הוובינן

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