নেক্সট পেইন্টের সাথে মিথস্ক্রিয়া আনুষ্ঠানিকভাবে একটি মূল ওয়েব অত্যাবশ্যক 🚀

নেক্সট পেইন্টের সাথে মিথস্ক্রিয়া এখন একটি স্থিতিশীল কোর ওয়েব ভাইটাল মেট্রিক, প্রথম ইনপুট বিলম্বের পরিবর্তে।

Rick Viscomi

আজকের দিনটা! বছরের পর বছর কাজ করার পর, আমরা অবশেষে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) কে একটি স্থিতিশীল কোর ওয়েব ভাইটাল মেট্রিক করতে প্রস্তুত। আমরা যেভাবে ইন্টারঅ্যাকশন প্রতিক্রিয়াশীলতা পরিমাপ করি, ফার্স্ট ইনপুট বিলম্ব (এফআইডি) এর অনেক ত্রুটির সমাধান করে এটি একটি গুরুত্বপূর্ণ পদক্ষেপকে চিহ্নিত করে৷

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

এই পোস্টে, আমরা আজকে ঠিক কী পরিবর্তন হচ্ছে তা দ্রুত পুনরুদ্ধার করব, Chrome সরঞ্জামগুলি থেকে FID অবমূল্যায়ন এবং অপসারণের জন্য একটি আরও নির্দিষ্ট সময়রেখা সেট করব এবং INP সমস্যাগুলি খুঁজে পেতে এবং সমাধান করতে আপনাকে সাহায্য করার জন্য কিছু সংস্থান শেয়ার করব৷

আজ কি পরিবর্তন হচ্ছে

Chrome এর দিকে, আমাদের সমস্ত Core Web Vitals টুল এখন যেখানেই প্রযোজ্য সেখানে INP-এর স্থিতিশীল অবস্থা প্রতিফলিত করবে। উদাহরণস্বরূপ, PageSpeed ​​Insights, CrUX ড্যাশবোর্ড এবং ওয়েব ভাইটালস এক্সটেনশনের মতো টুলগুলি কোর ওয়েব ভাইটালস মেট্রিক্সের ত্রয়ীতে আরও স্পষ্টভাবে INP দেখাবে। পেজস্পিড ইনসাইটস-এ বিশেষভাবে, কোর ওয়েব ভাইটালস অ্যাসেসমেন্ট লজিক FID-এর পরিবর্তে INP পারফরম্যান্সের মূল্যায়ন করবে। অনুসন্ধান কনসোলে সংশ্লিষ্ট পরিবর্তনগুলি সম্পর্কে আরও জানতে, অনুসন্ধান টিমের ব্লগ পোস্ট পড়ুন।

অতিরিক্তভাবে, আজ থেকে কিছু সরঞ্জাম FID-এর জন্য একটি অবচয় নোটিশ প্রদর্শন করতে পারে একটি সতর্কতা হিসাবে যে মেট্রিকটি আর একটি মূল ওয়েব গুরুত্বপূর্ণ নয় এবং এটি সরানো হবে। নিম্নলিখিত FID অবচয় টাইমলাইন বিভাগে আপনি FID থেকে সম্পূর্ণরূপে স্থানান্তরিত হয়েছেন তা নিশ্চিত করতে জানার তারিখগুলি নিয়ে আলোচনা করে৷

FID অবচয় টাইমলাইন

এখন যেহেতু INP একটি কোর ওয়েব ভাইটাল মেট্রিক হিসাবে FID প্রতিস্থাপন করেছে, Chrome আনুষ্ঠানিকভাবে FID-এর জন্য সমর্থন বাতিল করছে৷ এর অর্থ হ'ল Chrome সরঞ্জামগুলি আর FID উপলব্ধতার গ্যারান্টি দেবে না এবং বিকাশকারীদের INP-তে রূপান্তর করার জন্য 9 সেপ্টেম্বর, 2024 পর্যন্ত সময় থাকবে৷

এটি Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন (CrUX) বা PageSpeed ​​Insights API-এর গ্রাহকদের জন্য বিশেষভাবে গুরুত্বপূর্ণ৷ যে অ্যাপ্লিকেশনগুলি এই APIগুলির যে কোনও একটি থেকে FID ডেটা প্রক্রিয়া করে সেগুলিকে অবশ্যই 9 সেপ্টেম্বরের মধ্যে INP তে স্থানান্তর করতে হবে যাতে পরিষেবাতে কোনও বিঘ্ন বা বাধা এড়ানো যায়৷ স্পষ্ট করে বলতে গেলে, এপিআই-এর সর্বশেষ সংস্করণে এটি একটি ব্রেকিং পরিবর্তন হবে, এবং প্রধান সংস্করণ সংখ্যাগুলিতে কোনও বাধা থাকবে না !

INP অপ্টিমাইজ করার জন্য সম্পদ

আপনি প্রথমবার INP-এর দিকে তাকাচ্ছেন বা আপনি একজন প্রতিক্রিয়াশীলতা পেশাদার কিনা তা নির্বিশেষে, আপনি যা খুঁজছেন তা খুঁজে পেতে INP অপ্টিমাইজেশান সংস্থানগুলির সংগ্রহ একটি দুর্দান্ত সূচনা পয়েন্ট৷ ডক্সের এই চিরসবুজ সংগ্রহে মেট্রিকের সংজ্ঞা, স্থানীয়ভাবে এবং বাস্তব ব্যবহারকারীদের সাথে পরিমাপ করার কৌশল, বিভিন্ন ধরনের ব্যবহারের ক্ষেত্রে অপ্টিমাইজ করার জন্য ব্যবহারিক পরামর্শ এবং বাস্তব-বিশ্বের কেস স্টাডির একটি তালিকা যা কার্যের দিকনির্দেশনা দেখায় সবকিছুই কভার করে। .

এই নথিগুলি ব্যবহার করে, এখানে একটি সাধারণ কর্মপ্রবাহ রয়েছে যা আপনি আপনার সাইটে INP সমস্যাগুলি খুঁজে পেতে এবং সমাধান করতে অনুসরণ করতে পারেন:

1. ক্যানোনিকাল INP ডক্সে ব্যবহারকারীর মিথস্ক্রিয়াগুলির প্রতি INP কীভাবে প্রতিক্রিয়াশীলতা পরিমাপ করে তার সাথে নিজেকে পরিচিত করুন৷

2. আপনার সাইটের INP কর্মক্ষমতা মূল্যায়ন করতে বাস্তব-ব্যবহারকারীর ডেটা দেখুন। INP অভিজ্ঞতার কমপক্ষে 75% ভাল হিসাবে বিবেচিত হওয়ার জন্য 200 মিলিসেকেন্ডের মধ্যে ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া জানা উচিত। যদি আপনার সাইটে ইতিমধ্যেই ভাল INP থাকে, তাহলে ঘামবেন না!

   • PageSpeed ​​Insights- এ আপনার URL প্লাগ করুন অথবা আপনার ওয়েবসাইট CrUX ডেটাসেটে অন্তর্ভুক্ত থাকলে, Search Console-এ Core Web Vitals রিপোর্ট দেখুন।

   • আপনার বিশ্লেষণ প্রদানকারীর সাথে চেক করুন যদি তারা INP পর্যবেক্ষণ সমর্থন করে।

   • web-vitals.js ব্যবহার করে আপনার নিজস্ব INP সমাধান রোল করুন।

3. প্রয়োজন হলে, ব্যবহারকারীর অভিজ্ঞতা সম্পর্কে ডায়াগনস্টিক তথ্য সংগ্রহ করার জন্য আপনার সাইটকে ইনস্ট্রুমেন্ট করুন। এটি গুরুত্বপূর্ণ মেটাডেটা যেমন ব্যবহারকারী কোন পৃষ্ঠা উপাদানের সাথে ইন্টারঅ্যাক্ট করেছে এবং কেন এটি ধীরগতির ছিল, সেইসাথে অন্যান্য দরকারী ডেটা। সামগ্রিকভাবে, এই তথ্য আপনাকে উন্নতির সবচেয়ে বড় সুযোগগুলি বুঝতে সাহায্য করবে।

4. Chrome DevTools-এর সাথে স্থানীয়ভাবে ধীর মিথস্ক্রিয়াগুলি পুনরুত্পাদন করুন । এটি আপনাকে হুডের নীচে ঠিক কী ঘটছে এবং আপত্তিকর কোডটি কী তা দেখতে সহায়তা করবে৷

5. ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করার সময় যতটা সম্ভব কম কাজ করার জন্য আপনার কোডটি অপ্টিমাইজ করুন :

   • জাভাস্ক্রিপ্টের দীর্ঘ-চলমান ব্লকগুলি এড়িয়ে চলুন বা ভেঙে দিন ।

   • অপ্রয়োজনীয় জাভাস্ক্রিপ্ট এড়িয়ে চলুন ।

   • বড় রেন্ডারিং আপডেট এড়িয়ে চলুন ।

6. স্থানীয়ভাবে আপনার পরিবর্তনগুলি পরিমাপ করুন এবং আপনার INP কর্মক্ষমতা দ্রুত হচ্ছে (এবং থাকার!) নিশ্চিত করতে আপনার বাস্তব-ব্যবহারকারীর অভিজ্ঞতাগুলি পর্যবেক্ষণ করুন৷

আশা করি, এই নির্দেশিকা আপনাকে INP অপ্টিমাইজ করার সঠিক পথে নিয়ে যাবে। আপনি যদি পথে কোনও সমস্যার সম্মুখীন হন, আপনি স্ট্যাক ওভারফ্লোতে interaction-to-next-paint এর সাথে ট্যাগ করা একটি প্রশ্ন পোস্ট করে সবসময় সাহায্য পেতে পারেন।

একটি কোর ওয়েব ভাইটাল হিসাবে INP চালু করার অনেক দিন হয়েছে, 2021 সালে আরও ভাল প্রতিক্রিয়াশীলতা মেট্রিক তৈরির বিষয়ে আমাদের প্রথম পোস্টে ফিরে তাকানো হচ্ছে৷ তারপর থেকে, আমরা সমস্ত আশ্চর্যজনক সম্প্রদায়ের প্রতিক্রিয়া বিবেচনায় নিয়েছি এবং একটি মেট্রিক তৈরি করেছি যা আমরা দৃঢ়ভাবে বিশ্বাস করি যে ডেভেলপারদের ব্যবহারকারীর অভিজ্ঞতার একটি অনুন্নত ক্ষেত্র উন্নত করার জন্য গাইড করবে, যা শেষ পর্যন্ত একটি ভাল ওয়েবের দিকে নিয়ে যাবে। এই মেট্রিক গঠনে আপনার সাহায্যের জন্য এবং প্রতিক্রিয়াশীলতার অবস্থা উন্নত করার জন্য আপনার সমস্ত কঠোর পরিশ্রমের জন্য আপনাকে ধন্যবাদ!