چگونه Swappie با تمرکز بر Core Web Vitals درآمد موبایل را تا 42 درصد افزایش داد

یافتن ارتباط بین عملکرد سایت و معیارهای کسب و کار، کلید موفقیت تلاش های بهینه سازی آنها بود.

Lina Hansson

Swappie یک استارت آپ موفق است که تلفن های بازسازی شده را می فروشد. برای چند سال آنها افزودن ویژگی‌های جدید را به عملکرد سایت ترجیح دادند، اما وقتی متوجه شدند که نتایج تجاری در سایت تلفن همراه از نسخه دسک‌تاپ عقب مانده است، تغییری رخ داد. آنها روی بهینه سازی عملکرد متمرکز شدند و به زودی شاهد افزایش درآمد تلفن همراه بودند.

برجسته کردن فرصت

نرخ تبدیل نسبی موبایل (Rel mCvR) با تقسیم نرخ تبدیل موبایل بر نرخ تبدیل دسکتاپ محاسبه می شود. فرصت های زیادی برای ردیابی معیارهای سرعت وجود دارد، اما اتصال آنها به معیارهای تجاری می تواند بسیار مشکل باشد. از آنجایی که کمپین‌ها و فصلی‌های یکسان به موبایل و دسکتاپ می‌رسند، معیار Rel mCvR تأثیر این پارامترهای خارجی را از بین می‌برد و فقط نشان می‌دهد که آیا سایت تلفن همراه در حال بهبود است یا خیر.

میانگین برای ده سایت بزرگ تجارت الکترونیک در ایالات متحده یک Rel mCvR 50٪ است ، اما Swappie در 24٪ بود. این نشان می‌دهد که سایت موبایل دارای چالش‌هایی است و این شرکت درآمد خود را از دست می‌دهد، که منجر به راه‌اندازی پروژه بهبود عملکرد شد.

اندازه گیری تاثیر بهبود عملکرد

Swappie از Google Analytics برای تنظیم ردیابی روزانه Rel mCvR و میانگین زمان بارگذاری صفحه موبایل با استفاده از این صفحه گسترده الگو استفاده کرد. ( دستورالعمل‌های نحوه استفاده از صفحه‌گسترده را بخوانید.) آنها همچنین شروع به ردیابی Core Web Vitals از طریق Google Analytics و BigQuery کردند. با ردیابی، توسعه دهندگان شروع به کار بر روی عملکرد سایت کردند.

تنها پس از سه ماه کار، تأثیر واضح بود - Rel mCvR از 24٪ به 34٪ رسید و درآمد تلفن همراه 42٪ افزایش یافت!

بهینه سازی ها

بهینه سازی برای LCP و CLS

تیم توسعه Swappie متوجه شد که فضای زیادی برای بهبود موارد کوچک وجود دارد که برای مدت طولانی نادیده گرفته می شدند. مطالعه سایت در نماهای مختلف و به زبان های مختلف، مشکلات LCP و CLS را برجسته کرد که به راحتی قابل حل بودند و تأثیر زیادی بر عملکرد کلی داشتند. به عنوان مثال، رندر کردن عنصر LCP در سرور به جای مشتری در صورت امکان منجر به کاهش LCP می شود.

تشخیص تغییرات چیدمان چالش برانگیز بود، زیرا ممکن است بر اساس نمای و اتصال بسیار متفاوت باشند. پس از دریافت Core Web Vitals از کاربران به تجزیه و تحلیل آنها ، آنها می دانستند که در مسیر درستی هستند زیرا CLS کاهش یافته است.

تصاویر

تصاویر با پیش بارگذاری، بارگذاری تنبل و اندازه مناسب بهینه شدند. آنها تصاویر اصلی (به عنوان مثال LCP) را از قبل بارگذاری می کنند، در حالی که فقط در صورت نیاز، تصاویر را خارج از نما بارگیری می کنند.

فونت ها

فونت‌های بهینه‌شده را با تعویض ارائه‌دهندگان عوض کنید. این تأثیر زیادی داشت زیرا آنها به روشی بهینه برای مدیریت حروف چاپی مورد نیاز زبان های مختلف نیاز داشتند.

اسکریپت های شخص ثالث

Swappie تلاش زیادی برای بررسی هر اسکریپت و ویجت شخص ثالث، جایی که از آن استفاده می شد و عملکردهایی که ارائه می کرد، انجام داد. پس از بحث و گفتگو با همه ذینفعان، آنها برنامه‌ریزی کردند تا تأثیر اسکریپت‌ها بر سایت را کاهش دهند و در عین حال عملکردها را حفظ کنند. آنها موارد غیرضروری را حذف کردند و بقیه را بهینه کردند و به میزان قابل توجهی مقدار جاوا اسکریپت شخص ثالث را در سایت کاهش دادند.

حذف کدهای استفاده نشده و بهینه سازی بسته بندی

بهینه سازی واردات و حذف JS و CSS استفاده نشده به بهبود عملکرد سایت Swappie کمک کرد، با این حال این پیشرفت های کوچک در طول زمان اضافه می شوند. آنها همچنین تنظیمات بسته بندی خود را بهینه کردند.

ایجاد فرهنگ عملکرد در Swappie

نتیجه ای که Swappie به دست آورد نه تنها از تغییرات در کد، بلکه از تغییرات در سازمان و اولویت های آن نیز ناشی می شود.

رهبر مهندسی، Teemu Huovinen، توضیح می دهد:

شما باید سرعت سایت را به معیارهای تجاری مرتبط کنید تا واقعا اهمیت آن را برجسته کنید. همه چیز به اولویت بندی زمانی برمی گردد که زمان و منابع کم دارید، که همیشه همینطور است. اولویت‌بندی ارزش مشتری راهی است که می‌توانید انجام دهید، اما اگر سرعت سایت را تنها به معنای بهبود «احساس» سایت بدانید، تمرکز بر ویژگی‌های جدید و بهبود مستقیم‌تر تبدیل بسیار آسان است. پیوند دادن سرعت سایت به معیارهای تجاری همیشه آسان نیست و اینجاست که محاسبه با Rel mCvR کمک زیادی به ما کرد.

تیمو هووینن

هنگامی که به تیم توسعه دهندگان این فرصت داده شد تا به مدت یک ربع به طور کامل روی سرعت سایت تمرکز کنند، انگیزه بیشتری برای غواصی عمیق تر پیدا کردند.

ترکیب تأثیر ما با رشد تیم ما چیزی است که آن را حتی بیشتر چشمگیر می کند. چهار نفر از هفت توسعه‌دهنده ما در یک ماه زمانی که کار روی عملکرد را شروع کردیم، شروع به کار کردند. با احترام به تیم، این واقعاً شگفت‌انگیز است که چگونه توانستیم در اطراف این موضوع جمع شویم و تأثیر زیادی داشته باشیم.

تیمو هووینن

Teemu همچنین به اهمیت صرف زمان در ابتدا برای ایجاد برنامه‌های مبتنی بر داده، یادگیری نحوه استفاده از برگه DevTools Performance و تنظیم تجزیه و تحلیل کاربر قبل از انجام هر گونه بهبود اشاره می‌کند. نمودارها (مخصوصاً آنهایی که در جهت درست هستند) منبع عالی بازخورد و اعتبار برای کار شما هستند! نگاهی به Core Web Vitals در این زمینه در کنار امتیازات Lighthouse (مبتنی بر آزمایشگاه) به آن‌ها کمک کرد تا روی بهینه‌سازی چیزهای مناسبی تمرکز کنند که بیشتر افراد را تحت تأثیر قرار می‌دهد.