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

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

Daniela Sayuri Yassuda

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

אתגרים

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

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

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

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

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

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

גישה

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

מעבר אל Next.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תוצאות

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

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

PageSpeed Insights מספק דוח נתונים מהשדות ל-28 הימים האחרונים. לדף הדירות עם הגישה הגבוהה ביותר לבדו היו מספיק נתונים כדי להפיק דוח למשתמשים בנייד. החל מנובמבר 2021, כל מדדי הליבה לבדיקת חוויית המשתמש באתר נמצאים בקטגוריה 'טוב'.

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

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

סיכום

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

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

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