بررسی راهکارهای کلیدی برای کاهش INP وب سایت
امروزه و با افزایش درجه اهمیت تجربه کاربری کاربران در ارزیابی عملکرد وب سایتها، معیارهای Core Web Vitals به یکی از ارکان اصلی سنجش کیفیت صفحات وب تبدیل شدهاند. در این میان، Interaction to Next Paint (INP) به عنوان یکی از جدیدترین و دقیقترین شاخصها، نقش به سزایی در سنجش پاسخ گویی واقعی صفحات به تعاملات کاربر ایفا میکند.
برخلاف معیارهایی مانند FID که تنها اولین تعامل را در نظر میگیرند، INP عملکرد کلی صفحه را از منظر تاخیر در تعاملات اندازه گیری میکند و تصویری دقیقتر از تجربه واقعی کاربران ارائه میدهد. در این مقاله، همه چیز درباره کاهش INP وب سایت را یاد میگیرید؛ از شناسایی مشکلات تا راهکارهای بهینه سازی.
Interaction to Next Paint (INP) چیست؟
Interaction to Next Paint (یا به اختصار INP) از جمله جدیدترین معیارهایی است که گوگل برای سنجش کیفیت تجربه کاربری در وب سایتها معرفی کرده است. این معیار بررسی میکند که یک صفحه وب چقدر سریع به تعاملات کاربر پاسخ بصری میدهد. اگر بخواهیم خیلی سادهتر بیان کنیم، هر وقت کاربری عملی انجام میدهد، مثلا روی دکمهای کلیک میکند، INP اندازه میگیرد چقدر طول میکشد تا تغییرات آن روی صفحه نمایش داده شود. بنابراین، کاهش INP وب سایت مساوی است با افزایش سرعت پاسخ گویی سایت و بهبود تجربه واقعی کاربران، که موضوعی است که گوگل نیز توجه ویژهای به آن دارد.
نکته قابل توجه این است که برخلاف بعضی از معیارهای قبلی مثل FID که فقط اولین تعامل را بررسی میکردند، INP همه تعاملهای کاربر در طول بازدید از صفحه را در نظر میگیرد. به همین دلیل، تصویری کاملتر از سرعت پاسخ گویی واقعی سایت به ما میدهد.
اندازه گیری INP در 6 گام
برای درک نحوه اندازه گیری و یا و کاهش INP وب سایت، باید مسیر یک تعامل کاربر تا زمانی که نتیجه آن به صورت بصری روی صفحه ظاهر میشود را مرحله به مرحله بررسی کنیم. INP فقط مربوط به شروع پاسخ نیست، بلکه تمام مراحل از لحظه تعامل کاربر تا نمایش تغییر در صفحه را شامل میشود. این مراحل عبارت اند از:
ثبت تعامل کاربر
این فرایند از زمانی آغاز میشود که کاربر با صفحه تعامل دارد؛ مثلا کلیک میکند، صفحه را لمس میکند یا کلیدی را فشار میدهد. INP فقط این نوع تعاملات مستقیم و عمدی را در نظر میگیرد، چون معمولا انتظار پاسخ فوری از سمت صفحه میرود.
تاخیر در دریافت ورودی (Input Delay)
این مرحله زمانی است که بین تعامل کاربر و شروع پردازش آن توسط مرورگر فاصله میافتد. اگر مرورگر مشغول کار دیگری باشد (مثل اجرای اسکریپتها)، ممکن است در رسیدگی به ورودی تاخیر بیفتد.
زمان پردازش (Processing Time)
بعد از شروع پردازش، مرورگر باید کدهایی مثل Event Handlerهایی که به تعامل وصل شدهاند را اجرا کند. این کدها معمولا با JavaScript نوشته میشوند و بسته به میزان پیچیدگیشان، میتوانند زمانبر باشند.
تاخیر در نمایش (Presentation Delay)
پس از اجرای کدها، مرورگر باید تغییرات لازم را روی صفحه اعمال کند. این مرحله شامل کارهایی مانند اعمال تغییرات CSS و نقاشی مجدد (Repaint) صفحه برای نمایش نتیجه تعامل است.
به روز رسانی بصری (Visual Update)
در نهایت، کاربر نتیجه تعامل را روی صفحه میبیند. مثلا منویی باز میشود، دکمهای تغییر رنگ میدهد یا پیامی نمایش داده میشود. این همان نقطهای است که “Next Paint” اتفاق میافتد.
محاسبه INP
مقدار نهایی INP از جمع این سه بخش اصلی به دست میآید:
- Input Delay
- Processing Time
- Presentation Delay
این عدد، مدت زمان کلی از تعامل کاربر تا پاسخ بصری صفحه را نشان میدهد و معیار دقیقی از سرعت واقعی پاسخ گویی سایت به کاربر ارائه میکند.
3 راهکار اصلی برای کاهش INP وب سایت
اگرچه INP هنوز به صورت کامل به عنوان یکی از معیارهای اصلی Google Core Web Vitals تثبیت نشده و در وضعیت در حال بررسی قرار دارد، اما این به آن معنا نیست که باید روند بهینه سازی را به تعویق بیندازید. برای رسیدن به عملکرد بهتر و تجربه کاربری روان، باید عوامل اصلی کاهش امتیاز INP را بشناسید و هدفمند روی آنها کار کنید. بیایید تا در این جا با 3 مورد اصلی آن بیشتر آشنا شویم.
تسکهای طولانی
ببینید مرورگر شما برای نمایش یک صفحه از وب وظایف مختلفی دارد. از رندر کردن عناصر گرفته تا تحلیل کد HTML و غیره. همه این موارد نیز در قالب تسک شناخته میشوند. غالب این تسکهایی که ما گفتیم در یک مسیر پردازشی به نام رشته اصلی (Main Thread) اجرا میشوند. نکته مهم اینجاست که رشته اصلی فقط میتواند یک تسک را در هر لحظه پردازش کند. به همین دلیل اگر یک تسک زمان زیادی ببرد، سایر وظایف به تعویق میافتند.
حال سوال این است که چه تسکی طولانی است؟ بنابر استانداردهای گوگل اگر اجرای یک تسک بیش از 50 میلی ثانیه زمان ببرد به عنوان یک تسک طولانی شناخته میشود. این باعث میشود که مرورگر نتواند به موقع به درخواستها و اقدامات دیگر کاربران واکنش نشان دهد. برای کاهش INP وب سایت، باید این تسکها را شکسته یا بهینه سازی کنید تا Main Thread آزاد بماند.
اندازه بزرگ DOM
اول از همه بیایید ببینیم DOM چیست. DOM یا Document Object Model ساختاری درختی است که محتوای HTML صفحه را برای مرورگر توصیف میکند. در این ساختار هر عنصر، متن یا کامنت به صورت یک گره در درخت DOM ذخیره میشود. مرورگر نیز با استفاده از این ساختار صفحه را رندر کرده و به تعاملات کاربر پاسخ میدهد. با وجود اینکه DOM برای عملکرد صفحات وب ضروری است؛ ولی افزایش بیش از حد گرهها مسئله ساز است. چرا؟ چون مرورگر برای تحلیل، رندر و بهروزرسانی صفحه، نیاز به منابع پردازشی بیشتری دارد. این موضوع باعث میشود زمان بارگذاری افزایش، واکنش به تعاملات کاربر و پردازش ها کند و در نهایت، امتیاز INP کاهش یابد و تجربه کاربری تضعیف شود.
برای حفظ سرعت و بهبود INP پیشنهاد میشود از HTMLهای تو در تو و غیرضروری خودداری کنید. از کامپوننتهای تکراری و بی هدف استفاده نکنید و موارد دیگر.
رندر سمت کلاینت (Client-side Rendering)
پیش از توضیح درباره رندر سمت کلاینت بهتر است با روش رندر سمت سرور آشنا شوید. در روش رندر سمت سرور، مرورگر HTML را به صورت مرحلهای از سرور دریافت میکند و میتواند بخشهایی از صفحه را زودتر نمایش دهد. این کار باعث میشود مرورگر سریعتر به تعاملات کاربر پاسخ دهد و INP بهتری حاصل شود.
اما در رندر سمت کلاینت، مرورگر ابتدا یک HTML ساده دریافت میکند و سپس با اجرای JavaScript، محتوای صفحه را تولید میکند. این فرآیند ممکن است شامل وظایف سنگین و طولانی باشد که باعث مشغول شدن رشته اصلی مرورگر و در نتیجه تاخیر در پاسخ به تعاملات کاربر میشود.
خلاصه که استفاده از SSR (رندر سمت سرور) یا کاهش حجم JS راهکار مناسبی برای کاهش INP وب سایت است.
چگونه تعاملات کند را با دادههای واقعی شناسایی و رفع کنیم؟
یکی از گامهای مهم برای بهبود نمره INP، اندازه گیری عملکرد سایت و شناسایی تعاملات کند است. یکی از بهترین راهکارها استفاده از دادههای واقعی کاربران است، چون این دادهها تجربه واقعی کاربران هنگام استفاده از سایت را نشان میدهند. اگر بخواهیم این فرایند را به صورت ایدهآل توضیح دهیم باید گفت:
- دادههای میدانی یا Field Data مربوط به INP را جمع آوری کنید.
- تعاملات کند را شناسایی کنید.
- با استفاده از ابزارهای آزمایشگاهی، دلیل کندی آنها را تحلیل و رفع کنید.
گاهی سایت شما ممکن است دادههای میدانی کافی نداشته باشد. در این شرایط، استفاده از ابزارهای آزمایشگاهی بهترین جایگزین است. استفاده از ابزارها و راهکارهایی مثل Lighthouse و PageSpeed Insights به شما کمک میکنند عملکرد سایت را بررسی کنید. شاخصی که باید توجه کنید Total Blocking Time (TBT) است. این معیار نشان میدهد در زمان بارگذاری چقدر صفحه پاسخگو بوده و ارتباط نزدیکی با INP دارد. اگر مقدار TBT بالا باشد، احتمالا تعاملاتی کند در صفحه وجود دارد.
روشهای آزمایش و رفع اشکال
- استفاده از افزونه Web Vitals در کروم: سادهترین راه برای اندازهگیری تاخیر تعاملات است. کافی است گزارش گیری در کنسول را فعال کنید تا لاگهای دقیق هنگام تعاملات را مشاهده کنید.
- ضبط Trace با Chrome DevTools: نوارهای قرمز نشان دهنده وظایف طولانی هستند که باعث کندی شدهاند. این به شما کمک میکند بخشهای مشکل ساز را سریع پیدا کنید.
- حالت Timespan در Lighthouse: در تب Lighthouse، حالت Timespan را انتخاب کنید و شروع به تست کنید. پس از پایان، گزارش INP را فیلتر کنید تا ببینید کدام تعاملات مشکل دارند و زمان صرف شده برای هر مرحله (تاخیر ورودی، پردازش و نمایش) چقدر است.
و در آخر
کاهش INP وب سایت نه تنها بهبود تجربه کاربری را به دنبال دارد، بلکه به بهبود رتبه سایت در موتورهای جستجو نیز کمک میکند. با شناسایی عوامل کندی، استفاده از دادههای میدانی یا ابزارهای آزمایشگاهی و بهینه سازی تسکها و DOM، میتوانید مسیر کاهش INP را به درستی طی کنید و سایتتان را به استانداردهای جدید وب نزدیکتر کنید.
سوالات متداول
INP چه چیزی را اندازه گیری میکند؟
INP مدت زمان بین شروع تعامل کاربر (مثل کلیک) تا زمانی که مرورگر اولین پاسخ بصری به آن تعامل را روی صفحه نمایش دهد، اندازه گیری میکند.
چگونه مقدار INP را کاهش دهیم؟
- تسکهای سنگین جاوا اسکریپت را کوچکتر و سریعتر اجرا کنید.
- DOM را سبک و ساده نگه دارید.
- از SSR یا رندر سمت سرور استفاده کنید.
- تعاملات اصلی را اولویت دهی کنید تا پاسخ سریعی داشته باشند.
منابع
- https://nitropack.io/blog/post/improve-interaction-to-next-paint-inp
دیدگاه (1)
به نظر شما در آینده INP چقدر میتونه جای FID رو در معیارهای اصلی گوگل بگیره؟
۱۱ تیر ۱۴۰۴