ক্রোম ১৪৭-এ সফট নেভিগেশন অরিজিনের চূড়ান্ত ট্রায়াল শুরু হচ্ছে।

Barry Pollard

Michal Mocny

প্রকাশিত: ২০ এপ্রিল, ২০২৬

ক্রোম এই বছরের শেষের দিকে সফট নেভিগেশনস এপিআই চালু করার পরিকল্পনা করছে, যা নিয়ে আমরা আগে থেকেই পরীক্ষা-নিরীক্ষা করছিলাম । এর প্রস্তুতি হিসেবে, আমরা ক্রোম ১৪৭ থেকে ক্রোম ১৪৯ পর্যন্ত আরও একটি অরিজিন ট্রায়াল চালু করছি। এই ট্রায়ালটি পূর্ববর্তী ট্রায়ালগুলো থেকে প্রাপ্ত মতামতকে অন্তর্ভুক্ত করে এপিআই-এর প্রত্যাশিত চূড়ান্ত রূপ তৈরি করবে। আমরা এই ফিচারে আগ্রহী ওয়েবসাইট মালিকদেরকে এপিআই প্রকাশের আগে এর প্রত্যাশিত চূড়ান্ত রূপটি পরীক্ষা করে দেখার জন্য উৎসাহিত করছি।

সফট নেভিগেশন বলতে কী বোঝায়?

"সফট নেভিগেশন" হলো এমন একটি প্রক্রিয়া যেখানে জাভাস্ক্রিপ্ট কোনো নেভিগেশনকে (যেমন, কোনো লিঙ্কে ক্লিক করা) বাধা দেয় এবং নতুন কোনো পৃষ্ঠা লোড না করে, বিদ্যমান পৃষ্ঠার বিষয়বস্তুই আপডেট করে, যদিও অ্যাড্রেস বারে URL-টি ঠিকই আপডেট হয়ে যায়। ব্যবহারকারীদের কাছে এগুলো প্রচলিত নেভিগেশনের মতোই দেখায়, কিন্তু ব্রাউজারের দৃষ্টিকোণ থেকে পৃষ্ঠাটি মূল পৃষ্ঠাই থেকে যায়।

সফট নেভিগেশন এপিআই-এর প্রয়োজনীয়তা

সফট নেভিগেশন এপিআই হলো সিঙ্গেল পেজ অ্যাপ্লিকেশন (এসপিএ) সাইটগুলোতে ব্যবহৃত সফট নেভিগেশন শনাক্ত করার জন্য একটি প্রস্তাবিত এপিআই। যেহেতু সফট নেভিগেশনের ক্ষেত্রে কোনো প্রকৃত পেজ নেভিগেশন ঘটে না, তাই জাভাস্ক্রিপ্টকে ম্যানুয়ালি এমন কিছু কাজ পরিচালনা করতে হয় যা সাধারণত একটি সাধারণ নেভিগেশনের ক্ষেত্রে হয়ে থাকে। নেভিগেশন হিস্ট্রি ম্যানেজমেন্টের মতো কিছু কাজ বর্তমান এপিআইগুলোর মাধ্যমে করা সম্ভব। তবে, কোর ওয়েব ভাইটালস পরিমাপের মতো অন্যান্য কাজগুলো এই নেভিগেশনগুলোর জন্য করা সম্ভব নয়।

সফট নেভিগেশন এপিআই সফট নেভিগেশন পর্যবেক্ষণ করার সুযোগ দেয়। যদিও যে জাভাস্ক্রিপ্ট সফট নেভিগেশন শুরু করে (সাধারণত একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক) সেটি নেভিগেশন কখন ঘটে তা জানতে পারে, কিন্তু সাইট দ্বারা ব্যবহৃত অন্যান্য জাভাস্ক্রিপ্ট (উদাহরণস্বরূপ, অ্যানালিটিক্স স্ক্রিপ্ট) এবং স্বয়ং ব্রাউজার তা জানতে পারে না।

কোর ওয়েব ভাইটালস এবং এসপিএ

সফট নেভিগেশন এপিআই-এর অন্যতম প্রধান উদ্দেশ্য হলো এসপিএ-গুলির জন্য কোর ওয়েব ভাইটালস পরিমাপের সুযোগ করে দেওয়া। কোর ওয়েব ভাইটালস পরিমাপ করা হয় ব্রাউজারের মাধ্যমে (যা ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্টের মতো টুলিং-এ প্রদর্শিত হয়) এবং রিয়েল ইউজার মনিটরিং (RUM) সলিউশন ব্যবহারকারী সাইট মালিকদের দ্বারা।

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

কীভাবে এপিআই এসপিএ-এর জন্য কোর ওয়েব ভাইটালস পরিমাপ সক্ষম করে

সফট নেভিগেশন এপিআই দুটি নতুন পারফরম্যান্স এন্ট্রি চালু করেছে:

• একটি SoftNavigationEntry এন্ট্রি যা তখন নির্গত হয় যখন সফট নেভিগেশনের সমস্ত প্রয়োজনীয়তা পূরণ হয়। এর মধ্যে অন্তর্ভুক্ত থাকে: যে ইন্টারঅ্যাকশনের কারণে সফট নেভিগেশনটি ঘটেছে তার জন্য একটি interactionId , একটি অনন্য navigationId , নতুন URL-এ সেট করা একটি name এবং বিভিন্ন পেইন্ট টাইমিং যা সফট নেভিগেশনের প্রথম কন্টেন্টফুল পেইন্ট পরিমাপ করতে ব্যবহার করা যেতে পারে।
• একটি InteractionContentfulPaint এন্ট্রি যা সফট নেভিগেশনের জন্য LCP পরিমাপ করতে ইন্টারঅ্যাকশনের পরে একাধিক, ক্রমবর্ধমান আকারের, কন্টেন্টফুল পেইন্ট পরিমাপ করার সুযোগ দেয়।

এই নতুন এন্ট্রিগুলো যথাক্রমে soft-navigation এবং interaction-contentful-paint টাইপ ব্যবহার করে PerformanceObserver-এর মাধ্যমে পর্যবেক্ষণ করা যায়।

এপিআইটি largest-contentful-paint , interaction-contentful-paint , event-timing , এবং layout-shift পারফরম্যান্স এন্ট্রিগুলোর (এবং অন্যান্য) প্রত্যেকটিকে একটি আইডেন্টিফায়ার, navigationId , অন্তর্ভুক্ত করার জন্য প্রসারিত করে, যা এন্ট্রিটি যে নেভিগেশনের জন্য তা নির্দেশ করে। যেহেতু PerformanceObserver রা পেজটি নিষ্ক্রিয় না হওয়া পর্যন্ত পারফরম্যান্স এন্ট্রিগুলো পর্যবেক্ষণ করে না, তাই যে ইভেন্টটি পারফরম্যান্স এন্ট্রি তৈরি করেছে এবং আপনার এটি পর্যবেক্ষণের মধ্যে কিছুটা সময় অতিবাহিত হতে পারে। এটি বিশেষত তখন ঘটে যখন পেজটি খুব ব্যস্ত থাকে, উদাহরণস্বরূপ, সফট নেভিগেশনের সময়। এই navigationId মানটি এন্ট্রিগুলোকে সঠিক নেভিগেশনের সাথে যুক্ত করতে সাহায্য করে।

কিছু interaction-contentful-paint এন্ট্রি ন্যাভিগেশনের আগে এবং কিছু পরে ঘটতে পারে। সফট ন্যাভিগেশন ঘটাতে পারে এমন সমস্ত পেইন্ট ট্র্যাক করার পরিবর্তে, soft-navigation এন্ট্রিতে একটি largestInteractionContentfulPaint এন্ট্রি অন্তর্ভুক্ত থাকে, যা হলো এই সময় পর্যন্ত দেখা সবচেয়ে বড় পেইন্ট।

একত্রে, এগুলি কোর ওয়েব ভাইটালস পরিমাপ করতে সক্ষম করে:

• LCP : প্রাথমিক পেজ লোডের জন্য largest-contentful-paint এবং সফট নেভিগেশনের জন্য নতুন interaction-contentful-paint ও soft-navigation এন্ট্রিগুলো ব্যবহার করা হচ্ছে।
• CLS : সফট নেভিগেশনের জন্য layout-shift এন্ট্রি ব্যবহার করা এবং soft-navigation এন্ট্রির উপর ভিত্তি করে সেগুলোকে স্লাইস করা।
• INP : event এন্ট্রি ব্যবহার করা এবং সফট নেভিগেশনের জন্য soft-navigation এন্ট্রির উপর ভিত্তি করে সেগুলোকে স্লাইস করা।
• FCP : প্রাথমিক পেজ লোডের জন্য first-contentful-paint ব্যবহার করা হচ্ছে এবং সফট নেভিগেশনের জন্য নতুন soft-navigation এন্ট্রিগুলোতে পেইন্ট টাইমিংয়ের বিস্তারিত তথ্য দেওয়া হচ্ছে।

আরও বিস্তারিত তথ্যের জন্য, সফট নেভিগেশন ডকুমেন্টেশন দেখুন।

সফট নেভিগেশন কীভাবে চালু করা হয়?

নিম্নলিখিত ঘটনা ঘটলে সফট নেভিগেশন এপিআই একটি সফট নেভিগেশন চালু করে:

• ব্যবহারকারীর একটি মিথস্ক্রিয়া ঘটে,
• … যার ফলে ব্যবহারকারীর কাছে বিষয়বস্তু দৃশ্যমান হয়,
• … এবং একটি URL আপডেট ঘটে।

দুটি কারণে এপিআইটি কোনো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ককে সফট নেভিগেশন "এমিট" করতে দেওয়া বা নেভিগেশন এপিআই-এর উপর ভিত্তি করে কিছু তৈরি করার পরিবর্তে এই পদ্ধতি গ্রহণ করে:

1. প্রথমত, এর মধ্যে বিদ্যমান সমস্ত এসপিএ সাইট অন্তর্ভুক্ত রয়েছে এবং সেই সাইটগুলিতে কোনও পরিবর্তনের প্রয়োজন নেই।
2. দ্বিতীয়ত, এটি একটি ফ্রেমওয়ার্ক বা ডেভেলপার কীভাবে নেভিগেশন পরিচালনা করে তা নির্বিশেষে, সফট নেভিগেশন বলতে কী বোঝায় সে সম্পর্কে একটি সামঞ্জস্যপূর্ণ ধারণা তৈরি করে।

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

ফ্রেমওয়ার্ক এবং ডেভেলপারদের পছন্দের উপর নির্ভর করার পরিবর্তে, ব্রাউজারের মধ্যে সফট নেভিগেশন ডিটেকশন অন্তর্ভুক্ত করা একটি প্রামাণিক সংজ্ঞা প্রতিষ্ঠা করে, যা বৃহৎ পরিসরে সফট নেভিগেশনের জন্য কোর ওয়েব ভাইটালস পরিমাপ করতে সক্ষম করে এবং এই পরিমাপগুলোকে তুলনীয় করে তোলে।

ফ্রেমওয়ার্ক এবং ডেভেলপাররা সফট নেভিগেশন এপিআই উপেক্ষা করে তাদের পছন্দ অনুযায়ী অতিরিক্ত পারফরম্যান্স মেট্রিক পরিমাপ করার জন্য অন্তর্নিহিত ইভেন্ট টাইমিং, লেআউট ইনস্টেবিলিটি এপিআই এবং নতুন InteractionContentfulPaint পারফরম্যান্স এন্ট্রি ব্যবহার করতে পারেন। তবে, বিভিন্ন সাইট এবং টুলিং জুড়ে সামঞ্জস্যপূর্ণ পরিমাপ নিশ্চিত করতে আমরা কোর ওয়েব ভাইটালস পরিমাপের জন্য এপিআই ব্যবহারের সুপারিশ করি।

সফট নেভিগেশন এপিআই পরীক্ষা করতে সাহায্য প্রয়োজন।

সফট নেভিগেশন এপিআই (API) পরীক্ষা করতে এবং একটি সফট নেভিগেশন কখন ঘটে সে সম্পর্কে এটি আপনার প্রত্যাশার সাথে সঠিকভাবে মেলে কিনা তা নির্ধারণ করতে আমাদের আপনার সাহায্য প্রয়োজন। যখন আপনি মনে করেন যে সফট নেভিগেশন ঘটেছে, তখন কি এপিআই তা রিপোর্ট করতে ব্যর্থ হয়? বিপরীতভাবে, এপিআই কি এমন নেভিগেশন অতিরিক্ত রিপোর্ট করে যা আপনি নেভিগেশন হিসেবে বিবেচনা করেন না?

শেষ অরিজিন ট্রায়ালের পর থেকে কী পরিবর্তন হয়েছে?

এই সর্বশেষ সংস্করণের প্রধান পরিবর্তন হলো, সফট নেভিগেশন থেকে InteractionContentfulPaint বিচ্ছিন্ন করা, যাতে ঐ পারফরম্যান্স এন্ট্রিটির অন্যান্য ব্যবহারের সুযোগ তৈরি হয়, এবং SoftNavigationEntry তে অতিরিক্ত largestInteractionContentfulPaint অ্যাট্রিবিউটটি যুক্ত করা।

ওয়েবসাইটের দৃষ্টিকোণ থেকে, এপিআই-তে এখন সফট নেভিগেশন হিসেবে replaceState ও অন্তর্ভুক্ত করা হয়েছে, কারণ আমরা আপনাদের মতামত শুনেছি যে অনেক পরিস্থিতিতে এটিকে একটি নেভিগেশন হিসেবে বিবেচনা করা গুরুত্বপূর্ণ। অন্য কোনো ক্ষেত্রে যেখানে এপিআই কোনো সফট নেভিগেশন শনাক্ত করে না, সে সম্পর্কে আমরা জানতে আগ্রহী।

আমরা এর বাস্তবায়নে আরও অগণিত উন্নতি সাধন করেছি। সর্বশেষ সংস্করণে ঠিক কী কী পরিবর্তন হয়েছে, তা যারা জানতে চান, তারা সফট নেভিগেশন চেঞ্জলগ- এ সমস্ত পরিবর্তনের একটি বিস্তারিত ইতিহাস খুঁজে পেতে পারেন।

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

কিভাবে পরীক্ষা করতে

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

এপিআই সম্পর্কে আরও প্রযুক্তিগত বিবরণের জন্য, বিশেষ করে কোর ওয়েব ভাইটালস কীভাবে পরিমাপ করতে হয় , তা জানতে আমাদের ডকুমেন্টেশন বা গিটহাব রিপোজিটরি দেখুন।

এছাড়াও, web-vitals লাইব্রেরির একটি পরীক্ষামূলক সফট নেভিগেশন সংস্করণ GitHub এবং npm-এ পাওয়া যায়।

আরও সহজ একটি পরীক্ষার জন্য, ক্রোম ১৪৫ সংস্করণ থেকে ক্রোম ডেভটুলস-এর পারফরম্যান্স প্যানেলটি ফিচারটি চালু না করা সত্ত্বেও পারফরম্যান্স ট্রেস-এ সফট নেভিগেশন দেখাচ্ছে:

প্রতিক্রিয়া

এপিআই (API) সম্পর্কিত মতামত গিটহাব (GitHub)-এ ইস্যু হিসেবে জানান, এবং ক্রোমিয়াম (Chromium) ইমপ্লিমেন্টেশনের বাগগুলো ক্রোমের (Chrome) ইস্যু ট্র্যাকারে রিপোর্ট করুন। আপনার মতামত কোন বিভাগের অন্তর্ভুক্ত, তা নিয়ে যদি আপনি অনিশ্চিত থাকেন, তবে খুব বেশি চিন্তা করবেন না। আমরা উভয় জায়গাতেই মতামত পেতে পছন্দ করি, এবং আমরা উভয় জায়গার ইস্যুগুলো বাছাই করে সঠিক স্থানে পাঠিয়ে দেব।