INP در core web vitals به چه معنی است؟ + روش‌های بهینه سازی آن
مفهوم
INP با اندازه‌گیری زمان لازم برای پیشرفت کاربر از یک عمل فعلی (ضربه زدن، کشیدن انگشت، و غیره) به رنگ بعدی کار می‌کند، زمان بین عمل کاربر و مدت زمانی که طول می‌کشد تا صفحه نمایش نقاشی شود را ثبت می‌کند، سپس آن را بر مدت زمان تعامل تقسیم می‌کند.
بهینه سازی آن
مرحله اول: شناسایی دلایل INP ضعیف
اولین قدم شناسایی تمام تعاملات کاربر در صفحه است، مانند کلیک‌ها، اسکرول‌ها و ارسال‌های فرم. سپس، تاخیر ورودی برای هر تعامل را با استفاده از ابزارهایی مانند Google Analytics یا Chrome DevTools اندازه گیری کنید.
این به شما کمک می‌کند تا عملکرد وب سایت خود را در دستگاه‌های مختلف و اتصالات اینترنتی درک کنید. اسکریپت‌های شخص ثالث بیش از حد، فایل‌های CSS و جاوا اسکریپت بزرگ و عناصر پیچیده مثل ساختارهای پیچیده HTML می‌توانند باعث تاخیر در رندر شوند و INP را تحت تاثیر قرار دهند.
مرحله دوم: بهینه سازی تعاملات
پس از اینکه داده‌های قابل اعتمادی به دست آوردید، با مهندسان یا توسعه دهندگان خود برای بهبود تاخیر ورودی با بهینه سازی کنترل کننده رویداد یا حل مشکلات شبکه کار کنید.
تکنیک‌هایی مانند بارگذاری تنبل تصاویر و ویدیوها، پیش ذخیره‌سازی محتوا و بهینه‌سازی مسیر رندر بحرانی می‌توانند تفاوت زیادی در پاسخ‌دهی ایجاد کنند. در ادامه به بررسی برخی دیگر از تکنیک‌های بهینه سازی تعامل کاربر می‌پردازیم.
- بررسی Input یا تاخیر ورودی: اطمینان حاصل کنید که صفحه وب به سرعت به اقدامات کاربر پاسخ می‌دهد و هرگونه تأخیر بین تعامل و واکنش را به حداقل می‌رساند.
- بررسی Processing Time: با بررسی زمان پردازش و استفاده از استراتژی‌های موثر، زمان صرف شده برای مرورگر برای پردازش ورودی‌های کاربر و به روز رسانی صفحه وب را کاهش دهید.
- بررسی Presentation یا تاخیر در ارائه: فرآیند رندر را بهینه کنید تا زمان بین تعامل کاربر و رویداد رنگ بعدی به حداقل برسد.
منبع و اطلاعات کامل‌تر را اینجا بخوانید: مقاله INP چیست در وبلاگ سایت وب‌رمز
