آنها با استفاده از ابزارهای نظارت واقعی کاربر و تمرکز بر بهبود Core Web Vitals در بازسازی برنامه خود، CLS را تا 72% و همچنین پاسخگویی برنامه را بهبود دادند.
Agrofy یک بازار آنلاین برای بازار تجارت کشاورزی آمریکای لاتین است. آنها خریداران و فروشندگان ماشین‌های کشاورزی، زمین، تجهیزات و خدمات مالی را با هم مقایسه می‌کنند. در سه ماهه سوم 2020، یک تیم توسعه 4 نفره در Agrofy یک ماه را صرف بهینه سازی وب سایت خود کردند، زیرا آنها فرض کردند که بهبود عملکرد منجر به کاهش نرخ پرش می شود. آنها به طور خاص بر بهبود LCP تمرکز کردند که یکی از اصلی ترین موارد حیاتی وب است. این بهینه سازی عملکرد منجر به بهبود 70% در LCP شد که با کاهش 76% در رهاسازی بار (از 3.8% به 0.9%) مرتبط بود.
70 درصد
LCP پایین تر
76 درصد
رها شدن بار کمتر
مسئله
در حین مطالعه معیارهای تجاری خود، یک تیم توسعه در Agrofy متوجه شدند که نرخ پرش آنها بالاتر از معیارهای صنعت به نظر می رسد. بدهی فنی نیز در پایگاه کد وب سایت در حال افزایش بود.
راه حل
تیم Agrofy مدیران خود را معرفی کرد و در موارد زیر خرید کرد:
- از یک چارچوب قدیمی‌تر و منسوخ به یک چارچوب جدیدتر که فعالانه پشتیبانی می‌شود، مهاجرت کنید.
- عملکرد بارگذاری پایگاه کد جدید را بهینه کنید.
مهاجرت 2 ماه طول کشید. جدا از تیم توسعه 4 نفره ای که قبلاً ذکر شد، این مهاجرت همچنین شامل متخصصان محصول و UX و یک معمار نرم افزار بود. پروژه بهینه سازی تیم توسعه 4 نفره 1 ماه طول کشید. آنها روی LCP، CLS (یکی دیگر از معیارهای Core Web Vitals) و FCP تمرکز کردند. بهینه سازی های خاص شامل:
- بارگیری تنبل همه عناصر غیرقابل مشاهده با Intersection Observer API .
- ارائه سریعتر منابع استاتیک با شبکه تحویل محتوا .
- بارگذاری تنبل تصاویر با
loading="lazy". - رندر سمت سرور محتوای مسیر رندر بحرانی .
- از قبل بارگیری و اتصال از قبل منابع حیاتی برای به حداقل رساندن زمان دست دادن.
- استفاده از ابزارهای نظارت بر کاربر واقعی (RUM) برای تشخیص اینکه کدام صفحات جزئیات محصول دارای تغییرات زیادی در طرح هستند و سپس تنظیماتی را در معماری پایگاه کد انجام دهید.
برای جزئیات فنی بیشتر ، پست وبلاگ مهندسی Agrofy را بررسی کنید.
پس از فعال کردن پایگاه کد جدید بر روی 20٪ از ترافیک، آنها سایت جدید را در اوایل سپتامبر 2020 برای همه بازدیدکنندگان راه اندازی کردند.
نتایج
بهینه سازی های تیم توسعه منجر به بهبودهای قابل اندازه گیری در بسیاری از معیارهای مختلف شد:
- LCP 70 درصد بهبود یافته است.
- CLS 72% بهبود یافته است.
- مسدود کردن درخواست‌های JS 100% و مسدود کردن درخواست‌های CSS 80% کاهش می‌یابد.
- کارهای طولانی 72 درصد کاهش یافت.
- اولین CPU Idle 25٪ بهبود یافته است.
در همان بازه زمانی، داده‌های نظارت واقعی کاربر (همچنین به عنوان داده‌های میدانی نیز شناخته می‌شود) نشان داد که نرخ رها شدن بار در صفحات جزئیات محصول 76٪ کاهش یافته است، از 3.8٪ به 0.9٪:
