המפתח להצלחת המאמצים שלהם לבצע אופטימיזציה היה למצוא קורלציה בין ביצועי האתר לבין מדדים עסקיים.
Swappie היא חברת סטארט-אפ מצליחה שמוכרת טלפונים משופצים. במשך כמה שנים הם העדיפו להוסיף תכונות חדשות על פני שיפור ביצועי האתר, אבל כשהבחינו שהתוצאות העסקיות באתר לנייד נמוכות יותר מאלה בגרסה למחשב, הם החליטו לשנות את המדיניות. הם התמקדו באופטימיזציה של הביצועים, ועד מהרה ראו עלייה בהכנסות מהנייד.
42%
עלייה בהכנסות שמגיעות ממבקרים בנייד
10pp*
*עלייה של נקודת אחוז ביחסי המרה הממוצעים
הדגשת ההזדמנות
כדי לחשב את שיעור ההמרה היחסי בניידים (Rel mCvR), מחלקים את שיעור ההמרה בניידים בשיעור ההמרה במחשב. יש הרבה הזדמנויות למעקב אחרי מדדי מהירות, אבל קשה מאוד לקשר אותם למדדים עסקיים. מכיוון שאותם קמפיינים ותנודות עונתיות מוצגים גם בנייד וגם במחשב, המדד Rel mCvR מסיר את ההשפעה של הפרמטרים החיצוניים האלה, ומראה רק אם יש שיפור באתר לנייד או לא.
הערך הממוצע של 10 האתרים הגדולים ביותר למסחר אלקטרוני בארה"ב הוא 50%, אבל הערך של Swappie היה 24%. הנתונים האלה הצביעו על בעיות באתר לנייד ועל כך שהחברה מחמיצה הכנסות, מה שהוביל להשקת הפרויקט לשיפור הביצועים.
מדידת ההשפעה של שיפורי הביצועים
צוות Swappie השתמש ב-Google Analytics כדי להגדיר מעקב יומי אחרי שיעור ההמרות המשוער של משתמשים שחוזרים לאתר (Rel mCvR) וזמן הטעינה הממוצע של דף בנייד, באמצעות גיליון האלקטרוני הזה. (איך משתמשים בגיליון האלקטרוני) הם גם התחילו לעקוב אחרי מדדי הליבה של חוויית השימוש באינטרנט דרך Google Analytics ו-BigQuery. אחרי שהמעקב הופעל, המפתחים התחילו לעבוד על ביצועי האתר.
אחרי שלושה חודשים בלבד של עבודה, ההשפעה הייתה ברורה – שיעור ההמרות המשוער בנייד עלה מ-24% ל-34%, וההכנסות בנייד עלו ב-42%!
23%
זמן טעינה ממוצע קצר יותר של דפים
55%
זמן טעינה ראשוני (LCP) קצר יותר
91%
CLS נמוך יותר
90%
FID נמוך יותר
אופטימיזציות
אופטימיזציה לשיפור מדדי LCP ו-CLS
צוות הפיתוח של Swappie גילה שיש הרבה מקום לשיפור של דברים קטנים שלא נתקבלו תשומת לב במשך זמן רב. ניתוח האתר בחלונות תצוגה שונים ובשפות שונות הדגיש בעיות במדדי LCP ו-CLS שהיה קל לפתור, והן השפיעו מאוד על הביצועים הכוללים. לדוגמה, כשהצלחנו להציג את רכיב ה-LCP בשרת במקום בלקוח, זמן הטעינה של הרכיב הזה ירד.
זיהוי שינויים בפריסה היה מאתגר, כי הם עשויים להשתנות מאוד בהתאם למסך ולחיבור. אחרי שהם הוסיפו את מדדי הליבה לבדיקת חוויית המשתמש באתר מהמשתמשים למערכת ניתוח הנתונים, הם ידעו שהם בדרך הנכונה כי מדד CLS ירד.
תמונות
התמונות אופטימיזרו באמצעות טעינה מראש, טעינה מדורגת ושינוי הגודל המתאים. הם טוענים מראש תמונות חשובות (למשל LCP), ומטעינים תמונות מחוץ למסך רק כשצריך.
גופנים
ב-Swappie ביצעו אופטימיזציה של הגופנים על ידי החלפת ספקים. הדבר השפיע מאוד על החברה, כי היא נזקקה לדרך אופטימלית לטיפול בגופנים הנדרשים בשפות שונות.
סקריפטים של צד שלישי
צוות Swappie השקיע מאמצים רבים כדי לבדוק כל סקריפט וווידג'ט של צד שלישי, את המקומות שבהם הם שימשו ואת הפונקציות שהם סיפקו. אחרי דיונים עם כל בעלי העניין, הם תכננו לצמצם את ההשפעה של הסקריפטים על האתר, תוך שמירה על הפונקציונליות. הם הסירו את מה שלא היה נחוץ וביצעו אופטימיזציה של שאר הקוד, וכך צמצמו באופן משמעותי את כמות ה-JavaScript של צד שלישי באתר.
הסרת קוד שלא בשימוש ואופטימיזציה של חבילות
אופטימיזציה של הייבוא והסרה של רכיבי JS ו-CSS שלא בשימוש הביאו לשיפורים קטנים בביצועי האתר של Swappie, אבל השיפורים הקטנים האלה מצטברים לאורך זמן. בנוסף, הם ביצעו אופטימיזציה של הגדרת החבילות.
יצירת תרבות של ביצועים ב-Swappie
התוצאה שהושגה ב-Swappie נובעת לא רק מהשינויים בקוד, אלא גם מהשינויים בארגון וסדר העדיפויות שלו.
מנהל ההנדסה, טיימו הוווינן, מסביר:
כדי להדגיש את החשיבות של מהירות האתר, צריך לקשר אותה למדדים עסקיים. כשאין לכם מספיק זמן ומשאבים, תמיד צריך לתת עדיפות לדברים. כדאי לתת עדיפות לערך הלקוח, אבל קל מאוד להתמקד בתכונות חדשות ובשיפורים ישירים יותר של ההמרות אם אתם רואים במהירות האתר רק שיפור של 'התחושה' באתר. לא תמיד קל לקשר את מהירות האתר למדדים עסקיים, וזה המקום שבו החישוב באמצעות Rel mCvR עזר לנו מאוד.
Teemu Huovinen
אחרי שצוות המפתחים קיבל הזדמנות להתמקד לחלוטין במהירות האתר במשך רבעון, הם היו יותר מוטיבציה להעמיק את הבדיקה.
השילוב של ההשפעה שלנו עם הצמיחה של הצוות שלנו הוא מה שמדהים עוד יותר. ארבעה מתוך שבעת המפתחים שלנו התחילו לעבוד בחודש שבו התחלנו לעבוד על הביצועים. כל הקרדיט לצוות. מדהים איך הצלחנו להתאחד סביב הנושא ולהשפיע בצורה כה משמעותית.
Teemu Huovinen
טיימו גם מציין את החשיבות של השקעת זמן בהתחלה כדי ליצור תוכניות שמבוססות על נתונים, ללמוד איך להשתמש בכרטיסייה 'ביצועים' ב-DevTools ולהגדיר ניתוח נתוני משתמשים לפני שמבצעים שיפורים. תרשימים (במיוחד כאלה שצומחים בכיוון הנכון) הם מקור מצוין למשוב ולתיקוף של העבודה שלכם. בדיקת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) בשטח לצד הציונים של Lighthouse (מבוססי מעבדה) עזרו להם להתמקד באופטימיזציה של הדברים הנכונים שמשפיעים על הכי הרבה אנשים.