Interaction to Next Paint (INP) টুল সংক্রান্ত সহায়তা

Brendan Kenny

Elizabeth Sweeny

নতুন পেন্ডিং রেসপন্সিভনেস মেট্রিক, Interaction to Next Paint (INP)-এর জন্য প্রথম রাউন্ডের টুলিং সহায়তা পেয়ে আমরা খুব আনন্দিত। মেট্রিক সম্পর্কে জানতে, INP মেট্রিকের অফিসিয়াল নির্দেশিকা দেখুন।

সাজেস্ট করা পরিমাপ

INP পরিমাপ করার লক্ষ্য হল, ব্যবহারকারীর ইনপুটে আপনার পৃষ্ঠা কত দ্রুত রেসপন্স করে তা বোঝা। বাস্তবসম্মত ডেটা পাওয়ার একমাত্র উপায় হল, ফিল্ড থেকে পাওয়া ডেটা ব্যবহার করে আপনার সাইটে আসা আসল ব্যবহারকারীদের জন্য আপনার পৃষ্ঠা কীভাবে প্রতিক্রিয়া জানাচ্ছে তা পরিমাপ করা।

ল্যাবে INP পরিমাপ করলে, ইভেন্টের সময় এবং কোথায় অপ্টিমাইজ করতে হবে তা আরও ভালোভাবে বুঝতে সাহায্য করে। ল্যাব টুল পৃষ্ঠার সাথে অটোমেটিক ইন্টার‍্যাক্ট করবে না, তাই পরিমাপ করার সময় ম্যানুয়াল ইনপুট দিতে হবে অথবা Puppeteer-এর মতো অটোমেশন টুলের সাহায্যে স্ক্রিপ্ট করতে হবে। সাধারণ ব্যবহারকারীর জার্নি থেকে মূল ইন্টার‍্যাকশন শনাক্ত করা হলে, সমস্যা শনাক্ত করতে বা স্ক্রিপ্ট তৈরি করতে সেগুলি ব্যবহার করা যেতে পারে এবং রিগ্রেশন প্রতিরোধ করতে CI টেস্টে রাখা যেতে পারে।

আপনার আসল ব্যবহারকারীরা কী অভিজ্ঞতা পাচ্ছেন তা জানুন (ফিল্ড ডেটা)

PageSpeed Insights দেখুন

PageSpeed Insights, Chrome ব্যবহারকারীর অভিজ্ঞতা (CrUX) রিপোর্ট API থেকে ফিল্ড ডেটা নেয় এবং গত ২৮ দিনে আপনার পৃষ্ঠা ও অরিজিনের পারফর্ম্যান্সের একটি স্ন্যাপশট দেয়। এই ডেটাতে এখন INP অন্তর্ভুক্ত:

PageSpeed Insights-এ এটি ব্যবহার করে দেখুন।

ফিল্ড থেকে আপনার নিজস্ব INP ভ্যালু সংগ্রহ করা

আপনি যদি নিজেই কোনও সাইটের জন্য INP ডেটা সংগ্রহ করতে চান, তাহলে তা করার সবচেয়ে সহজ উপায় হল web-vitals লাইব্রেরি, যার বিটা রিলিজে এখন সম্পূর্ণ INP সাপোর্ট রয়েছে।

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

web-vitals সম্পর্কে এবং DevTools কনসোলে কীভাবে পরিমাপ করতে হয় সেই বিষয়ে আরও পড়ুন।

Web Vitals Chrome এক্সটেনশন

Web Vitals এক্সটেনশন আপনার ব্যবহারকারীদের পৃষ্ঠা দেখার অভিজ্ঞতা (CrUX API থেকে) এবং CWV-এর রিয়েল-টাইম ভ্যালু এবং পৃষ্ঠায় বর্তমান ভিজিটের মূল মেট্রিক, দুটিরই ওভারভিউ দেয়।

Chrome-এর জন্য Web Vitals এক্সটেনশন ইনস্টল করুন।

পারফর্ম্যান্স সংক্রান্ত সমস্যা ডায়াগনসিস করা (ল্যাব ডেটা)

লাইটহাউস ইউজার ফ্লো ব্যবহার করা

DevTools-এর Lighthouse প্যানেলে নতুন টাইমস্প্যান মোড আপনাকে Lighthouse শুরু করতে, আপনার ইচ্ছামতো টেস্ট পৃষ্ঠার সাথে ইন্টার‍্যাক্ট করতে এবং তারপরে সেই সময়ে কী ঘটেছে তার একটি রিপোর্ট পেতে দেয়। এই রিপোর্টে এখন INP এবং রেসপন্সিভনেস সংক্রান্ত যেকোনও সমস্যা ডায়াগনসিস করতে সাহায্য করার জন্য একটি অডিট অন্তর্ভুক্ত করা হয়েছে।

Lighthouse ব্যবহারকারীর ফ্লো ব্যবহার করে একই ধরনের ইন্টার‍্যাকশনের সিরিজ অটোমেট করা যেতে পারে। Lighthouse 9.6 থেকে ব্যবহারকারীর ফ্লোতে INP উপলভ্য।

টুলের উপলভ্যতা সংক্রান্ত বিবরণ

• Chrome ব্যবহারকারীর অভিজ্ঞতা সংক্রান্ত রিপোর্ট (CrUX)
  • BigQuery: interaction_to_next_paint হিসেবে INP উপলভ্য
  • CrUX API: INP interaction_to_next_paint হিসেবে উপলভ্য
  • CrUX ড্যাশবোর্ড: INP ডেটা অন্তর্ভুক্ত করে
• PageSpeed Insights
  • pagespeed.web.dev: CrUX API থেকে পাওয়া পৃষ্ঠা-লেভেল ও অরিজিন-লেভেল INP ফিল্ড ডেটা 'Interaction to Next Paint' হিসেবে দেখানো হয়
  • PSI API: INP INTERACTION_TO_NEXT_PAINT_MS হিসেবে উপলভ্য
• web-vitals JS লাইব্রেরি
  • web-vitals-এ INP সংক্রান্ত সহায়তা অন্তর্ভুক্ত আছে
• Web Vitals Chrome এক্সটেনশন
  • CrUX API থেকে উপলভ্য হলে, স্থানীয় INP পরিমাপ এবং INP ফিল্ড ডেটা অন্তর্ভুক্ত করে
• Lighthouse
  • DevTools-এ Lighthouse প্যানেল: Chrome Canary (104)-এ 'টাইমস্প্যান' মোডে INP পরিমাপ উপলভ্য
  • Lighthouse npm মডিউল: টাইমস্প্যানে INP পরিমাপ উপলভ্য (সিন্থেটিক ইনপুটের জন্য পাপেটিয়ার ব্যবহার করুন)

ভবিষ্যতে কী কী কাজ করা হবে এবং মতামত জানানোর অনুরোধ

ভবিষ্যতে, Chrome ট্যুলিং টিম INP-এর জন্য ডিবাগ করার ক্ষমতা এবং অপ্টিমাইজেশন সংক্রান্ত পরামর্শে বিনিয়োগ করা চালিয়ে যাবে।

মেট্রিকের উপযোগিতা থেকে শুরু করে পরিমাপের সুবিধা পর্যন্ত যেকোনও বিষয়ে আপনার মতামত থাকলে, তা web-vitals-feedback Google গ্রুপে জানান।