নতুন INP মেট্রিক কিভাবে JavaScript ফ্রেমওয়ার্ক এবং লাইব্রেরি ব্যবহার করে তৈরি করা সাইটের অভিজ্ঞতাকে প্রভাবিত করে তা বুঝুন।
ক্রোম সম্প্রতি ক্রোম ইউএক্স রিপোর্ট রিপোর্টে একটি নতুন পরীক্ষামূলক প্রতিক্রিয়া মেট্রিক চালু করেছে। এই মেট্রিক, যা আমরা এখন ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) হিসাবে জানি পৃষ্ঠায় ব্যবহারকারীর ইন্টারঅ্যাকশনের সামগ্রিক প্রতিক্রিয়া পরিমাপ করে। আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করে তৈরি ওয়েবসাইটগুলি এই মেট্রিকের সাথে কোথায় দাঁড়িয়েছে সে সম্পর্কে আজ আমরা অন্তর্দৃষ্টি শেয়ার করতে চাই। আমরা আলোচনা করতে চাই কেন INP ফ্রেমওয়ার্কের সাথে প্রাসঙ্গিক এবং কিভাবে অরোরা এবং ফ্রেমওয়ার্ক প্রতিক্রিয়াশীলতাকে অপ্টিমাইজ করতে কাজ করছে।
পটভূমি
ওয়েবসাইটের লোড প্রতিক্রিয়া পরিমাপ করতে কোর ওয়েব ভাইটালস ( CWV ) এর অংশ হিসাবে Chrome প্রথম ইনপুট বিলম্ব ( FID ) ব্যবহার করে। FID প্রথম ব্যবহারকারীর মিথস্ক্রিয়া থেকে ব্রাউজার ইন্টারঅ্যাকশনের সাথে সংযুক্ত ইভেন্ট হ্যান্ডলারগুলিকে প্রক্রিয়া করতে সক্ষম হওয়া পর্যন্ত অপেক্ষার সময় পরিমাপ করে। এতে ইভেন্ট হ্যান্ডলার প্রক্রিয়াকরণ, একই পৃষ্ঠায় পরবর্তী মিথস্ক্রিয়া প্রক্রিয়া বা ইভেন্ট কলব্যাক চালানোর পর পরবর্তী ফ্রেম আঁকার সময় অন্তর্ভুক্ত করা হয় না। যাইহোক, পৃষ্ঠার জীবনচক্র জুড়ে ব্যবহারকারীর অভিজ্ঞতার জন্য প্রতিক্রিয়াশীলতা অত্যন্ত গুরুত্বপূর্ণ কারণ ব্যবহারকারীরা একটি পৃষ্ঠা লোড হওয়ার পরে প্রায় 90% সময় ব্যয় করে।
INP ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়া জানাতে একটি ওয়েব পৃষ্ঠায় যে সময় লাগে তা পরিমাপ করে যখন ব্যবহারকারী ইন্টারঅ্যাকশন শুরু করে তখন থেকে পরবর্তী ফ্রেমটি স্ক্রিনে আঁকা না হওয়া পর্যন্ত। INP-এর মাধ্যমে, আমরা পৃষ্ঠার জীবনচক্রে সমস্ত মিথস্ক্রিয়াগুলির অনুভূত বিলম্বিততার জন্য একটি সামগ্রিক পরিমাপ সক্ষম করার আশা করি৷ আমরা বিশ্বাস করি যে INP ওয়েব পৃষ্ঠাগুলির লোড এবং রানটাইম প্রতিক্রিয়াশীলতার আরও সঠিক অনুমান প্রদান করবে৷
যেহেতু FID শুধুমাত্র প্রথম ইন্টারঅ্যাকশনের ইনপুট বিলম্ব পরিমাপ করে, তাই সম্ভবত ওয়েব ডেভেলপাররা তাদের CWV উন্নতি প্রক্রিয়ার অংশ হিসাবে পরবর্তী মিথস্ক্রিয়াগুলি সক্রিয়ভাবে অপ্টিমাইজ করেনি। সাইটগুলি, বিশেষ করে যাদের ইন্টারঅ্যাক্টিভিটির উচ্চ মাত্রা রয়েছে, তাই এই মেট্রিকে ভাল করার জন্য কঠোর পরিশ্রম শুরু করতে হবে।
কাঠামোর ভূমিকা
যেহেতু অনেক ওয়েবসাইট ইন্টারঅ্যাকটিভিটি প্রদানের জন্য জাভাস্ক্রিপ্টের উপর নির্ভর করে, তাই INP স্কোর প্রাথমিকভাবে মূল থ্রেডে প্রক্রিয়াকৃত জাভাস্ক্রিপ্টের পরিমাণ দ্বারা প্রভাবিত হবে। জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক আধুনিক ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্টের একটি অপরিহার্য অংশ এবং ডেভেলপারদের রাউটিং, ইভেন্ট হ্যান্ডলিং এবং জাভাস্ক্রিপ্ট কোডের কম্পার্টমেন্টালাইজেশনের জন্য মূল্যবান বিমূর্ততা প্রদান করে। এইভাবে, তাদের ব্যবহার করে এমন ওয়েবসাইটগুলির প্রতিক্রিয়াশীলতা এবং ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করার ক্ষেত্রে তাদের কেন্দ্রীয় ভূমিকা রয়েছে।
ফ্রেমওয়ার্কগুলি আগে ওয়েবসাইটগুলির জন্য FID উন্নত করে আরও ভাল প্রতিক্রিয়াশীলতার জন্য পদক্ষেপ নিয়েছে। যাইহোক, তাদের এখন উপলব্ধ প্রতিক্রিয়াশীলতা মেট্রিক ডেটা বিশ্লেষণ করতে হবে এবং চিহ্নিত কোন ফাঁকগুলি সমাধানের দিকে কাজ করতে হবে। সাধারণভাবে, INP-তে পাসের হার কম থাকে এবং পরিমাপ প্রক্রিয়ার পার্থক্যের জন্য অতিরিক্ত কোড অপ্টিমাইজেশন প্রয়োজন। নিম্নলিখিত সারণীটি কেন তা সংক্ষিপ্ত করে।
ক্রোমের অরোরা টিম ওপেন সোর্স ওয়েব ফ্রেমওয়ার্কের সাথে কাজ করে যাতে ডেভেলপারদের পারফরম্যান্স এবং CWV মেট্রিক্স সহ ব্যবহারকারীর অভিজ্ঞতার বিভিন্ন দিক উন্নত করতে সহায়তা করে। INP প্রবর্তনের মাধ্যমে, আমরা ফ্রেমওয়ার্ক-ভিত্তিক ওয়েবসাইটগুলির জন্য CWV মেট্রিক্সের পরিবর্তনের জন্য প্রস্তুত হতে চাই। আমরা CrUX রিপোর্টে পরীক্ষামূলক প্রতিক্রিয়াশীলতা মেট্রিকের উপর ভিত্তি করে ডেটা সংগ্রহ করেছি। ফ্রেমওয়ার্ক-ভিত্তিক ওয়েবসাইটগুলির জন্য INP মেট্রিকে স্থানান্তর সহজ করতে আমরা অন্তর্দৃষ্টি এবং অ্যাকশন আইটেমগুলি ভাগ করব৷
পরীক্ষামূলক প্রতিক্রিয়াশীলতা মেট্রিক ডেটা
200 মিলিসেকেন্ডের নিচে বা সমান একটি INP ভাল প্রতিক্রিয়াশীলতা নির্দেশ করে। CrUX রিপোর্টের ডেটা এবং জুন 2023-এর CWV প্রযুক্তি রিপোর্ট জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলির প্রতিক্রিয়া সম্পর্কে নিম্নলিখিত তথ্য দেয়।
সারণীটি একটি ভাল প্রতিক্রিয়াশীলতা স্কোর সহ প্রতিটি কাঠামোর উত্সের শতাংশ দেখায়। সংখ্যাগুলো উৎসাহব্যঞ্জক কিন্তু আমাদের বলুন যে উন্নতির অনেক জায়গা আছে।
কিভাবে জাভাস্ক্রিপ্ট INP প্রভাবিত করে?
ক্ষেত্রের আইএনপি মানগুলি ল্যাবে পর্যবেক্ষণ করা মোট ব্লকিং টাইম (টিবিটি) এর সাথে ভালভাবে সম্পর্কযুক্ত। এটি বোঝাতে পারে যে কোনও স্ক্রিপ্ট যা দীর্ঘ সময়ের জন্য মূল থ্রেডকে ব্লক করে তা INP-এর জন্য খারাপ হবে। যে কোনো ইন্টারঅ্যাকশনের পরে ভারী জাভাস্ক্রিপ্ট এক্সিকিউশন একটি বর্ধিত সময়ের জন্য মূল থ্রেডকে ব্লক করতে পারে এবং সেই মিথস্ক্রিয়াটির প্রতিক্রিয়া বিলম্বিত করতে পারে। কিছু সাধারণ কারণ যা স্ক্রিপ্ট ব্লক করার দিকে পরিচালিত করে:
অঅপ্টিমাইজ করা জাভাস্ক্রিপ্ট: অপ্রয়োজনীয় কোড বা দুর্বল কোড-বিভাজন এবং লোডিং কৌশলগুলি জাভাস্ক্রিপ্ট ব্লোট করতে পারে এবং দীর্ঘ সময়ের জন্য প্রধান থ্রেড ব্লক করতে পারে। কোড-বিভাজন, প্রগতিশীল লোডিং, এবং দীর্ঘ টাস্কগুলি ভেঙে দেওয়া প্রতিক্রিয়ার সময়কে যথেষ্ট উন্নত করতে পারে।
তৃতীয় পক্ষের স্ক্রিপ্ট: তৃতীয় পক্ষের স্ক্রিপ্ট , যা কখনও কখনও একটি মিথস্ক্রিয়া প্রক্রিয়া করার জন্য প্রয়োজন হয় না (উদাহরণস্বরূপ, বিজ্ঞাপন স্ক্রিপ্ট), মূল থ্রেড ব্লক করতে পারে এবং অপ্রয়োজনীয় বিলম্ব ঘটাতে পারে। প্রয়োজনীয় স্ক্রিপ্টগুলিকে অগ্রাধিকার দেওয়া তৃতীয় পক্ষের স্ক্রিপ্টগুলির নেতিবাচক প্রভাব কমাতে সাহায্য করতে পারে।
একাধিক ইভেন্ট হ্যান্ডলার: প্রতিটি ইন্টারঅ্যাকশনের সাথে যুক্ত একাধিক ইভেন্ট হ্যান্ডলার, প্রত্যেকে একটি ভিন্ন স্ক্রিপ্ট চালায়, একে অপরের সাথে হস্তক্ষেপ করতে পারে এবং দীর্ঘ বিলম্বের কারণ হতে পারে। এই কাজগুলির মধ্যে কিছু অপ্রয়োজনীয় হতে পারে এবং ওয়েব কর্মী বা ব্রাউজারটি নিষ্ক্রিয় থাকা অবস্থায় নির্ধারিত হতে পারে৷
ইভেন্ট পরিচালনার উপর ফ্রেমওয়ার্ক ওভারহেড: ইভেন্ট পরিচালনার জন্য ফ্রেমওয়ার্কগুলিতে অতিরিক্ত বৈশিষ্ট্য/সিনট্যাক্স থাকতে পারে। উদাহরণস্বরূপ, Vue ইভেন্ট শ্রোতাদের উপাদানগুলির সাথে সংযুক্ত করতে v-on ব্যবহার করে, যখন কৌণিক ব্যবহারকারী ইভেন্ট হ্যান্ডলারদের মোড়ানো হয়। এই বৈশিষ্ট্যগুলি বাস্তবায়নের জন্য ভ্যানিলা জাভাস্ক্রিপ্টের উপরে অতিরিক্ত ফ্রেমওয়ার্ক কোড প্রয়োজন৷
হাইড্রেশন: একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করার সময়, একটি সার্ভারের জন্য একটি পৃষ্ঠার জন্য প্রাথমিক এইচটিএমএল তৈরি করা অস্বাভাবিক নয় যা তারপর ইভেন্ট হ্যান্ডলার এবং অ্যাপ্লিকেশন অবস্থার সাথে বৃদ্ধি করা প্রয়োজন যাতে এটি একটি ওয়েব ব্রাউজারে ইন্টারেক্টিভ হতে পারে। এই প্রক্রিয়াটিকে আমরা হাইড্রেশন বলি। লোডের সময় এটি একটি ভারী প্রক্রিয়া হতে পারে, জাভাস্ক্রিপ্ট লোড হতে এবং হাইড্রেশন শেষ হতে কতক্ষণ সময় নেয় তার উপর নির্ভর করে। এটি এমন পৃষ্ঠাগুলিকেও দেখাতে পারে যেন সেগুলি ইন্টারেক্টিভ নয় যখন তারা না থাকে৷ প্রায়ই পৃষ্ঠা লোডের সময় বা অলসভাবে হাইড্রেশন স্বয়ংক্রিয়ভাবে ঘটে (উদাহরণস্বরূপ, ব্যবহারকারীর মিথস্ক্রিয়ায়) এবং টাস্ক শিডিউলিংয়ের কারণে INP বা প্রক্রিয়াকরণের সময়কে প্রভাবিত করতে পারে। রিঅ্যাক্টের মতো লাইব্রেরিতে, আপনি
useTransitionলিভারেজ করতে পারেন যাতে একটি কম্পোনেন্ট রেন্ডারের কিছু অংশ পরবর্তী ফ্রেমে থাকে এবং আরও ব্যয়বহুল পার্শ্ব-প্রতিক্রিয়া ভবিষ্যতের ফ্রেমে ছেড়ে দেওয়া হয়। এটি দেওয়া হয়েছে, একটি পরিবর্তনের আপডেট যা ক্লিকের মতো আরও জরুরি আপডেটের জন্য একটি প্যাটার্ন হতে পারে যা INP এর জন্য ভাল হতে পারে।প্রিফেচিং: পরবর্তী নেভিগেশনগুলির জন্য প্রয়োজনীয় সংস্থানগুলি আক্রমনাত্মকভাবে প্রিফেচ করা সঠিকভাবে সম্পন্ন হলে পারফরম্যান্স জয় হতে পারে। যাইহোক, যদি আপনি SPA রুটগুলিকে সিঙ্ক্রোনাসভাবে প্রিফেচ এবং রেন্ডার করেন, তাহলে আপনি INP কে নেতিবাচকভাবে প্রভাবিত করতে পারেন কারণ এই সমস্ত ব্যয়বহুল রেন্ডারিং একটি একক ফ্রেমে সম্পূর্ণ করার প্রচেষ্টা। আপনার রুটটি প্রিফেচ না করার এবং পরিবর্তে প্রয়োজনীয় কাজটি বন্ধ করার (উদাহরণস্বরূপ,
fetch()) এবং পেইন্ট আনব্লক করার সাথে এর বৈপরীত্য। আপনার ফ্রেমওয়ার্কের প্রিফেচিং পদ্ধতিটি সর্বোত্তম UX প্রদান করছে কিনা এবং কীভাবে এটি INP-কে প্রভাবিত করতে পারে তা আমরা পুনরায় পরীক্ষা করার পরামর্শ দিই।
এখন থেকে, একটি ভাল INP স্কোরের জন্য, বিকাশকারীদেরকে পৃষ্ঠায় প্রতিটি ইন্টারঅ্যাকশনের পরে কার্যকর করা কোডটি পর্যালোচনা করার উপর ফোকাস করতে হবে এবং তাদের চঙ্কিং, রিহাইড্রেশন, লোডিং কৌশল এবং প্রথম উভয়ের জন্য প্রতিটি রেন্ডার() আপডেটের আকার অপ্টিমাইজ করতে হবে- পার্টি এবং তৃতীয় পক্ষের স্ক্রিপ্ট,
অরোরা এবং ফ্রেমওয়ার্কগুলি কীভাবে আইএনপি সমস্যাগুলি সমাধান করছে?
Aurora সাধারণ সমস্যাগুলির বেকড-ইন সমাধান প্রদানের জন্য সর্বোত্তম অনুশীলনগুলি অন্তর্ভুক্ত করে কাঠামোর সাথে কাজ করে। আমরা Next.js, Nuxt.js, Gatsby, এবং Angular-এর সাথে এমন সমাধান নিয়ে কাজ করেছি যা কার্যক্ষমতা অপ্টিমাইজ করার জন্য কাঠামোর মধ্যে শক্তিশালী ডিফল্ট প্রস্তাব করে। এই প্রসঙ্গে আমাদের কাজের হাইলাইটগুলি নিম্নরূপ:
প্রতিক্রিয়া এবং Next.js: Next.js স্ক্রিপ্ট উপাদান তৃতীয় পক্ষের স্ক্রিপ্টগুলির অদক্ষ লোডিংয়ের কারণে সৃষ্ট সমস্যাগুলি সমাধান করতে সহায়তা করে। শেয়ার্ড কোডের জন্য ছোট আকারের খণ্ডগুলিকে অনুমতি দেওয়ার জন্য Next.js-এ দানাদার চঙ্কিং চালু করা হয়েছিল। এটি সমস্ত পৃষ্ঠায় ডাউনলোড করা অব্যবহৃত সাধারণ কোডের পরিমাণ কমাতে সাহায্য করে। আমরা Next.js-এর সাথে কাজ করছি যাতে তাদের Analytics পরিষেবার অংশ হিসেবে INP ডেটা পাওয়া যায়।
কৌণিক: সার্ভার-সাইড রেন্ডারিং এবং হাইড্রেশন উন্নতিগুলি অন্বেষণ করতে Aurora Angular দলের সাথে অংশীদারিত্ব করছে ৷ এছাড়াও আমরা ইভেন্ট পরিচালনার পরিমার্জন এবং INP উন্নত করতে সনাক্তকরণ পরিবর্তন করার পরিকল্পনা করি।
Vue এবং Nuxt.js: আমরা প্রধানত স্ক্রিপ্ট লোডিং এবং রেন্ডারিংয়ের সাথে সহযোগিতার উপায়গুলি অন্বেষণ করছি৷
কিভাবে ফ্রেমওয়ার্ক INP উন্নত করার বিষয়ে চিন্তা করছে?
প্রতিক্রিয়া এবং Next.js
React.js টাইম স্লাইসিং , startTransition এবং Suspense মাধ্যমে বাস্তবায়িত, আপনাকে নির্বাচনী বা প্রগতিশীল হাইড্রেশনে অপ্ট-ইন করতে দেয়। এর মানে হল যে হাইড্রেশন একটি সিঙ্ক্রোনাস ব্লক নয়। এটি ছোট ছোট স্লাইসে করা হয় যা যেকোনো সময়ে বাধাপ্রাপ্ত হয়।
এটি INP উন্নত করতে সাহায্য করবে এবং আপনাকে কীস্ট্রোক, স্থানান্তরের সময় হোভার ইফেক্ট এবং ক্লিকগুলিতে আরও দ্রুত প্রতিক্রিয়া জানাতে সক্ষম করবে। এটি স্বয়ংক্রিয়-সম্পূর্ণ হওয়ার মতো বড় ট্রানজিশনের জন্যও প্রতিক্রিয়া অ্যাপগুলিকে প্রতিক্রিয়াশীল রাখতে সহায়তা করে।
Next.js একটি নতুন রাউটিং ফ্রেমওয়ার্ক প্রয়োগ করেছে যা রুট ট্রানজিশনের জন্য ডিফল্টরূপে startTransition ব্যবহার করে। এটি Next.js সাইটের মালিকদের রিঅ্যাক্ট টাইম-স্লাইসিং গ্রহণ করতে এবং রুট ট্রানজিশনের প্রতিক্রিয়াশীলতা উন্নত করতে দেয়।
কৌণিক
কৌণিক দলটি বেশ কয়েকটি ধারণা অন্বেষণ করছে যা আইএনপি-তেও সাহায্য করবে:
- জোনলেস: প্রাথমিক বান্ডিলের আকার কমিয়ে দেয়, এবং প্রয়োজনীয় কোড যা একটি অ্যাপ কিছু রেন্ডার করার আগে লোড করতে হবে।
- হাইড্রেশন: দ্বীপ-শৈলী হাইড্রেশন সীমিত করতে কতটা অ্যাপকে ইন্টারঅ্যাকশনের জন্য জাগ্রত করতে হবে।
- সিডির ওভারহেড হ্রাস করুন: উদাহরণস্বরূপ, পরিবর্তন সনাক্তকরণকে কম ব্যয়বহুল করুন, অ্যাপটি কম পরীক্ষা করার উপায় খুঁজুন এবং কী পরিবর্তিত হয়েছে সে সম্পর্কে প্রতিক্রিয়াশীল সংকেতগুলি ব্যবহার করুন৷
- আরও দানাদার কোড-বিভাজন: প্রাথমিক বান্ডিলটিকে ছোট করুন।
- লোডিং সূচকগুলির জন্য আরও ভাল সমর্থন: : উদাহরণস্বরূপ, SSR রি-রেন্ডারের সময়, রুট নেভিগেশনের সময় এবং অলস লোডিং অপারেশনে।
- প্রোফাইলিং টুল: ইন্টারঅ্যাকশন খরচ বোঝার জন্য আরও ভালো ডেভ টুল, বিশেষ করে নির্দিষ্ট ইন্টারঅ্যাকশনের জন্য পরিবর্তন সনাক্তকরণ খরচের কাছাকাছি।
এই বর্ধিতকরণগুলির মাধ্যমে, আমরা বিভিন্ন সমস্যার সমাধান করতে পারি যা দুর্বল প্রতিক্রিয়াশীলতা এবং ব্যবহারকারীর অভিজ্ঞতার দিকে পরিচালিত করে এবং ফ্রেমওয়ার্ক-ভিত্তিক ওয়েবসাইটগুলির জন্য CWV মেট্রিক্স এবং নতুন INP মেট্রিককে বাড়িয়ে তোলে।
উপসংহার
আমরা আশা করি যে INP স্কোর ভবিষ্যতে প্রতিক্রিয়াশীলতা এবং কর্মক্ষমতা উন্নত করতে ওয়েবসাইটগুলির জন্য আরও ভাল কম্পাস প্রদান করবে। 2023 সালে ফ্রেমওয়ার্ক ডেভেলপারদের জন্য আরও কার্যকরী টিপস প্রদানের জন্য আমরা আমাদের বিদ্যমান INP গাইড তৈরি করব। আমরা আশা করি এর দ্বারা এটি অর্জন করতে পারব:
- ফ্রেমওয়ার্ক এবং ওয়েব ডেভেলপারদের জন্য INP-তে ফিল্ড ডেটাতে সহজে অ্যাক্সেসের জন্য চ্যানেল তৈরি করা।
- বৈশিষ্ট্যগুলি তৈরি করতে কাঠামোর সাথে কাজ করুন যা ডিফল্টরূপে INP উন্নত করবে৷
আমরা ফ্রেমওয়ার্ক ব্যবহারকারীদের কাছ থেকে প্রতিক্রিয়া স্বাগত জানাই কারণ তারা তাদের INP অপ্টিমাইজেশান যাত্রা শুরু করে।