איך QuintoAndar הגדילה את שיעורי ההמרה ומספר הדפים בסשן על ידי שיפור ביצועי הדפים

פרויקט שהתמקד באופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר ובמעבר ל-Next.js הביא לעלייה של 5% בשיעורי ההמרה ולעלייה של 87% במספר הדפים בכל סשן.

Daniela Sayuri Yassuda
Daniela Sayuri Yassuda

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

46%

הפחתת שיעור העזיבה

87%

עלייה במספר הדפים לביקור

5%

שיפור בהמרות במהלך שלב האימות

אתגרים

באפליקציה שלנו יש מרכז תוכן של קונדומינiums עם יותר מ-40,000 דפים, שבו המשתמשים יכולים לקבל מידע על הנכסים שלהם, לבדוק תמונות של האזורים המשותפים, לקרוא על השכונה ולמצוא דפים זמינים להשכרה או למכירה. הדפים האלה חשובים מאוד ל-QuintoAndar:

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

עם זאת, היו בעיות שקשורות לביצועים ולחוויית המשתמש בדפים האלה:

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

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

  • הלוגיקה של הרינדור בצד השרת – שמרינדרת את כל הדפים עם נפח התנועה הגבוה, כולל דפי קבוצות הבית – נוצרה בחברה, והפכה ליותר מדי מורכבת לצורך תחזוקה ולהדרכה של עובדים חדשים.
  • גם תכונות חיוניות לשיפור ביצועי האפליקציה, כמו חלוקת קוד, דרשו הגדרה מותאמת אישית ועבודה ידנית מצד המפתחים.
  • ל-QuintoAndar יש יותר מ-30 אפליקציות אינטרנט של React. זהו תהליך קשה לעדכן את האפליקציות האלה ולתחזק אותן בהתאם לשיטות המומלצות.

גישה

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

מעבר ל-Next.js

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

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

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

אופטימיזציה של משאבי JavaScript

השלב הראשון היה הסרת קוד שלא בשימוש. בדקנו את הדוחות של Webpack Bundle Analyzer, שבהם מוצגים התוכן של כל חבילת JS, ובדקנו בקפידה את כל הסקריפטים של צד שלישי. כתוצאה מכך, הצלחנו לנקות כמה ספריות מעקב שלא היו בשימוש בדף הספציפי הזה.

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

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

כבר הוטמעו אופטימיזציות אחרות של JS, כמו דחיסת קבצים סטטיים באמצעות Brotli, שבוצעה בזמן ה-build באמצעות BrotliWebpackPlugin, והוחלה גם על סוגים אחרים של משאבים סטטיים. בהתחלה, הסתמכנו על הדחיסה שסופקה על ידי ה-CDN, ו-Brotli צמצם את גודל ה-JS ב-18% בהשוואה ל-gzip. אבל לאחר מכן עברנו לדחיסת Brotli בזמן ה-build, והצלחנו להשיג הפחתה של 24%.

אופטימיזציה של משאבי תמונות

בגרסה לנייד, תמונה ראשית תופסת את רוב האזור מעל למסך. הוא גם הרכיב שמוגדר כהמהירות שבה נטען רכיב התוכן הכי גדול (LCP) בדף.

דף הבית המשותף של Edifício Copan (סאו פאולו, ברזיל). תמונה שצולמה מגובה פני הרחוב מראה את הקימורים של מבנה הבניין.
התמונה הראשית (Hero) של דף של דירה בבניין משותף.

בעבר, כל התמונות כבר הכילו את המאפיינים srcset ו-sizes כדי להציג תמונות רספונסיביות. השתמשנו גם ב-Thumbor כדי לשנות את הגודל של תמונות על פי דרישה, והגדרתנו את ה-CDN שלנו לשמירתן במטמון ביעילות.

במכשירים ניידים מודרניים יש מסכים עם צפיפות פיקסלים גבוהה מאוד, כלומר הדפדפן ירנדר גרסאות של התמונה בגודל פי 3 או פי 4, אם הן זמינות. ככל שהרזולוציה גבוהה יותר, קשה יותר לעין האנושית להבחין בהבדלים, אבל גודל הקבצים יגדל בכל מקרה. הגבלת הרזולוציה המקסימלית של התמונות שיפרה את גודל התמונות בלי לפגוע בחוויית המשתמש. הגבלנו את התצוגה של תמונת ה-Hero לגרסה כפולה לכל היותר, שהיא קטנה בכ-35% מהגרסה המשולשת וכ-50% מהגרסה המרובעת.

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

<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">

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

הפחתת שינויי הפריסה

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

כדי לפתור את הבעיות האלה, אנחנו מגדירים מידות מדויקות לרכיבים האלה כשהדבר אפשרי, או ערכים משוערים עם min-height. יש אפשרויות נוספות, כמו שימוש בנכס ה-CSS aspect-ratio. יצרנו גם רכיבי placeholder כדי למנוע מרכיבים שעבר עליהם עיבוד דינמי לגרום לשינויים בפריסה.

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

השקה הדרגתית של שינויים

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

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

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

תוצאות

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

מדד מעבדה לפני אחרי הפרש
Largest Contentful Paint (LCP) 2.41 שניות 1.48 שניות ‎-39%
הזמן עד לפעילות מלאה (TTI) 12.16 שניות 7.48 שניות ‎-39%
זמן החסימה הכולל (TBT) 1,124 אלפיות שנייה 1,056 אלפיות שנייה ‎-4%
Cumulative Layout Shift (CLS) 0.0402 0.0093 ‎-77%
תוצאות של מדדי מעבדה שנאספו באמצעות SpeedCurve.

רצינו גם לבדוק את ההשפעה על המשתמשים האמיתיים שלנו. בעזרת נתוני שדה שנאספו באמצעות מעקב אחר אתרים של Instana, בדקנו את התקופה של חודש אחד לפני ההשקה ואת התקופה של חודש אחד אחרי ההשקה. בהשוואה למאון ה-75 של משתמשים בנייד, גילינו שהמדד LCP ירד ב-26% והמדד FID ירד ב-72%.

תרשים קו עם ערכי LCP שמשווים בין הגרסה החדשה לבין הגרסה הקודמת במהלך החודש הנוכחי והחודש הקודם. העקומה של הגרסה החדשה משתנה בין 2 ל-4 שניות, ונמצאת מתחת לעקומה של הגרסה הקודמת רוב הזמן.
תרשים קו עם ערכי FID שמשווים בין הגרסה החדשה לבין הגרסה הקודמת במהלך החודש הנוכחי והחודש הקודם. העקומה של הגרסה החדשה נשארת מתחת ל-100ms רוב הזמן, ואילו בעקומה של הגרסה הקודמת יש כמה פסגות שעוברות את 250ms.
תוצאות של מדדי שדה שנאספו באמצעות Instana.

מדדי מהירות דף כוללים דוח של נתוני שדה מ-28 הימים האחרונים. רק בדף של הקונדומיניום שהכי נצפה היו מספיק נתונים כדי ליצור דוח למשתמשים בנייד. נכון לנובמבר 2021, כל המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) נמצאים בקטגוריה 'טוב'.

צילום מסך של הדוח PageSpeed Insights, שמתמקד בקטע &#39;נתוני שדות&#39;. כל המדדים של Core Web Vitals (FCP,‏ FID,‏ LCP ו-CLS) נמצאים בקטגוריה &#39;טוב&#39;.
כלי PageSpeed Insights מראה שלמשתמשים בנייד יש חוויה טובה בדף של הקונדו שהכי נצפה.

במהלך ההשקה ההדרגתית, שמנו לב לירידה בשיעורי העזיבה. עד שסיימנו את ההשקה בכל הדפים, Google Analytics הראה ירידה של 46% בשיעור העזיבה, עלייה של 87% במספר הדפים בכל סשן ועלייה של 49% במשך הסשן הממוצע. הירידה בשיעור העזיבה הייתה גדולה עוד יותר בחיפושים בתשלום, והגיעה ל-59% – סימן חיובי לגבי ההשקעות במודעות תשלום לפי קליק (PPC).

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

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

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

סיכום

הפרויקט הזה הוא החלק הראשון של מאמץ ארוך טווח להעברה מ-React ללא מסגרת ל-Next.js. הצוותים שעבדו על דף הבניין המשותף מאז העבירו משוב חיובי על חוויית המפתח המשופרת. צוותים אחרים שנאלצו להתחיל מאפס עם אפליקציות אינטרנט חדשות כבר עשו זאת באמצעות Next.js. אנחנו מאמינים ש-Next.js יפשט את מאמצי התחזוקה ויאפשר לכם למצוא נקודות משותפות בין אפליקציות שונות.

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

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