معیار جدید Core Web Vitals Google: نحوه بهبود تعامل با رنگ بعدی (INP)
نویسنده پست:
محمدمهدی خارکن
دستهبندی:
تاریخ پست:
بهمن 7, 1402
تعداد بازدید
1,039
تعامل من با رنگ بعدی چگونه باید باشد؟
چه چیزی باعث تعامل کند با نمرات رنگ بعدی (INP) می شود؟
پردازش مداوم CPU در صفحه که از نمایش محتوای به روز شده صفحه توسط مرورگر جلوگیری می کند، چیزی است که باعث کندی امتیازات INP می شود.
بنابراین، به دنبال مشکلات بالقوه INP باشید.
مقدار کلی INP از سه مؤلفه مختلف تشکیل شده است که به امتیاز کلی می رسد:
- تاخیر ورودی
- زمان پردازش
- تاخیر ارائه
-
تاخیر ورودی
زمان پردازش
تاخیر ارائه
تاخیر ارائه زمانی است که مرورگر شما برای محاسبه مکان و نحوه نمایش محتوای جدید صرف می کند. این می تواند شامل هر چیزی از رنگ گرفته تا مکان و فونت باشد.
اگر یک وب سایت ساده دارید، نباید تاخیر زیادی داشته باشید.
با این حال، اگر وب سایت شما از 10 هزار عنصر منفرد با سبک پیچیده تشکیل شده باشد، این محاسبات می تواند به تأخیر در تعامل در وب سایت شما کمک کند.
نحوه بهینه سازی تعامل با رنگ بعدی
INP Debugger اجرای آزمایش و شناسایی عناصر کند را آسان می کند.
با این حال، برای جریان های پیچیده به خوبی کار نمی کند.
برای مثال، اگر کاربر ابتدا عنصری را به سبد خرید خود اضافه کند و در جریان پرداخت با عملکرد ضعیف مواجه شود، این عنصر شناسایی نمیشود.
2. برای کشف مشکلات پیچیده INP با Chrome DevTools دنبال کنید
داده های DevTools فوق العاده دقیق هستند و تمام اطلاعاتی را که برای بهینه سازی آن تعامل نیاز دارید در اختیار شما قرار می دهد.
هم برای صفحات ساده و هم برای جریان های کاربر پیچیده یا صفحاتی که نیاز به ورود دارند کار می کند.
در مرحله بعد، باید داده ها را به صورت دستی جمع آوری کنید و از آزمون و خطا برای شناسایی عناصر UI برای تعامل استفاده کنید.
3. برای تأخیرهای تعاملی مختصرتر با جریان های کاربر Lighthouse تلاش کنید
راه آسان: نظارت واقعی کاربر (RUM)
به راحتی و به طور مداوم بر تعامل با رنگ بعدی نظارت کنید
با ثبت نام، شروع به جمعآوری دادههای واقعی کاربر در INP و سایر Core Web Vitals کنید و یک آزمایش 14 روزه رایگان با DebugBear دریافت کنید.