چگونه تمرکز بر عملکرد وب، نرخ کلیک توکوپدیا را تا 35 درصد بهبود بخشید.

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

توکوپدیا یکی از بزرگترین شرکت های تجارت الکترونیک در اندونزی است. با بیش از 2.7 میلیون شبکه تجاری در سراسر کشور، 18 میلیون لیست محصول و 50 میلیون بازدید کننده ماهانه، تیم وب می دانست که سرمایه گذاری در عملکرد وب ضروری است. با ایجاد فرهنگ عملکرد اول، آنها به افزایش 35 درصدی در نرخ کلیک (CTR) و افزایش 8 درصدی در تبدیل (CVR) دست یافتند.

35 درصد

افزایش CTR

8 درصد

افزایش CVR

4 ثانیه

بهبود در TTI

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

تیم وب با تیم رهبری خود در مورد اهمیت سرمایه گذاری در عملکرد وب برای بهبود تجربه و تعامل کاربر صحبت کرد و همچنین تأثیر عملکرد را با استفاده از الگوها و APIهای پیشرفته نشان داد.

رویکردی که استفاده کردند

جاوا اسکریپت و بهینه سازی منابع

مسدود کردن رندر یا جاوا اسکریپت طولانی مدت یکی از دلایل رایج مشکلات عملکرد است. این تیم چندین گام برای به حداقل رساندن آن انجام داد:

  • یک کتابخانه کنترل‌کننده اسکریپت برای بارگیری انتخابی اسکریپت‌های شخص ثالث برای بهینه‌سازی مسیر رندر حیاتی ایجاد کرد.
  • کتابخانه‌های سنگین‌تر را با کتابخانه‌های سبک‌تر جایگزین کرد.
  • پیاده‌سازی کد و بهینه‌سازی برای محتوای بالای صفحه.
  • بارگذاری تطبیقی ​​پیاده‌سازی شده، به عنوان مثال فقط بارگذاری تصاویر با کیفیت بالا برای دستگاه‌های روی شبکه‌های سریع و استفاده از تصاویر با کیفیت پایین‌تر برای دستگاه‌های روی شبکه‌های کند.
  • تصاویر با تنبلی بارگذاری شده در پایین صفحه.
  • بارگیری جاوا اسکریپت غیر بحرانی به تعویق افتاد.
کتابخانه کنترل اسکریپت TTI را 4 ثانیه بهبود بخشید

بهینه سازی صفحه اصلی

این تیم از Svelte برای ایجاد یک نسخه ساده از صفحه اصلی برای بازدیدکنندگانی که برای اولین بار بازدید می‌کنند، استفاده کرد و تجربه وب‌سایتی سریع را تضمین کرد. این نسخه همچنین از یک سرویس دهنده برای کش کردن دارایی های غیر لایت در پس زمینه استفاده می کند.

حجم برنامه جاوا اسکریپت را تا 88 درصد کاهش داد (از 320 کیلوبایت به 37 کیلوبایت). امتیاز فانوس دریایی با 90 امتیاز افزایش یافته است. FCP کمتر از 1 ثانیه به دست آمد. 35 درصد افزایش CTR 8 درصد افزایش CVR

بودجه ریزی و نظارت بر عملکرد

این تیم یک داشبورد نظارت بر عملکرد با استفاده از Lighthouse و ابزارهای دیگر برای بهبود کیفیت صفحات وب ایجاد کرد:

  • کیفیت شبکه، نظارت بر زیرساخت، عملکرد فرانت اند و عملکرد سرور را اندازه گیری می کند.
  • از ترکیبی از APIهای پلتفرم وب (مانند Resource Timing API و هدر Server-Timing )، API PageSpeed ​​Insights (PSI) و داده‌های گزارش تجربه کاربر Chrome برای نظارت بر معیارهای میدانی و آزمایشگاهی استفاده می‌کند.
  • تصاویر را از Lighthouse تجزیه و تحلیل می کند تا به شناسایی فرصت های بهینه سازی تصویر کمک کند.
  • در طول یکپارچه سازی مداوم (CI) یک بودجه به اندازه بسته را اعمال می کند. اگر اندازه بسته بیش از بودجه باشد، اجرای CI با شکست مواجه می‌شود.
2.2 ثانیه امتیاز TTI در صفحه اصلی (امتیاز Lighthouse: 88). امتیاز TTI 1.9 ثانیه در صفحات محصول (امتیاز Lighthouse: 86).

به عنوان یک کسب و کار تجارت الکترونیک، جذب کاربر در قلب موفقیت ما قرار دارد. ما اهمیت وب را تصدیق می‌کنیم و بنابراین مشتاق سرمایه‌گذاری روی همه ابزارها و ویژگی‌هایی هستیم که بهترین تجربه کاربری را به کاربرانمان می‌دهد.

دندی سوناردی، مدیر مهندسی، بستر وب، توکوپدیا

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