خرید سرعت در eBay.com

بهینه سازی عملکرد سایت ها و برنامه های eBay برای تجربه کاربری سریعتر.

آدی عثمانی
Addy Osmani

Speed ​​در سال 2019 یک ابتکار در سراسر شرکت برای eBay بود و تیم‌های زیادی مصمم بودند که سایت و برنامه‌ها را تا حد امکان سریع برای کاربران بسازند. در واقع، به ازای هر 100 میلی ثانیه بهبود در زمان بارگذاری صفحه جستجو، eBay شاهد افزایش 0.5 درصدی در تعداد «افزودن به سبد خرید» بود.

100 میلی‌ثانیه

بهبود در زمان بارگذاری

0.5 ٪

افزایش تعداد «افزودن به سبد خرید».

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

تلاش بهینه سازی منجر به بهبود 10% در صفحه اصلی، 13% بهبود در صفحه جستجو و 3% بهبود در صفحات آیتم شد.
بهبود سرعت eBay

... و داده‌های گزارش تجربه کاربر Chrome آنها نیز این پیشرفت‌ها را برجسته می‌کند.

اسکرین‌شات‌هایی از نمای PageSpeed ​​Insights از داده‌های گزارش تجربه کاربر Chrome که FCP سریع 70٪ و FID سریع 88٪ برای eBay.com را برجسته می‌کند.
داده‌های گزارش تجربه کاربر Chrome برای First Contentful Paint و First Input Delay برای مبدا eBay.com.

هنوز کار بیشتری در پیش است، اما در اینجا آموخته های eBay تا کنون وجود دارد.

"کاهش" عملکرد وب

بهبودهایی که eBay انجام داد به دلیل کاهش یا کاهش (در اندازه و زمان) موجودیت‌های مختلفی که در سفر کاربر شرکت می‌کنند، ممکن شد. این پست به جای موضوعات خاص eBay، موضوعاتی را پوشش می دهد که به طور کلی به جامعه توسعه دهندگان وب مرتبط است.

کاهش بار در تمام منابع متنی

یکی از راه‌های سریع‌تر کردن سایت‌ها، بارگذاری کد کمتر است. eBay با حذف تمام بایت‌های استفاده نشده و غیرضروری از پاسخ‌های جاوا اسکریپت، CSS، HTML و JSON که به کاربران ارائه می‌شود، بارهای متنی خود را کاهش داد. پیش از این، با هر ویژگی جدید، eBay بار پاسخ های خود را بدون پاک کردن موارد استفاده نشده افزایش می داد. این به مرور زمان اضافه شد و به یک گلوگاه عملکرد تبدیل شد. تیم‌ها معمولاً این فعالیت پاکسازی را به تعویق می‌اندازند، اما از میزان ذخیره eBay شگفت‌زده می‌شوید.

"برش" در اینجا بایت های تلف شده در بار پاسخ است.

بهینه سازی مسیر بحرانی برای محتوای بالاتر

هر پیکسل روی صفحه نمایش به یک اندازه مهم نیست. محتوای بالای صفحه بسیار مهمتر از محتوای پایین است. iOS/Android/Desktop و اپلیکیشن های وب از این موضوع آگاه هستند، اما در مورد خدمات چطور؟ معماری سرویس eBay دارای لایه‌ای به نام خدمات تجربه است که بخش‌های ظاهری (برنامه‌های ویژه پلتفرم و سرورهای وب) با آن صحبت می‌کنند. این لایه به طور خاص طراحی شده است تا مبتنی بر نمایش یا دستگاه باشد، نه بر اساس موجودیت مانند مورد، کاربر یا سفارش. eBay سپس مفهوم مسیر بحرانی را برای خدمات تجربه معرفی کرد. وقتی درخواستی به این سرویس‌ها می‌رسد، آن‌ها با فراخوانی موازی دیگر سرویس‌های بالادستی، بر روی دریافت داده‌های محتوای بالای صفحه کار می‌کنند. پس از آماده شدن داده ها، فوراً پاک می شوند. داده‌های پایین‌تر به صورت تکه‌ای بعدی یا با بارگذاری تنبل ارسال می‌شوند. نتیجه: کاربران می توانند محتوای بالای صفحه را سریعتر ببینند.

"برش" در اینجا زمان صرف شده توسط سرویس ها برای نمایش محتوای مرتبط است.

بهینه سازی تصویر

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

ابتدا، eBay در قالب تصویر WebP برای نتایج جستجو در همه پلتفرم‌ها، از جمله iOS، Android و مرورگرهای پشتیبانی شده استاندارد شد. صفحه نتایج جستجو پر تصویرترین صفحه در eBay است و آنها قبلاً از WebP استفاده می کردند، اما نه در یک الگوی ثابت.

اسکرین شات های پانل شبکه DevTools فیلتر شده برای نمایش درخواست های تصویر WebP از eBay.com
تصاویر WebP در حال ارائه به مرورگرهای پشتیبانی شده در eBay.com.

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

"برش" در اینجا بایت های تصویر تلف شده است که برای کاربران ارسال می شود.

واکشی پیش‌بینی‌کننده دارایی‌های ثابت

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

با واکشی پیش‌بینی‌کننده، وقتی کاربر به صفحه پیش‌بینی‌شده هدایت می‌شود، دارایی‌ها از قبل در حافظه پنهان مرورگر هستند. این کار برای دارایی های CSS و جاوا اسکریپت انجام می شود، جایی که URL ها می توانند زودتر از موعد بازیابی شوند. نکته ای که در اینجا باید به آن توجه کرد این است که فقط در ناوبری های بار اول کمک می کند. در پیمایش های بعدی، دارایی های ثابت از قبل در حافظه پنهان خواهند بود.

eBay در حال انجام واکشی پیش‌بینی‌کننده دارایی‌های ثابت است. Home دارایی‌ها را برای جستجو واکشی می‌کند، Search دارایی‌ها را برای آیتم و غیره واکشی می‌کند. واکشی اولیه مبتنی بر یادگیری ماشینی و تحلیلی در دست بررسی است.

"برش" در اینجا زمان شبکه برای دارایی های ثابت CSS و جاوا اسکریپت در اولین ناوبری است.

واکشی اولیه نتایج جستجو

هنگامی که کاربر در eBay جستجو می کند، داده های تجزیه و تحلیل eBay نشان می دهد که به احتمال زیاد کاربر به یک مورد در 10 نتایج جستجوی برتر پیمایش می کند. بنابراین eBay اکنون موارد را از جستجو واکشی می کند و آنها را برای زمانی که کاربر پیمایش می کند آماده نگه می دارد. واکشی اولیه در دو سطح انجام می شود.

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

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

eBay 5 مورد برتر در صفحات نتایج جستجو را برای بارگیری سریع بعدی واکشی می کند. این در زمان بیکاری با requestIdleCallback() اتفاق می افتد. این منجر به میانگین زمان بالای 759 میلی‌ثانیه سریع‌تر شد، معیاری سفارشی که مشابه First Meaningful Paint است. eBay تأثیر مثبتی بر تبدیل‌های حاصل از واکشی اولیه داشت.

"برش" در اینجا می تواند زمان پردازش سرور یا زمان شبکه باشد، بسته به جایی که مورد در حافظه پنهان است.

دانلود مشتاقانه از تصاویر جستجو

در صفحه نتایج جستجو، وقتی یک پرس و جو در سطح بالایی صادر می شود، دو اتفاق می افتد. یکی مرحله فراخوان/رتبه‌بندی است، جایی که مرتبط‌ترین موارد مطابق با پرس و جو برگردانده می‌شوند. مرحله دوم، افزودن اقلام فراخوان شده با اطلاعات اضافی مرتبط با زمینه کاربر مانند هزینه های حمل و نقل است. اکنون eBay بلافاصله 10 تصویر اول را به همراه هدر به مرورگر می فرستد، بنابراین دانلودها می توانند قبل از رسیدن بقیه نشانه گذاری شروع شوند. در نتیجه، اکنون تصاویر سریعتر ظاهر می شوند. این تغییر در سطح جهانی برای پلتفرم وب منتشر شده است.

"برش" در اینجا زمان شروع دانلود برای تصاویر نتایج جستجو است.

ذخیره سازی لبه برای داده های پیشنهاد خودکار

هنگامی که کاربران حروف را در کادر جستجو تایپ می کنند، پیشنهادات ظاهر می شوند. این پیشنهادات برای ترکیب حروف حداقل برای یک روز تغییر نمی کند. آنها کاندیدای ایده‌آلی برای ذخیره‌سازی و سرویس دهی از CDN (حداکثر 24 ساعت) هستند، به جای اینکه درخواست‌ها به مرکز داده ارسال شوند. بازارهای بین المللی به ویژه از ذخیره CDN سود می برند.

تصویری از کادر جستجوی eBay که پیشنهادهای تکمیل خودکار برای یک عبارت جستجو را نمایش می دهد.

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

«برش» در اینجا تأخیر شبکه و زمان پردازش سرور برای پیشنهادات خودکار است.

کش لبه برای کاربران ناشناس صفحه اصلی

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

eBay تصمیم گرفت محتوای ناشناخته کاربر (HTML) را در شبکه لبه خود ( PoPs ) برای مدت کوتاهی ذخیره کند. کاربرانی که برای اولین بار استفاده می‌کنند، اکنون می‌توانند محتوای صفحه اصلی را که به‌جای یک مرکز داده دور، از سروری در نزدیکی آنها ارائه می‌شود، دریافت کنند. eBay هنوز در حال آزمایش این موضوع در بازارهای بین المللی است، جایی که تأثیر بیشتری خواهد داشت.

"برش" در اینجا دوباره هم تاخیر شبکه و هم زمان پردازش سرور برای کاربران ناشناس است.

بهینه سازی برای پلتفرم های دیگر

بهبود تجزیه برنامه iOS/Android

برنامه‌های iOS/Android با سرویس‌های باطنی که فرمت پاسخ آنها معمولاً JSON است صحبت می‌کنند. این محموله های JSON می توانند بزرگ باشند. به جای تجزیه کل JSON برای رندر کردن چیزی روی صفحه، eBay یک الگوریتم تجزیه کارآمد را معرفی کرد که محتوایی را که باید فوراً نمایش داده شود بهینه می‌کند.

اکنون کاربران می توانند محتوا را سریعتر ببینند. علاوه بر این، برای برنامه اندروید، eBay به محض اینکه کاربر شروع به تایپ کردن در کادر جستجو کرد (iOS قبلاً این بهینه‌سازی را داشت، eBay شروع به تنظیم اولیه کنترل‌کننده‌های نمای جستجو می‌کند). قبلاً این اتفاق فقط پس از فشار دادن دکمه جستجو توسط کاربران رخ می داد. اکنون کاربران می توانند سریعتر به نتایج جستجوی خود برسند. "برش" در اینجا زمان صرف شده توسط دستگاه ها برای نمایش محتوای مرتبط است.

بهبود زمان راه اندازی برنامه اندروید

این برای بهینه‌سازی زمان شروع سرد برای برنامه‌های Android اعمال می‌شود. هنگامی که یک برنامه سرد شروع می شود، مقدار زیادی مقداردهی اولیه هم در سطح سیستم عامل و هم در سطح برنامه اتفاق می افتد. کاهش زمان اولیه سازی در سطح برنامه به کاربران کمک می کند تا صفحه اصلی را سریعتر ببینند. eBay برخی از پروفایل‌ها را انجام داد و متوجه شد که همه تنظیمات اولیه برای نمایش محتوا لازم نیست و برخی از آنها را می‌توان با تنبلی انجام داد.

مهمتر از آن، eBay مشاهده کرد که یک تماس تحلیلی شخص ثالث مسدود شده بود که رندر روی صفحه را به تاخیر انداخت. حذف تماس مسدود شده و ناهمگام کردن آن به زمان شروع سرد کمک کرد. "برش" در اینجا زمان راه اندازی غیر ضروری برای برنامه های اندروید است.

نتیجه گیری

تمام عملکردهایی که eBay انجام داد به حرکت درآوردن سوزن کمک کردند و این در یک دوره زمانی اتفاق افتاد. این نسخه ها در طول سال به مرحله اجرا درآمدند و هر نسخه ده ها میلی ثانیه کاهش یافت و در نهایت به نقطه ای رسید که eBay اکنون در آن قرار دارد:

اسکرین‌شات‌هایی از گزارش Chrome UX که بهبود داده‌های میدانی را برای eBay.com نشان می‌دهد.
تأثیر تلاش‌های سرعت eBay بر معیارهای میدانی آنها در طول زمان، همانطور که توسط داشبورد گزارش Chrome UX نشان داده شده است.

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

سرعت هزار کاهش را بررسی کنید تا بیشتر بدانید و منتظر مقالات دقیق تر مهندسین eBay در مورد عملکرد آنها در آینده نزدیک باشید.

،

بهینه سازی عملکرد سایت ها و برنامه های eBay برای تجربه کاربری سریعتر.

آدی عثمانی
Addy Osmani

Speed ​​در سال 2019 یک ابتکار در سراسر شرکت برای eBay بود و تیم‌های زیادی مصمم بودند که سایت و برنامه‌ها را تا حد امکان سریع برای کاربران بسازند. در واقع، به ازای هر 100 میلی ثانیه بهبود در زمان بارگذاری صفحه جستجو، eBay شاهد افزایش 0.5 درصدی در تعداد «افزودن به سبد خرید» بود.

100 میلی‌ثانیه

بهبود در زمان بارگذاری

0.5 ٪

افزایش تعداد «افزودن به سبد خرید».

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

تلاش بهینه سازی منجر به بهبود 10% در صفحه اصلی، 13% بهبود در صفحه جستجو و 3% بهبود در صفحات آیتم شد.
بهبود سرعت eBay

... و داده‌های گزارش تجربه کاربر Chrome آنها نیز این پیشرفت‌ها را برجسته می‌کند.

اسکرین‌شات‌هایی از نمای PageSpeed ​​Insights از داده‌های گزارش تجربه کاربر Chrome که FCP سریع 70٪ و FID سریع 88٪ برای eBay.com را برجسته می‌کند.
داده‌های گزارش تجربه کاربر Chrome برای First Contentful Paint و First Input Delay برای مبدا eBay.com.

هنوز کار بیشتری در پیش است، اما در اینجا آموخته های eBay تا کنون وجود دارد.

"کاهش" عملکرد وب

بهبودهایی که eBay انجام داد به دلیل کاهش یا کاهش (در اندازه و زمان) موجودیت‌های مختلفی که در سفر کاربر شرکت می‌کنند، ممکن شد. این پست به جای موضوعات خاص eBay، موضوعاتی را پوشش می دهد که به طور کلی به جامعه توسعه دهندگان وب مرتبط است.

کاهش بار در تمام منابع متنی

یکی از راه‌های سریع‌تر کردن سایت‌ها، بارگذاری کد کمتر است. eBay با حذف تمام بایت‌های استفاده نشده و غیرضروری از پاسخ‌های جاوا اسکریپت، CSS، HTML و JSON که به کاربران ارائه می‌شود، بارهای متنی خود را کاهش داد. پیش از این، با هر ویژگی جدید، eBay بار پاسخ های خود را بدون پاک کردن موارد استفاده نشده افزایش می داد. این به مرور زمان اضافه شد و به یک گلوگاه عملکرد تبدیل شد. تیم‌ها معمولاً این فعالیت پاکسازی را به تعویق می‌اندازند، اما از میزان ذخیره eBay شگفت‌زده می‌شوید.

"برش" در اینجا بایت های تلف شده در بار پاسخ است.

بهینه سازی مسیر بحرانی برای محتوای بالاتر

هر پیکسل روی صفحه نمایش به یک اندازه مهم نیست. محتوای بالای صفحه بسیار مهمتر از محتوای پایین است. iOS/Android/Desktop و اپلیکیشن های وب از این موضوع آگاه هستند، اما در مورد خدمات چطور؟ معماری سرویس eBay دارای لایه‌ای به نام خدمات تجربه است که بخش‌های ظاهری (برنامه‌های ویژه پلتفرم و سرورهای وب) با آن صحبت می‌کنند. این لایه به طور خاص طراحی شده است تا مبتنی بر نمایش یا دستگاه باشد، نه بر اساس موجودیت مانند مورد، کاربر یا سفارش. eBay سپس مفهوم مسیر بحرانی را برای خدمات تجربه معرفی کرد. وقتی درخواستی به این سرویس‌ها می‌رسد، آن‌ها با فراخوانی موازی دیگر سرویس‌های بالادستی، بر روی دریافت داده‌های محتوای بالای صفحه کار می‌کنند. پس از آماده شدن داده ها، فوراً پاک می شوند. داده‌های پایین‌تر به صورت تکه‌ای بعدی یا با بارگذاری تنبل ارسال می‌شوند. نتیجه: کاربران می توانند محتوای بالای صفحه را سریعتر ببینند.

"برش" در اینجا زمان صرف شده توسط سرویس ها برای نمایش محتوای مرتبط است.

بهینه سازی تصویر

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

ابتدا، eBay در قالب تصویر WebP برای نتایج جستجو در همه پلتفرم‌ها، از جمله iOS، Android و مرورگرهای پشتیبانی شده استاندارد شد. صفحه نتایج جستجو پر تصویرترین صفحه در eBay است و آنها قبلاً از WebP استفاده می کردند، اما نه در یک الگوی ثابت.

اسکرین شات های پانل شبکه DevTools فیلتر شده برای نمایش درخواست های تصویر WebP از eBay.com
تصاویر WebP در حال ارائه به مرورگرهای پشتیبانی شده در eBay.com.

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

"برش" در اینجا بایت های تصویر تلف شده است که برای کاربران ارسال می شود.

واکشی پیش‌بینی‌کننده دارایی‌های ثابت

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

با واکشی پیش‌بینی‌کننده، وقتی کاربر به صفحه پیش‌بینی‌شده هدایت می‌شود، دارایی‌ها از قبل در حافظه پنهان مرورگر هستند. این کار برای دارایی های CSS و جاوا اسکریپت انجام می شود، جایی که URL ها می توانند زودتر از موعد بازیابی شوند. نکته ای که در اینجا باید به آن توجه کرد این است که فقط در ناوبری های بار اول کمک می کند. در پیمایش های بعدی، دارایی های ثابت از قبل در حافظه پنهان خواهند بود.

eBay در حال انجام واکشی پیش‌بینی‌کننده دارایی‌های ثابت است. Home دارایی‌ها را برای جستجو واکشی می‌کند، Search دارایی‌ها را برای آیتم و غیره واکشی می‌کند. واکشی اولیه مبتنی بر یادگیری ماشینی و تحلیلی در دست بررسی است.

"برش" در اینجا زمان شبکه برای دارایی های ثابت CSS و جاوا اسکریپت در اولین ناوبری است.

واکشی اولیه نتایج جستجو

هنگامی که کاربر در eBay جستجو می کند، داده های تجزیه و تحلیل eBay نشان می دهد که به احتمال زیاد کاربر به یک مورد در 10 نتایج جستجوی برتر پیمایش می کند. بنابراین eBay اکنون موارد را از جستجو واکشی می کند و آنها را برای زمانی که کاربر پیمایش می کند آماده نگه می دارد. واکشی اولیه در دو سطح انجام می شود.

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

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

eBay 5 مورد برتر در صفحات نتایج جستجو را برای بارگیری سریع بعدی واکشی می کند. این در زمان بیکاری با requestIdleCallback() اتفاق می افتد. این منجر به میانگین زمان بالای 759 میلی‌ثانیه سریع‌تر شد، معیاری سفارشی که مشابه First Meaningful Paint است. eBay تأثیر مثبتی بر تبدیل‌های حاصل از واکشی اولیه داشت.

"برش" در اینجا می تواند زمان پردازش سرور یا زمان شبکه باشد، بسته به جایی که مورد در حافظه پنهان است.

دانلود مشتاقانه از تصاویر جستجو

در صفحه نتایج جستجو، وقتی یک پرس و جو در سطح بالایی صادر می شود، دو اتفاق می افتد. یکی مرحله فراخوان/رتبه‌بندی است، جایی که مرتبط‌ترین موارد مطابق با پرس و جو برگردانده می‌شوند. مرحله دوم، افزودن اقلام فراخوان شده با اطلاعات اضافی مرتبط با زمینه کاربر مانند هزینه های حمل و نقل است. اکنون eBay بلافاصله 10 تصویر اول را به همراه هدر به مرورگر می فرستد، بنابراین دانلودها می توانند قبل از رسیدن بقیه نشانه گذاری شروع شوند. در نتیجه، اکنون تصاویر سریعتر ظاهر می شوند. این تغییر در سطح جهانی برای پلتفرم وب منتشر شده است.

"برش" در اینجا زمان شروع دانلود برای تصاویر نتایج جستجو است.

ذخیره سازی لبه برای داده های پیشنهاد خودکار

هنگامی که کاربران حروف را در کادر جستجو تایپ می کنند، پیشنهادات ظاهر می شوند. این پیشنهادات برای ترکیب حروف حداقل برای یک روز تغییر نمی کند. آنها کاندیدای ایده‌آلی برای ذخیره‌سازی و سرویس دهی از CDN (حداکثر 24 ساعت) هستند، به جای اینکه درخواست‌ها به مرکز داده ارسال شوند. بازارهای بین المللی به ویژه از ذخیره CDN سود می برند.

تصویری از کادر جستجوی eBay که پیشنهادهای تکمیل خودکار برای یک عبارت جستجو را نمایش می دهد.

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

«برش» در اینجا تأخیر شبکه و زمان پردازش سرور برای پیشنهادات خودکار است.

کش لبه برای کاربران ناشناس صفحه اصلی

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

eBay تصمیم گرفت محتوای ناشناخته کاربر (HTML) را در شبکه لبه خود ( PoPs ) برای مدت کوتاهی ذخیره کند. کاربرانی که برای اولین بار استفاده می‌کنند، اکنون می‌توانند محتوای صفحه اصلی را که به‌جای یک مرکز داده دور، از سروری در نزدیکی آنها ارائه می‌شود، دریافت کنند. eBay هنوز در حال آزمایش این موضوع در بازارهای بین المللی است، جایی که تأثیر بیشتری خواهد داشت.

"برش" در اینجا دوباره هم تاخیر شبکه و هم زمان پردازش سرور برای کاربران ناشناس است.

بهینه سازی برای پلتفرم های دیگر

بهبود تجزیه برنامه iOS/Android

برنامه‌های iOS/Android با سرویس‌های باطنی که فرمت پاسخ آنها معمولاً JSON است صحبت می‌کنند. این محموله های JSON می توانند بزرگ باشند. به جای تجزیه کل JSON برای رندر کردن چیزی روی صفحه، eBay یک الگوریتم تجزیه کارآمد را معرفی کرد که محتوایی را که باید فوراً نمایش داده شود بهینه می‌کند.

اکنون کاربران می توانند محتوا را سریعتر ببینند. علاوه بر این، برای برنامه اندروید، eBay به محض اینکه کاربر شروع به تایپ کردن در کادر جستجو کرد (iOS قبلاً این بهینه‌سازی را داشت، eBay شروع به تنظیم اولیه کنترل‌کننده‌های نمای جستجو می‌کند). قبلاً این اتفاق فقط پس از فشار دادن دکمه جستجو توسط کاربران رخ می داد. اکنون کاربران می توانند سریعتر به نتایج جستجوی خود برسند. "برش" در اینجا زمان صرف شده توسط دستگاه ها برای نمایش محتوای مرتبط است.

بهبود زمان راه اندازی برنامه اندروید

این برای بهینه‌سازی زمان شروع سرد برای برنامه‌های Android اعمال می‌شود. هنگامی که یک برنامه سرد شروع می شود، مقدار زیادی مقداردهی اولیه هم در سطح سیستم عامل و هم در سطح برنامه اتفاق می افتد. کاهش زمان اولیه سازی در سطح برنامه به کاربران کمک می کند تا صفحه اصلی را سریعتر ببینند. eBay برخی از پروفایل‌ها را انجام داد و متوجه شد که همه تنظیمات اولیه برای نمایش محتوا لازم نیست و برخی از آنها را می‌توان با تنبلی انجام داد.

مهمتر از آن، eBay مشاهده کرد که یک تماس تحلیلی شخص ثالث مسدود شده بود که رندر روی صفحه را به تاخیر انداخت. حذف تماس مسدود شده و ناهمگام کردن آن به زمان شروع سرد کمک کرد. "برش" در اینجا زمان راه اندازی غیر ضروری برای برنامه های اندروید است.

نتیجه گیری

تمام عملکردهایی که eBay انجام داد به حرکت درآوردن سوزن کمک کردند و این در یک دوره زمانی اتفاق افتاد. این نسخه ها در طول سال به مرحله اجرا درآمدند و هر نسخه ده ها میلی ثانیه کاهش یافت و در نهایت به نقطه ای رسید که eBay اکنون در آن قرار دارد:

اسکرین‌شات‌هایی از گزارش Chrome UX که بهبود داده‌های میدانی را برای eBay.com نشان می‌دهد.
تأثیر تلاش‌های سرعت eBay بر معیارهای میدانی آنها در طول زمان، همانطور که توسط داشبورد گزارش Chrome UX نشان داده شده است.

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

سرعت هزار کاهش را بررسی کنید تا بیشتر بدانید و منتظر مقالات دقیق تر مهندسین eBay در مورد عملکرد آنها در آینده نزدیک باشید.