مهندسی عملکرد React: virtualization و Core Web Vitals
عملکرد در React فقط بهینهسازی تصادفی نیست؛ مهندسی سیستماتیک بر اساس رفتار واقعی کاربر و معیارهای قابل اندازهگیری است.
علی مرتضوی
بنیانگذار پارادایس کد
چرا عملکرد ویژگی محصول است نه polish آخر
در محصولات دادهمحور — کتابخانه آنلاین، پنل گزارش، فروشگاه با کاتالوگ بزرگ — کاربر در چند ثانیه اول تصمیم میگیرد ادامه دهد یا نه. lag در اسکرول، تأخیر در کلیک، و پرش layout اعتماد را میشکند. عملکرد برای این محصولات بخشی از ارزش پیشنهادی است.
Core Web Vitals زبان مشترکی بین توسعه، محصول و SEO فراهم میکند. LCP کیفیت بارگذاری اولیه، INP پاسخگویی به تعامل، و CLS پایداری بصری را میسنجد. اینها فقط عدد گوگل نیستند؛ تجربه واقعی کاربر هستند.
مهندسی عملکرد یعنی قبل از نوشتن کد بدانید bottleneck کجاست: شبکه، رندر، layout، یا JavaScript execution. بدون پروفایل، بهینهسازی حدسی گران و اغلب بیاثر است.
LCP: بارگذاری اولیه که حس سریع میدهد
بزرگترین عنصر قابل مشاهده در viewport معمولاً تصویر hero، عنوان اصلی یا بلوک محتواست. آن را در HTML اولیه یا RSC بیاورید، نه بعد از waterfall چند API. برای Next.js از priority در next/image برای المان LCP استفاده کنید.
فونت فارسی اگر دیر لود شود، LCP را خراب میکند. subset مناسب، preload وزنهای ضروری، و font-display: swap آگاهانه راهکارهای عملی هستند. گاهی swap باعث FOUT میشود؛ باید با طراحی هماهنگ شود.
اسکریپت third-party را به تعویق بیندازید. چت، آنالیتیکس و تگ تبلیغاتی اگر در head همزمان باشند، رقابت روی bandwidth و main thread ایجاد میکنند.
INP و هزینه JavaScript در تعامل
INP جایگزین FID شده و کل مسیر تعامل تا paint بعدی را میسنجد. handlerهای سنگین، rerender زنجیرهای، و state global بیجهت مستقیم روی INP اثر میگذارند. هر کلیک نباید نیم درخت را دوباره رندر کند.
از React DevTools Profiler و Performance panel مرورگر استفاده کنید. commitهای پرتکرار در حین تایپ یا اسکرول نشانه جداسازی نادرست state است. state را نزدیک محل مصرف نگه دارید.
برای inputهای پرتکرار، debounce و transition (React 18+) ابزار مناسباند. کار سنگین را به web worker ببرید اگر از main thread جدا شدنی است — مثلاً پردازش متن بزرگ یا فیلتر روی آرایه هزاران آیتمی.
CLS: ثبات بصری در RTL و layout پویا
تصاویر بدون width و height مشخص، بنرهای تبلیغاتی دیرلودشونده، و skeleton ناهمتراز با محتوای نهایی از علتهای رایج CLS هستند. همیشه برای media جایگاه رزرو کنید.
در RTL، تغییر جهت نباید باعث جابهجایی ناگهانی شود. margin logical (inline-start) بهتر از left/right سختکد شده است. فونت fallback با metrics نزدیک به فونت اصلی CLS را کم میکند.
toast و modal اگر دیر به DOM اضافه شوند و layout را هل دهند، CLS میسازند. از layer ثابت یا transform برای عناصر شناور استفاده کنید.
Virtualization برای لیستها و جداول بزرگ
رندر هزاران ردیف DOM همزمان در React غیرضروری است. virtualization فقط آیتمهای visible را mount میکند. کتابخانههایی مثل TanStack Virtual یا react-window برای جدول محصول، لاگ سفارش و فهرست مقاله ضروریاند.
virtualization را با ارتفاع ثابت یا تخمین ارتفاع ترکیب کنید. ردیفهای متغیر ارتفاع ممکن است اما پیچیدهترند. scroll container و overscan را تنظیم کنید تا فلاش سفید هنگام اسکرول سریع نبینید.
کلید پایدار برای آیتمها (id نه index) در لیستهای قابل مرتبسازی و فیلتر حیاتی است. وگرنه state داخلی ردیفها به هم میریزد.
فرآیند اندازهگیری و بهبود مستمر
بودجه عملکرد تعریف کنید: مثلاً LCP زیر ۲.۵ ثانیه در موبایل 4G شبیهسازیشده. در CI از Lighthouse CI یا WebPageTest استفاده کنید. regression را قبل از merge بگیرید.
داده Field (CrUX) را با Lab جدا ببینید. گاهی lab سبز است اما کاربر واقعی کند است — معمولاً به خاطر دستگاه ضعیف، شبکه یا داده حجیم.
مهندسی عملکرد کار یکباره نیست. هر feature جدید باید سؤال عملکرد بپرسد. در پروژههای پارادایس کد، virtualization و Vitals از طراحی شروع میشوند، نه از تیکت اضطراری قبل از لانچ.
دانش و مقالات
نیاز به اجرای همین مفاهیم در محصولتان دارید؟
پارادایس کد از مشاوره تا پیادهسازی کامل کنار شماست.