Web Vitals و INP در ۲۰۲۶: آنچه واقعاً روی تبدیل اثر دارد
Core Web Vitals همچنان زبان مشترک عملکرد وب است. با محوریت INP، تیمها باید از امتیاز آزمایشگاهی به سیگنال فیلد و بودجه مسیرهای پولساز حرکت کنند.
علی مرتضوی
بنیانگذار پارادایس کد
چرا هنوز Web Vitals مهم است
LCP، INP و CLS زبان مشترکی بین محصول، مهندسی و سئو ساختهاند. در ۲۰۲۶ بحث دیگر «آیا اندازهگیری کنیم؟» نیست؛ بحث این است که کدام صدک فیلد، روی کدام مسیر، مالک کدام تیم است.
امتیاز سبز Lighthouse روی لپتاپ قدرتمند گمراهکننده است. تصمیمها باید از RUM (Chrome UX Report یا ابزار خودتان) بیایند، مخصوصاً برای موبایل و شبکههای واقعی کاربران.
INP: متریک تعامل که پول را جابهجا میکند
INP تأخیر تعامل را در طول عمر صفحه میسنجد، نه فقط اولین ورودی. فرمها، فیلترها، افزودن به سبد و ویرایش جدولها جایی هستند که INP بد مستقیماً نرخ تبدیل را میکشد.
علل رایج ۲۰۲۶: هیدریشن سنگین کلاینت، handlerهای همزمان طولانی، اسکریپتهای third-party، و رندرهای React غیرضروری روی هر کلید. React Compiler و شکستن کار با startTransition بخشی از جعبه ابزارند — نه کل راهحل.
LCP و پوستهٔ فوری
LCP هنوز به تصویر هیرو، فونت، و TTFB وابسته است. در اپهای App Router، پوستهٔ استاتیک سریع بههمراه استریم محتوای دینامیک الگوی غالب است. Instant Navigations در Next.js 16.3 همین ایده را به ناوبری کلاینتی هم میکشاند.
برای LCP: اولویت به تصویر LCP با ابعاد مشخص، پیشبارگذاری فونت بحرانی با احتیاط، و حذف JS مسدودکننده رندر. CDN و کش لبه برای HTML و asset هنوز پایهایترین بردها هستند.
CLS: ثبات بصری بدون نمایشی شدن
CLS معمولاً از تصاویر بدون ابعاد، تبلیغات دیررس، و فونتهایی که متن را جابهجا میکنند میآید. اسکلتونها کمک میکنند اگر ابعاد نهایی را حفظ کنند؛ اسکلتون با ارتفاع صفر مشکل را بدتر میکند.
در داشبوردهای B2B، CLS کمتر از e-commerce نمایشی است اما جدولهایی که ستونشان بعد از لود داده میپرد همچنان اعتماد را میکاهد. بودجه CLS را روی مسیرهای کلیدی UI بگذارید.
بودجه عملکرد برای مسیرهای پولساز
بهجای «کل سایت سبز»، سه مسیر حیاتی انتخاب کنید و برای هر کدام بودجه INP و LCP تعریف کنید. مالک مسیر مشخص باشد. رگرسیون در CI با تست آزمایشگاهی و بعد از دیپلوی با RUM دیده شود.
Third-partyها را مثل وابستگی پروداکشن مدیریت کنید: اگر تگ مارکتینگ INP را خراب میکند، یا به تعویق بیفتد یا حذف شود. «فقط یک اسکریپت دیگر» جملهٔ مقدمهٔ بسیاری از حوادث عملکرد است.
اتصال به استک Next.js مدرن
Partial Prefetching، پوستهٔ لودینگ مشترک، و کاهش درخواست prefetch در ۱۶.۳ مستقیماً به حس سرعت ناوبری کمک میکنند. اما اگر داده در سرور waterfall بماند، UI فوری فقط اسکلت خالی را سریع نشان میدهد.
اندازهگیری را به مسیر وصل کنید: Navigation Inspector و Instant Insights در توسعه، RUM در پروداکشن. بدون این حلقه، بهینهسازی سلیقهای میشود.
چکلیست فصلی تیم
هر فصل: بررسی p75 فیلد موبایل، فهرست third-party، بزرگترین صفحات از نظر JS، و یک آزمایش حذف یا تعویق برای بدترین مقصر INP. نتیجه را در کانال مهندسی منتشر کنید.
هدف زیباییشناختی «۱۰۰ Lighthouse» نیست؛ هدف کاهش اصطکاک در کاری است که کاربر برای آن پول میدهد یا ثبتنام میکند.
سؤالات متداول
آیا FID هنوز مهم است؟
INP جایگزین عملی برای ارزیابی تعامل شده است. روی INP و سیگنال فیلد تمرکز کنید.
Lighthouse کافی است؟
برای دیباگ مفید است؛ برای قضاوت پروداکشن خیر. RUM را منبع تصمیم بگیرید.
اول INP را درست کنیم یا LCP؟
به قیف محصول بستگی دارد. صفحات فرود معمولاً LCP؛ اپهای تعاملی بعد از ورود معمولاً INP.
دانش و مقالات
نیاز به اجرای همین مفاهیم در محصولتان دارید؟
پارادایس کد از مشاوره تا پیادهسازی کامل کنار شماست.