نحوه بهینه سازی Mercado Libre برای Web Vitals (TBT/FID)

بهینه سازی تعامل صفحات جزئیات محصول برای کاهش 90 درصدی حداکثر پتانسیل FID در Lighthouse و بهبود 9 درصدی در FID در گزارش تجربه کاربر Chrome.

Carlos Aranha

Demián Renzulli

Joan Baca

Mercado Libre بزرگترین اکوسیستم تجارت الکترونیک و پرداخت در آمریکای لاتین است. در 18 کشور حضور دارد و در برزیل، مکزیک و آرژانتین پیشرو بازار است (بر اساس بازدیدکنندگان منحصر به فرد و بازدید از صفحه).

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

این مقاله خلاصه‌ای از کارهای انجام شده توسط Guille Paz ، Pablo Carminatti و Oleh Burkhay از تیم معماری frontend Mercado Libre برای بهینه‌سازی یکی از Core Web Vitals: First Input Delay (FID) و پروکسی آزمایشگاهی آن، Total Blocking Time (TBT) است .

وظایف طولانی، تاخیر ورودی اول، و زمان مسدود کردن کل

اجرای کدهای گران قیمت جاوا اسکریپت می تواند به کارهای طولانی منجر شود، کارهایی که بیش از 50 میلی ثانیه در رشته اصلی مرورگر اجرا می شوند.

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

برای ارائه یک تجربه کاربری خوب، سایت ها باید تلاش کنند تا تاخیر ورودی اول کمتر از 100 میلی ثانیه داشته باشند:

در حالی که سایت Mercado Libre در بیشتر بخش‌ها عملکرد خوبی داشت، آنها در گزارش تجربه کاربر Chrome دریافتند که صفحات جزئیات محصول FID ضعیفی دارند. بر اساس آن اطلاعات، آنها تصمیم گرفتند تلاش خود را بر بهبود تعامل برای صفحات محصول در سایت متمرکز کنند.

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

تعامل صفحات جزئیات محصول را اندازه گیری کنید

FID به یک کاربر واقعی نیاز دارد و بنابراین نمی توان آن را در آزمایشگاه اندازه گیری کرد. با این حال، معیار زمان انسداد کل (TBT) قابل اندازه‌گیری آزمایشگاهی است، به خوبی با FID در این زمینه ارتباط دارد، و همچنین مسائلی را که بر تعامل تأثیر می‌گذارد، ثبت می‌کند.

به عنوان مثال، در ردیابی زیر، در حالی که کل زمان صرف شده برای اجرای وظایف روی رشته اصلی 560 میلی‌ثانیه است، تنها 345 میلی‌ثانیه از آن زمان کل زمان مسدود شدن در نظر گرفته می‌شود (مجموع بخش‌های هر کار که بیش از 50 میلی‌ثانیه است):

Mercado Libre TBT را به عنوان یک معیار پروکسی در آزمایشگاه، به منظور اندازه گیری و بهبود تعامل صفحات جزئیات محصول در دنیای واقعی، در نظر گرفت.

در اینجا رویکرد کلی آنها وجود دارد:

• از WebPageTest برای تعیین دقیق اینکه کدام اسکریپت ها موضوع اصلی را در یک دستگاه واقعی مشغول نگه می دارند، استفاده کنید.
• از Lighthouse برای تعیین تأثیر تغییرات در حداکثر تاخیر ورودی اول پتانسیل (حداکثر پتانسیل FID) استفاده کنید.

از WebPageTest برای تجسم کارهای طولانی استفاده کنید

WebPageTest (WPT) یک ابزار عملکرد وب است که به شما امکان می دهد آزمایشات را بر روی دستگاه های واقعی در مکان های مختلف در سراسر جهان اجرا کنید.

Mercado Libre از WPT برای بازتولید تجربه کاربران خود با انتخاب نوع دستگاه و مکان مشابه کاربران واقعی استفاده کرد. به طور خاص، آنها یک دستگاه Moto 4G و Dulles، ویرجینیا را انتخاب کردند، زیرا می خواستند تجربه کاربران Mercado Libre در مکزیک را تقریبی کنند. با مشاهده نمای رشته اصلی WPT، Mercado Libre دریافت که چندین کار طولانی متوالی وجود دارد که رشته اصلی را به مدت 2 ثانیه مسدود می کند:

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

از Lighthouse برای تعیین حداکثر پتانسیل FID استفاده کنید

Lighthouse به شما امکان انتخاب بین دستگاه ها و مکان های مختلف را نمی دهد، اما ابزار بسیار مفیدی برای تشخیص سایت ها و دریافت توصیه های عملکرد است.

هنگام اجرای Lighthouse در صفحات جزئیات محصول، Mercado Libre دریافت که Max Potential FID تنها معیاری است که با رنگ قرمز مشخص شده است، با مقدار 1710ms .

بر این اساس، Mercado Libre هدفی را برای بهبود امتیاز حداکثر پتانسیل FID خود در ابزار آزمایشگاهی مانند Lighthouse و WebPageTest تعیین کرد، با این فرض که این بهبودها بر کاربران واقعی آنها تأثیر می گذارد، و بنابراین، در ابزارهای نظارت بر کاربر واقعی مانند Chrome نشان داده می شود. گزارش تجربه کاربر

کارهای طولانی را بهینه کنید

تکرار اول

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

آنها شروع به بهینه سازی عملکرد ماژول ردیابی داخلی کردند. این ماژول حاوی یک وظیفه سنگین CPU بود که برای کارکرد ماژول حیاتی نبود و بنابراین می‌توان آن را با خیال راحت حذف کرد. این منجر به کاهش 2 درصدی جاوا اسکریپت برای کل سایت شد.

پس از آن، آنها شروع به کار بر روی بهبود اندازه کلی باندل کردند:

Mercado Libre از webpack-bundle-analyzer برای شناسایی فرصت های بهینه سازی استفاده کرد:

• در ابتدا آنها به ماژول کامل Lodash نیاز داشتند. این با یک روش برای بارگیری تنها یک زیرمجموعه از Lodash به جای کل کتابخانه جایگزین شد و همراه با lodash-webpack-plugin برای کوچک کردن Lodash حتی بیشتر استفاده شد.

آنها همچنین بهینه سازی های Babel زیر را اعمال کردند:

• استفاده از @babel/plugin-transform-runtime برای استفاده مجدد از کمک کننده های Babel در سراسر کد، و کاهش قابل توجه اندازه بسته.
• استفاده از babel-plugin-search-and-replace برای جایگزینی توکن ها در زمان ساخت، به منظور حذف یک فایل پیکربندی بزرگ در بسته اصلی.
• اضافه کردن babel-plugin-transform-react-remove-prop-types برای ذخیره برخی بایت های اضافی با حذف انواع prop.

در نتیجه این بهینه‌سازی‌ها، اندازه باندل تقریباً 16٪ کاهش یافت.

اندازه گیری تاثیر

تغییرات، وظایف طولانی مدت متوالی Mercado Libre را از دو ثانیه به یک ثانیه کاهش داد:

Lighthouse کاهش 57 درصدی را در حداکثر تاخیر ورودی اول پتانسیل نشان داد:

تکرار دوم

تیم به کندوکاو در کارهای طولانی ادامه داد تا پیشرفت‌های بعدی را بیابد.

بر اساس این اطلاعات، آنها تصمیم گرفتند تغییرات زیر را اعمال کنند:

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

اندازه گیری تاثیر

ردیابی WebPageTest حاصل، قطعات کوچکتری از اجرای JS را نشان داد:

و زمان حداکثر پتانسیل FID آنها در فانوس دریایی 60 درصد دیگر کاهش یافت:

پیشرفت را برای کاربران واقعی تجسم کنید

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

گزارش تجربه کاربر Chrome معیارهای تجربه کاربر را برای نحوه تجربه کاربران واقعی Chrome از مقاصد محبوب در وب ارائه می دهد. داده های گزارش را می توان با اجرای پرس و جوها در BigQuery ، PageSpeedInsights یا CrUX API به دست آورد.

داشبورد CrUX یک راه آسان برای تجسم پیشرفت معیارهای اصلی است:

مراحل بعدی

عملکرد وب هرگز یک کار تمام شده نیست و Mercado Libre ارزشی را که این بهینه سازی ها برای کاربران خود به ارمغان می آورد را درک می کند. در حالی که آن‌ها به اعمال چندین بهینه‌سازی در سراسر سایت، از جمله واکشی اولیه در صفحات فهرست محصولات، بهینه‌سازی تصویر و موارد دیگر ادامه می‌دهند، به افزودن بهبودهایی به صفحات فهرست محصولات برای کاهش زمان مسدود کردن کل (TBT) و حتی بیشتر توسط پروکسی FID ادامه می‌دهند. این بهینه سازی ها عبارتند از:

• تکرار در راه حل تقسیم کد.
• بهبود اجرای اسکریپت های شخص ثالث.
• بهبود مستمر در بسته‌بندی دارایی در سطح باندلر ( پک وب ).

Mercado Libre دیدگاهی جامع از عملکرد دارد، بنابراین در حالی که آنها به بهینه سازی تعامل در سایت ادامه می دهند، آنها همچنین شروع به ارزیابی فرصت ها برای بهبود در دو مورد حیاتی اصلی وب فعلی کرده اند: LCP (بزرگترین رنگ محتوایی) و CLS (تغییر چیدمان تجمعی) حتی بیشتر.