নেক্সট পেইন্ট (INP) টুল সমর্থনের সাথে ইন্টারঅ্যাকশন

Brendan Kenny

Elizabeth Sweeny

নতুন পেন্ডিং রেসপন্সিভনেস মেট্রিক , ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP)-এর জন্য প্রথম রাউন্ড টুলিং সাপোর্ট পেয়ে আমরা রোমাঞ্চিত। নিজেই মেট্রিক সম্পর্কে জানতে, অফিসিয়াল INP মেট্রিক গাইডটি দেখুন।

প্রস্তাবিত পরিমাপ

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

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

আপনার প্রকৃত ব্যবহারকারীরা কী অনুভব করছেন তা আবিষ্কার করুন (ক্ষেত্র ডেটা)

PageSpeed ​​Insights দেখুন

PageSpeed ​​Insights Chrome User Experience (CrUX) Report API থেকে ফিল্ড ডেটা টেনে আনে এবং আপনার পৃষ্ঠার একটি স্ন্যাপশট দেয় এবং আগের 28 দিনের মূল কার্যক্ষমতা দেয়৷ এই ডেটাতে এখন 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);
});

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

ওয়েব ভাইটাল ক্রোম এক্সটেনশন

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

Chrome এর জন্য ওয়েব ভাইটাল এক্সটেনশন ইনস্টল করুন।

কর্মক্ষমতা সমস্যা নির্ণয় (ল্যাব ডেটা)

Lighthouse ব্যবহারকারী প্রবাহ ব্যবহার করুন

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

লাইটহাউস ব্যবহারকারী প্রবাহ ব্যবহার করে মিথস্ক্রিয়াগুলির একই সিরিজ স্বয়ংক্রিয় হতে পারে। Lighthouse 9.6 অনুযায়ী ব্যবহারকারীর প্রবাহে INP উপলব্ধ।

টুল প্রাপ্যতা বিশদ

• ক্রোম ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন (CrUX)
  • BigQuery : INP interaction_to_next_paint হিসাবে উপলব্ধ
  • CrUX API : INP interaction_to_next_paint হিসাবে উপলব্ধ
  • CrUX ড্যাশবোর্ড : INP ডেটা অন্তর্ভুক্ত করে
• পেজস্পিড ইনসাইট
  • pagespeed.web.dev : CrUX API থেকে পৃষ্ঠা-স্তর এবং অরিজিন-লেভেল INP ফিল্ড ডেটা 'পরবর্তী পেইন্টের সাথে ইন্টারঅ্যাকশন' হিসাবে প্রকাশিত হয়েছে
  • PSI API : INP INTERACTION_TO_NEXT_PAINT_MS হিসাবে উপলব্ধ
• web-vitals JS লাইব্রেরি
  • web-vitals INP সমর্থন অন্তর্ভুক্ত করে
• ওয়েব ভাইটাল ক্রোম এক্সটেনশন
  • CrUX API থেকে পাওয়া গেলে স্থানীয় INP পরিমাপ এবং INP ফিল্ড ডেটা অন্তর্ভুক্ত করে
• বাতিঘর
  • DevTools-এ লাইটহাউস প্যানেল : Chrome ক্যানারি (104) এ 'টাইমস্প্যান' মোডে INP পরিমাপ উপলব্ধ
  • বাতিঘর এনপিএম মডিউল : টাইমস্প্যানে INP পরিমাপ পাওয়া যায় (সিন্থেটিক ইনপুটের জন্য পাপেটিয়ার ব্যবহার করুন)

ভবিষ্যতে কাজ এবং প্রতিক্রিয়া জন্য অনুরোধ

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

আপনার যদি মেট্রিকের উপযোগিতা থেকে কোনো বিষয়ে প্রতিক্রিয়া থাকে, পরিমাপ সহজ করার জন্য, দয়া করে সেটিকে ওয়েব-ভিটালস-ফিডব্যাক Google গ্রুপে আনুন।