معیار جدید Core Web Vitals Google: نحوه بهبود تعامل با رنگ بعدی (INP)

Core Web Vitals چیست و چه چیزی در حال تغییر است؟

Core Web Vitals (CWV) یک مجموعه از سه معیار تجربه کاربر است که در ژوئن 2021 به عنوان یکی از سیگنال‌های رتبه‌بندی مطرح شد. این سه معیار CWV به شرح زیر هستند:

1. بزرگترین رنگ محتوایی (LCP):
   • سرعت نمایش محتوای صفحه اصلی چقدر است؟
2. تغییر چیدمان تجمعی (CLS):
   • پس از بارگذاری، آیا طرح بندی صفحه به طور پایدار حفظ می‌شود؟
3. تاخیر ورودی اول (FID):
   • چقدر صفحه به ورودی کاربر سریعاً پاسخ می‌دهد؟

با این حال، در مارس 2024، تعامل با رنگ بعدی (INP) به عنوان جایگزینی برای تاخیر ورودی اول معرفی خواهد شد.

تعامل با رنگ بعدی چیست؟

سنجش قدیمی تاخیر ورودی اول به ندرت توانسته است تجربیات ناپسند کاربر را در زمان وقوع آنها شناسایی کند.

تعامل با رنگ بعدی (INP) در بهبود تاخیر ورودی اول به دو روش اقدام می‌کند:

1. INP مجموع زمان بین تعامل کاربر و به‌روزرسانی بصری بعدی در صفحه را مورد بررسی قرار می‌دهد. تاخیر ورودی اول تنها یک قسمت از کل تاخیر را در نظر می‌گیرد.
2. INP همه تعاملات صفحه را در نظر می‌گیرد و به طور معمول گزارش می‌دهد که کدام صفحه بیشترین تاخیر را دارد. به عبارت دیگر، تاخیر ورودی اول تنها به اولین تعامل توجه می‌کند.

برای ارائه یک تجربه کاربری مطلوب و دستیابی به استانداردهای اساسی و حیاتی گوگل در وب، مقدار INP شما باید کمتر از 200 میلی‌ثانیه باشد.

اکثر وب‌سایت‌ها اغلب آستانه تاخیر ورودی اول را نسبتاً ساده می‌پنداشتند. 93 درصد از وب‌سایت‌های موبایل توانسته‌اند یک تجربه مطلوب را ارائه دهند.

برعکس این مسئله، تنها 64 درصد از وب‌سایت‌ها در حال حاضر در معیار تعامل تا به به‌روزرسانی بعدی (Interaction to Next Paint) عملکرد قابل قبولی دارند.

برای ارزیابی عملکرد سایت خود می‌توانید از ابزارهای رایگانی همچون PageSpeed ​​Insights یا DebugBear استفاده کنید. برگه DebugBear “Web Vitals” همچنین به شما تاریخچه تغییر امتیاز INP شما در طول زمان را نمایش می‌دهد.

تاخیر ورودی به معنای زمانی است که بین لحظه کلیک کاربر بر روی دکمه و دریافت پاسخ از آن دکمه می‌گذرد.

در این مثال، اگر بخواهید پس از کلیک کاربر بر روی دکمه “نمایش بیشتر”، محتوای پویا صفحه جدید نمایش داده شود، می‌توانید از جاوا اسکریپت استفاده کنید.

با این حال، باید توجه داشته باشید که محتوای صفحه جدید تنها زمانی بارگیری می‌شود که مرورگر به اجرای کدهای دیگر در وب‌سایت شما پرداخته باشد.

اگر مرورگر هنوز به اجرای کدهای دیگر در وب‌سایت شما مشغول باشد، باید منتظر بماند تا این کدها به پایان برسند تا بتواند به کلیک کاربر پاسخ دهد.

این تاخیر بین تعامل کاربر و اجرای کد کنترل‌کننده رویداد، تاخیر ورودی نامیده می‌شود.

استفاده از ابزارهای مانیتورینگ مانند راکل (RUM) می‌تواند به شما نشان دهد که چه کدهای دیگری در حال اجرا در وب‌سایت شما هستند و ممکن است باعث تأخیر در پاسخ به کلیک کاربر شوند.

اگر اطمینان ندارید که چه صفحاتی در وب‌سایت شما نیاز به بهینه‌سازی دارند، یک مکان خوب برای شروع، گزارش Core Web Vitals در کنسول جستجوی گوگل است. در اینجا شما می‌توانید URL‌های خاصی را که سرعت کمی دارند، مشاهده کنید.

پس از شناخت صفحاتی که نیاز به بهینه‌سازی دارند، چندین روش برای شناسایی تعاملات کند در وب‌سایت شما وجود دارد:

1. استفاده از ابزار INP Debugger
2. آزمایش به صورت دستی در Chrome DevTools
3. ایجاد جریان‌های کاربری در Lighthouse
4. استفاده از نظارت واقعی کاربر (RUM)

ما نقدی جزئی به این چهار رویکرد و همچنین مزایا و معایب آنها خواهیم نگاهید.

1. از یک دیباگر INP برای کشف آنچه باعث تاخیر INP می شود استفاده کنید

ابزارهای توسعه دهنده در Google Chrome اطلاعات زیادی در مورد آنچه در صفحه شما اتفاق می‌افتد، فراهم می‌کنند.

تب “عملکرد” DevTools به شما این امکان را می‌دهد تا یک ضبط از یک تعامل ایجاد کنید و سپس آن را تجزیه و تحلیل کنید.

برای انجام این کار:

1. تب DevTools Performance را باز کنید.
2. روی دکمه شروع ضبط کلیک کنید.
3. روی یک عنصر UI در صفحه کلیک کنید.
4. ضبط را متوقف کنید.
5. خط “تعامل” نمایه عملکرد را باز کنید.
6. برای مشاهده عملکرد CPU که اجرا شده است، از جمله وظایف خاصی که مسئول تاخیر هستند، خط “Main” را مرور کنید.
7. هر کار مداوم روی نخ اصلی همان چیزی است که رنگ بعدی را مسدود می‌کند.

حالا که عناصر صفحه را به صورت دستی شناسایی کرده‌اید، زمان آن رسیده است که از ابزار لایت‌هاوس گوگل استفاده کنید، که از آزمایش جریان کاربر و اندازه‌گیری INP نیز پشتیبانی می‌کند.

ابزار Lighthouse نسبت به برگه DevTools Performance یک تجزیه و تحلیل مختصرتر از تاخیرهای تعامل ارائه می‌دهد.

می‌توانید Lighthouse را از Chrome DevTools اجرا کنید و به‌صورت دستی با عناصر صفحه تعامل داشته باشید، یا کد بنویسید تا تعاملات را خودکار کنید تا بعداً آزمایش مجدد سایتتان آسان شود.

4. رفع مشکلات مربوط به رنگ بعدی

با نظارت واقعی کاربر، می‌توانید داده‌های دقیق را در زمان واقعی جمع‌آوری کرده و دقیقاً ببینید که چه تعاملاتی در یک صفحه خاص منجر به تاخیر می‌شود.

برای بهبود نمرات INP، می‌توانید:

1. از ابزارهایی مانند  RUM برای کشف خودکار عناصر صفحه کند استفاده کنید.
2. به سرعت عناصر صفحه را بررسی کنید که معمولاً منجر به تعاملات آهسته می‌شوند.
3. تغییرات مورد نیاز را اعمال کنید.

این اسکرین‌شات از محصول DebugBear RUM نشان می‌دهد که چگونه کاربران مختلف با عناصر مختلف صفحه تعامل دارند و چگونه در نتیجه میزان تاخیر ورودی متفاوتی را تجربه می‌کنند.

ابزارهای نظارت واقعی کاربر نیز جزئیاتی را در مورد نمونه‌های خاص تجربه‌های کاربر کند ارائه می‌دهند.

این ابزارها به شما کمک می‌کنند تا زمینه محل وقوع تاخیر را درک کرده و تکرار و رفع مشکل را آسان‌تر کنید.

برای مثال، برخی از عناصر رابط کاربری ممکن است فقط در اندازه‌های خاص صفحه نمایش قابل مشاهده باشند یا برخی از تعاملات ممکن است فقط در برخی از مرورگرها کند باشد.

نظارت واقعی کاربر اطلاعات دقیقی را در مورد تعاملات کاربر در وب‌سایت شما ارائه می‌دهد.

این ابزارها به داده‌های گوگل نزدیک هستند، زیرا گوگل هم معیارهای خود را از کاربران واقعی جمع‌آوری می‌کند و می‌تواند سفرهای پیچیده کاربر و تجربیات وارد شده را ردیابی کند.

با این حال، ابزارهای نظارت بر کاربر واقعی معمولاً به ابزارهای پولی نیاز دارند و شما باید یک قطعه کد را در وب‌سایت خود نصب کنید.

تو می‌توانی DebugBear را به مدت 14 روز به صورت رایگان امتحان کنی.

استفاده از این نسخه آزمایشی رایگان به شما این امکان را می‌دهد:

1. فوراً تأثیر بهینه‌سازی‌های خود را ببینید، به جای انتظار 28 روز برای نتایج گوگل.
2. عملکرد را در کل وب‌سایت خود پیگیری کنید.
3. صفحات پربازدیدی را شناسایی کنید که در آن کاربران تعاملات آهسته‌ای را تجربه می‌کنند.
4. ببینید چگونه عملکرد در سراسر جهان، در دستگاه‌ها و در انواع مختلف صفحات وب‌سایت شما متفاوت است.