پروژه ای که بر روی بهینه سازی Core Web Vitals و مهاجرت به Next.js متمرکز شده بود، منجر به افزایش 5 درصدی نرخ تبدیل و افزایش 87 درصدی در صفحات در هر جلسه شد.
QuintoAndar یک شرکت پروتکل برزیلی است که محصولات آن راه‌حل‌های نهایی دیجیتالی را برای املاک و مستغلات ارائه می‌دهند. امسال، پروژه‌ای را با تمرکز بر بهبود عملکرد یک مرکز محتوا در برنامه خود انجام دادیم و نتایج دلگرم‌کننده‌ای در افزایش ترافیک کاربر و معیارهای تبدیل داشتیم.
46 درصد
کاهش نرخ پرش
87 %
افزایش صفحات در هر جلسه
5 درصد
بهبود در تبدیل در مرحله اعتبار سنجی
چالش ها
برنامه ما دارای یک مرکز محتوای آپارتمان با بیش از 40000 صفحه است که در آن کاربران می توانند اطلاعاتی در مورد املاک خود دریافت کنند، عکس های مناطق مشترک را بررسی کنند، در مورد محله مطالعه کنند و لیست های موجود برای اجاره یا فروش را پیدا کنند. این صفحات برای QuintoAndar بسیار مهم هستند:
- آنها منبع مهمی از ترافیک ارگانیک هستند، با تعداد کاربرانی که از نتایج موتورهای جستجو به طور پیوسته در حال افزایش هستند.
- آنها در میان مدت و بلندمدت نسبت به سایر صفحات نرخ تبدیل بالایی دارند.
با این حال، در مورد عملکرد و تجربه کاربری در این صفحات چالش هایی وجود داشت:
- عملکرد آنها همانطور که توسط Core Web Vitals اندازه‌گیری شد بهینه‌سازی نشد و مشکلات شناخته شده‌ای در مورد بارگذاری کند صفحه، پاسخ‌دهی کند به ورودی کاربر و بی‌ثباتی طرح‌بندی وجود داشت.
- نرخ پرش آنها بالا بود، حتی اگر ما انتظار داشتیم که آنها بالاتر از سایر بخش های برنامه باشند.
- به‌روزرسانی تجربه صفحه در جستجوی Google - که در آن زمان هنوز منتشر نشده بود - شامل Core Web Vitals در الگوریتم رتبه‌بندی می‌شود، به این معنی که عملکرد صفحه می‌تواند بر نحوه نمایش نتایج جستجو تأثیر بگذارد.
در همان زمان، ما برخی از فرصت‌های تجربه توسعه‌دهنده را شناسایی کردیم که می‌توانند دستاوردهای پروژه‌های دیگر در سراسر شرکت را باز کنند:
- منطق رندر سمت سرور ما - که تمام صفحات پربازدید، از جمله صفحات کاندومینیوم را رندر می‌کند - در داخل ایجاد شد و برای نگهداری و استفاده از استخدام‌های جدید بسیار پیچیده شد.
- ویژگی‌های ضروری برای دستیابی به عملکرد خوب برنامه، مانند تقسیم کد ، همچنین به تنظیم سفارشی به همراه کار دستی از سوی توسعه‌دهندگان نیاز دارد.
- QuintoAndar دارای بیش از 30 برنامه وب React است. ارائه به روز رسانی به این برنامه ها و حفظ آنها مطابق با بهترین شیوه ها یک کار دشوار است.
رویکرد
ما یک پروژه بهینه‌سازی عملکرد مرکز محتوای مجتمع مسکونی را آغاز کردیم تا تجربه کاربری آن را بهبود بخشیم، زیرا این پیشرفت‌ها می‌تواند منجر به سود تبدیل، SEO بهتر و قابلیت استفاده بهتر شود. این ابتکار همچنین فرصت مناسبی برای بهبود تجربه توسعه دهندگان بود.
در حال مهاجرت به Next.js
نسخه جدید صفحه کاندومینیوم با Next.js پیاده سازی شد. از آنجایی که تا حد زیادی از سایر بخش‌های برنامه مستقل است، مرکز محتوای مجتمع کاندیدای خوبی برای آزمایش یک چارچوب جدید به نظر می‌رسد. ما می‌توانیم بزرگی تلاش‌های مهاجرت را درک کنیم و ارزیابی کنیم که چگونه ویژگی‌های آن می‌تواند بدون تأثیرگذاری بر سایر برنامه‌های React در QuintoAndar کمک کند.
یک الزام سخت این بود که اطمینان حاصل شود که صفحات قابل خزیدن توسط موتورهای جستجو هستند. Next.js با پشتیبانی از رندر خارج از جعبه سمت سرور این نیاز را برآورده می کند و نیاز به تنظیم سفارشی را از بین می برد. این اسناد اشتراک دانش در مورد نحوه انجام وظایفی مانند واکشی داده ها در سرور و توسعه دهندگان جدید را بسیار آسان تر می کند. رندر سمت سرور همچنین برای بهبود معیارهای عملکرد مانند First Contentful Paint (FCP) شناخته شده است.
این چارچوب ویژگی‌های سازگار با عملکرد دیگری مانند تقسیم خودکار کد و واکشی اولیه را ارائه می‌کند. اگرچه ساختار موجود قبلاً چنین ویژگی‌هایی را ارائه می‌کرد، کار اضافی مورد نیاز توسعه‌دهندگان، پذیرش آنها را متوقف کرد. به عنوان مثال، تقسیم کد در سطح صفحه یا جزء باید به صورت دستی انجام شود.
بهینه سازی منابع جاوا اسکریپت
اولین قدم حذف کدهای استفاده نشده بود. ما به گزارش‌های Webpack Bundle Analyzer نگاه کردیم که محتویات هر بسته JS را نشان می‌دهد و همه اسکریپت‌های شخص ثالث را به دقت بررسی کردیم. در نتیجه، ما توانستیم برخی از کتابخانه های ردیابی را که در این صفحه خاص استفاده نشده بودند، پاکسازی کنیم.
تیم ما فراتر رفت و هزینه عملکرد ویژگی های موجود را ارزیابی کرد. به عنوان مثال، دکمه "like" برای کار کردن به JS بسیار زیادی نیاز دارد. با این حال، در صفحه کاندومینیوم، کمتر از 0.5 درصد از کاربران با دکمه تعامل داشتند که در سایر بخش‌های برنامه ما در دسترس است و بیشتر استفاده می‌شود. پس از بحثی که شامل مهندسی و محصول بود، تصمیم گرفتیم این ویژگی را حذف کنیم.
دیگر بهینه‌سازی‌های JS قبلاً وجود داشت، مانند فشرده‌سازی استاتیک با Brotli ، که در زمان ساخت با استفاده از BrotliWebpackPlugin انجام شد، و همچنین برای انواع دیگر منابع استاتیک اعمال شد. در ابتدا، ما به فشرده سازی ارائه شده توسط CDN متکی بودیم و Brotli اندازه JS را 18٪ در مقایسه با gzip کاهش داد. اما پس از آن، ما در زمان ساخت به فشرده سازی Brotli روی آوردیم و توانستیم به کاهش 24 درصدی دست پیدا کنیم.
بهینه سازی منابع تصویر
یک تصویر قهرمان بیشتر قسمت بالای تاشو در نسخه موبایل وجود دارد. همچنین اتفاقاً بزرگترین رنگ محتوایی (LCP) صفحه است.
قبلاً، همه تصاویر دارای ویژگی‌های srcset و sizes برای ارائه تصاویر واکنش‌گرا بودند. ما همچنین از Thumbor برای تغییر اندازه تصاویر بر حسب درخواست استفاده کردیم و CDN خود را برای ذخیره سازی موثر آنها پیکربندی کردیم.
دستگاه های تلفن همراه مدرن دارای نمایشگرهایی با تراکم پیکسلی بسیار بالا هستند، به این معنی که مرورگر در صورت وجود، نسخه های 3x یا 4x تصویر را ارائه می کند. با افزایش وضوح، درک تفاوت‌ها برای چشم انسان سخت‌تر می‌شود، اما اندازه فایل بدون توجه به افزایش می‌یابد. محدود کردن حداکثر وضوح تصویر ، اندازه تصویر را بدون به خطر انداختن تجربه کاربر بهبود می بخشد. ما تصویر قهرمان را محدود کردیم تا حداکثر نسخه 2x خود را ارائه دهد، که تقریباً 35٪ کوچکتر از نسخه 3x و 50٪ کوچکتر از نسخه 4x است.
برای پایان، ما از یک استراتژی پیش بارگیری برای دانلود و نمایش آن در اسرع وقت استفاده کردیم و مشتاقانه منتظر بهبود معیار LCP هستیم.
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
مولفه تصویر داخلی Next.js شامل بسیاری از این بهینه سازی ها مانند تغییر اندازه پاسخگو و بارگذاری اولویت بندی شده است. در طول این پروژه، ما تصاویر موجود را برای استفاده از این کامپوننت مهاجرت نکردیم، اما در حال برنامه ریزی برای استفاده از آن در ویژگی های جدید هستیم.
کاهش تغییر چیدمان
صفحه کاندومینیوم چند مشکل با تغییر چیدمان تجمعی (CLS) داشت. عناصر مسئول تغییرات طرح‌بندی فقط در کلاینت ارائه می‌شوند - برای مثال، نشانه‌گذاری سمت سرور آبرسانی با اجزای رندر شده توسط مشتری، یا تصاویر بدون ویژگی‌های width و height تعریف‌شده.
برای حل این مشکلات، ابعاد دقیق این عناصر را در صورت امکان تعیین می کنیم یا مقادیر را با min-height تخمین می زنیم. گزینه های بیشتری وجود دارد، مانند استفاده از ویژگی CSS aspect-ratio . همچنین برای جلوگیری از ایجاد تغییرات طرح‌بندی، مؤلفه‌های رندر شده پویا ایجاد کردیم.
به‌تدریج تغییرات ایجاد می‌شود
تیم ما می‌خواست نسخه بهینه‌شده صفحه مرکز مشترک را تأیید کند تا مطمئن شود تجربه کاربر بهتر خواهد بود. برای دستیابی به این هدف، ما یک استراتژی رونمایی مترقی را اتخاذ کردیم:
- در مرحله اول، نسخه جدید برای چند URL دست‌چین شده منتشر شد، بنابراین تنها چند صد کاربر در روز آنها را مشاهده می‌کردند.
- در مرحله دوم برای صفحات بیشتر منتشر شد و روزانه چند هزار کاربر را به خود اختصاص داد.
- در مرحله سوم و آخر برای همه صفحات منتشر شد و رول اوت برای همه کاربران به پایان رسید.
در این دوره، تیم مهندسی به طور مداوم عملکرد صفحه را در تولید اندازه‌گیری می‌کرد و به کار بر روی بهبود ادامه می‌داد. علاوه بر این، تیم معیارهای تجاری را بین نسخه جدید و قبلی مقایسه کرد. نتایج در این دوره اعتبار سنجی امیدوارکننده بود.
نتایج
این تیم از SpeedCurve برای اجرای مداوم آزمایش‌های آزمایشگاهی در صفحه کاندومینیوم استفاده کرد. این نتایج برای نسخه موبایل است:
| متریک آزمایشگاهی | قبل از | بعد از | تفاوت |
|---|---|---|---|
| بزرگترین رنگ محتوایی (LCP) | 2.41 ثانیه | 1.48 ثانیه | -39٪ |
| زمان تعامل (TTI) | 12.16 ثانیه | 7.48 ثانیه | -39٪ |
| زمان انسداد کل (TBT) | 1124 میلی ثانیه | 1056 میلی ثانیه | -4٪ |
| تغییر چیدمان تجمعی (CLS) | 0.0402 | 0.0093 | -77٪ |
ما همچنین می خواستیم تأثیر آن را بر روی کاربران واقعی خود بررسی کنیم. با استفاده از داده‌های میدانی جمع‌آوری‌شده با Instana Website Monitoring ، دوره ۱ ماهه قبل و بعد از عرضه را بررسی کردیم. با مقایسه صدک 75 برای کاربران تلفن همراه، دریافتیم که LCP 26٪ کاهش یافته است و FID 72٪ کاهش یافته است.
PageSpeed Insights گزارش داده های میدانی 28 روز گذشته را ارائه می دهد. پربازدیدترین صفحه کاندومینیوم به تنهایی دارای داده های کافی برای ایجاد گزارش برای کاربران تلفن همراه بود. از نوامبر 2021، تمام Core Web Vitals در سطل "خوب" قرار دارند.
در طول عرضه تدریجی، ما متوجه کاهش نرخ پرش شدیم. زمانی که انتشار همه صفحات را به پایان رساندیم، گوگل آنالیتیکس ۴۶ درصد کاهش در نرخ پرش، ۸۷ درصد افزایش در صفحات در هر جلسه، و ۴۹ درصد افزایش در میانگین مدت جلسه را نشان داد. کاهش نرخ پرش برای جستجوهای پولی حتی بیشتر بود و به افت 59 درصدی رسید - یک علامت مثبت در سرمایه گذاری در تبلیغات پرداخت به ازای کلیک (PPC).
در مورد تأثیر معیارهای کسب‌وکار، ما نرخ‌های تبدیل را برای تراکنش‌هایی مانند برنامه‌ریزی یک تور و درخواست برای اجاره یا خرید یک ملک تجزیه و تحلیل کردیم. در حالی که بهبودها هنوز در حال انجام بود، تیم ما تبدیل را بین نسخه های قبلی و جدید مقایسه کرد. در همان هفته، گروه صفحات دارای نسخه جدید 5 درصد افزایش تبدیل را نشان دادند، در حالی که سایر صفحات در همین متریک کاهش جزئی داشتند.
نتیجه
این پروژه اولین بخش از یک تلاش طولانی مدت مهاجرت از React بدون چارچوب به Next.js است. تیم هایی که از آن زمان بر روی صفحه کاندومینیوم کار می کردند، بازخورد مثبتی در مورد بهبود تجربه توسعه دهندگان ارائه کردند. تیم های دیگری که مجبور بودند برنامه های وب جدید را بوت استرپ کنند، قبلاً این کار را با Next.js انجام داده اند. ما معتقدیم که Next.js تلاش‌های تعمیر و نگهداری را ساده می‌کند و یک زمینه مشترک بین برنامه‌های مختلف ایجاد می‌کند.
به طور کلی، مرکز محتوای آپارتمان به طور مداوم از نظر تعداد مطلق کاربران و تراکنش ها در حال رشد بوده است. در تحلیل بلندمدت، عوامل زیادی در این امر نقش دارند، مانند گسترش عملیات QuintoAndar و ابتکارات سئو مانند بهبود فهرست بندی صفحات. در طول این پروژه، دیدیم که عملکرد صفحه نیز یکی از این عوامل با پتانسیل بالایی برای تأثیر مثبت تبدیل است.
تشکر ویژه از Pedro Carmo ، مدیر محصول تیم SEO، برای فرو رفتن در داده های کاربر و ایجاد تمام تجزیه و تحلیل تبدیل که در این مطالعه موردی مشاهده می شود.