নরম নেভিগেশন পরিমাপ সঙ্গে পরীক্ষা

ব্যারি পোলার্ড
ইয়োভ ওয়েইস

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

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

অনেক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক এই মডেলটি ব্যবহার করে, কিন্তু প্রতিটি আলাদা ভাবে। যেহেতু এটি ব্রাউজার ঐতিহ্যগতভাবে "পৃষ্ঠা" হিসাবে যা বোঝে তার বাইরে, তাই এটি পরিমাপ করা সবসময়ই কঠিন ছিল: বর্তমান পৃষ্ঠায় একটি মিথস্ক্রিয়াটির মধ্যে লাইনটি কোথায় আঁকা হবে, বনাম এটিকে একটি নতুন পৃষ্ঠা হিসাবে বিবেচনা করা হবে?

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

একটি নরম নেভিগেশন কি?

আমরা একটি নরম ন্যাভিগেশনের নিম্নলিখিত সংজ্ঞা নিয়ে এসেছি:

  • নেভিগেশন একটি ব্যবহারকারী ক্রিয়া দ্বারা সূচনা করা হয়.
  • নেভিগেশনের ফলে ব্যবহারকারীর কাছে দৃশ্যমান URL পরিবর্তন এবং একটি ইতিহাস পরিবর্তন হয়।
  • নেভিগেশনের ফলে একটি DOM পরিবর্তন হয়।

কিছু সাইটের জন্য, এই হিউরিস্টিকগুলি মিথ্যা ইতিবাচক (যা ব্যবহারকারীরা সত্যিই একটি "নেভিগেশন" ঘটেছে বলে মনে করবে না) বা মিথ্যা নেতিবাচক (যেখানে ব্যবহারকারী এই মানদণ্ডগুলি পূরণ না করা সত্ত্বেও একটি "নেভিগেশন" ঘটেছে বলে মনে করেন) হতে পারে। আমরা হিউরিস্টিকসের নরম নেভিগেশন স্পেসিফিকেশন ভান্ডারে প্রতিক্রিয়া স্বাগত জানাই।

কিভাবে ক্রোম নরম নেভিগেশন বাস্তবায়ন করে?

একবার সফট নেভিগেশন হিউরিস্টিকস সক্ষম হয়ে গেলে (পরবর্তী বিভাগে এটি সম্পর্কে আরও), Chrome কিছু পারফরম্যান্স মেট্রিক্স রিপোর্ট করার উপায় পরিবর্তন করবে:

  • প্রতিটি সফ্ট নেভিগেশন সনাক্ত হওয়ার পরে একটি soft-navigation PerformanceTiming ইভেন্ট নির্গত হবে৷
  • কর্মক্ষমতা API একটি soft-navigation টাইমিং এন্ট্রিতে অ্যাক্সেস প্রদান করবে, যেমনটি soft-navigation PerformanceTiming ইভেন্ট দ্বারা নির্গত হয়।
  • ফার্স্ট পেইন্ট (FP) , ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) , লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) মেট্রিক্স রিসেট করা হবে, এবং এগুলোর পরবর্তী উপযুক্ত ঘটনাতে পুনরায় নির্গত করা হবে। (দ্রষ্টব্য: FP, এবং FCP বাস্তবায়িত হয় না।)
  • ইভেন্টটি যে নেভিগেশন এন্ট্রির সাথে সম্পর্কিত ছিল তার সাথে সম্পর্কিত প্রতিটি পারফরম্যান্সের সময়গুলিতে একটি navigationId অ্যাট্রিবিউট যোগ করা হবে ( first-paint , first-contentful-paint , largest-contentful-paint , first-input-delay , event এবং layout-shift ) থেকে, Cumulative Layout Shift (CLS) এবং ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) গণনা করার অনুমতি দেয়।

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

ক্রোমে নরম নেভিগেশন সক্ষম করার প্রভাব কী?

এই বৈশিষ্ট্যটি সক্ষম করার পরে সাইটের মালিকদের বিবেচনা করতে হবে এমন কিছু পরিবর্তন নিম্নরূপ:

  • অতিরিক্ত FP, FCP, এবং LCP ইভেন্টগুলি নরম নেভিগেশনের জন্য পুনরায় নির্গত হতে পারে। ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্ট (CrUX) এই অতিরিক্ত মানগুলিকে উপেক্ষা করবে, কিন্তু এটি আপনার সাইটে যেকোনও রিয়েল ইউজার মেজারমেন্ট (RUM) পর্যবেক্ষণকে প্রভাবিত করতে পারে। আপনার RUM প্রদানকারীর সাথে যোগাযোগ করুন যদি আপনার কোন উদ্বেগ থাকে যে এটি সেই পরিমাপগুলিকে প্রভাবিত করবে কিনা। নরম নেভিগেশনের জন্য কোর ওয়েব ভাইটাল পরিমাপের বিভাগটি দেখুন।
  • আপনার পারফরম্যান্স এন্ট্রিগুলিতে নতুন (এবং ঐচ্ছিক) navigationID বৈশিষ্ট্যটি এই এন্ট্রিগুলি ব্যবহার করে আপনার অ্যাপ্লিকেশন কোডে বিবেচনা করা প্রয়োজন হতে পারে।
  • শুধুমাত্র Chromium-ভিত্তিক ব্রাউজার এই নতুন মোড সমর্থন করবে। যদিও অনেক নতুন মেট্রিক শুধুমাত্র Chromium-ভিত্তিক ব্রাউজারে উপলব্ধ, কিছু (FCP, LCP) অন্যান্য ব্রাউজারে উপলব্ধ, এবং সবাই হয়তো Chromium-ভিত্তিক ব্রাউজারগুলির সর্বশেষ সংস্করণে আপগ্রেড করেনি। তাই সচেতন থাকুন যে কিছু ব্যবহারকারী নরম-নেভিগেশন মেট্রিক্সের প্রতিবেদন নাও করতে পারে।
  • একটি পরীক্ষামূলক নতুন বৈশিষ্ট্য হিসাবে যা ডিফল্টরূপে সক্ষম নয়, সাইটগুলিকে এই বৈশিষ্ট্যটি পরীক্ষা করা উচিত যাতে অন্য কোনও অনিচ্ছাকৃত পার্শ্ব-প্রতিক্রিয়া নেই।

সফ্ট নেভিগেশনের জন্য কীভাবে মেট্রিক্স পরিমাপ করবেন সে সম্পর্কে আরও তথ্যের জন্য, মেজারিং কোর ওয়েব ভাইটাল প্রতি সফ্ট নেভিগেশন বিভাগটি দেখুন।

আমি কিভাবে Chrome এ নরম নেভিগেশন সক্ষম করব?

সফ্ট নেভিগেশনগুলি Chrome-এ ডিফল্টরূপে সক্ষম করা হয় না, তবে এই বৈশিষ্ট্যটি স্পষ্টভাবে সক্ষম করে পরীক্ষা-নিরীক্ষার জন্য উপলব্ধ।

ডেভেলপারদের জন্য, chrome://flags/#enable-experimental-web-platform-features এ এক্সপেরিমেন্টাল ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য পতাকা চালু করে বা --enable-experimental-web-platform-features কমান্ড লাইন ব্যবহার করে এটি সক্ষম করা যেতে পারে ক্রোম চালু করার সময় যুক্তি।

আমি কিভাবে নরম নেভিগেশন পরিমাপ করতে পারি?

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

নরম নেভিগেশন রিপোর্ট

নরম নেভিগেশন পর্যবেক্ষণ করতে আপনি একটি PerformanceObserver ব্যবহার করতে পারেন। নিম্নলিখিত একটি উদাহরণ কোড স্নিপেট যা কনসোলে সফ্ট নেভিগেশন এন্ট্রিগুলি লগ করে— buffered বিকল্প ব্যবহার করে এই পৃষ্ঠায় আগের সফ্ট নেভিগেশনগুলি সহ:

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

এটি পূর্ববর্তী নেভিগেশনের জন্য পূর্ণ-জীবনের পৃষ্ঠা মেট্রিক্স চূড়ান্ত করতে ব্যবহার করা যেতে পারে।

উপযুক্ত ইউআরএলের বিরুদ্ধে মেট্রিক রিপোর্ট করুন

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

সঠিক PerformanceEntry navigationId বৈশিষ্ট্যটি ইভেন্টটিকে সঠিক ইউআরএলে টাই করতে ব্যবহার করা যেতে পারে। এটি PerformanceEntry API এর সাথে দেখা যেতে পারে:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const pageUrl = navEntry?.name;

এই pageUrl অতীতে ব্যবহার করা বর্তমান ইউআরএলের পরিবর্তে সঠিক ইউআরএলের বিরুদ্ধে মেট্রিক রিপোর্ট করতে ব্যবহার করা উচিত।

নরম নেভিগেশন startTime পাওয়া

নেভিগেশন শুরুর সময় একইভাবে প্রাপ্ত করা যেতে পারে:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const startTime = navEntry?.startTime;

startTime হল প্রাথমিক ইন্টারঅ্যাকশনের সময় (উদাহরণস্বরূপ, একটি বোতাম ক্লিক) যা নরম নেভিগেশন শুরু করে।

সফ্ট নেভিগেশন সহ সমস্ত পারফরম্যান্সের সময় প্রাথমিক "কঠিন" পৃষ্ঠা নেভিগেশন সময় থেকে একটি সময় হিসাবে রিপোর্ট করা হয়৷ অতএব, নরম নেভিগেশন লোডিং মেট্রিক সময় (উদাহরণস্বরূপ LCP) বেসলাইন করার জন্য নরম নেভিগেশন শুরুর সময় প্রয়োজন, পরিবর্তে এই নরম নেভিগেশন সময়ের সাথে সম্পর্কিত।

সফট নেভিগেশন প্রতি কোর ওয়েব ভাইটাল পরিমাপ

সফ্ট নেভিগেশন মেট্রিক এন্ট্রিগুলি অন্তর্ভুক্ত করতে, আপনাকে অন্তর্ভুক্ত করতে হবে সফ্ট নেভিগেশন অবজারভেশনস: আপনার পারফরম্যান্স পর্যবেক্ষকের observe কলে includeSoftNavigationObservations: true ৷

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout Shift time:', entry);
  }
}).observe({type: 'layout-shift', buffered: true, includeSoftNavigationObservations: true});

Chrome-এ সফ্ট নেভিগেশন বৈশিষ্ট্য সক্রিয় করার পাশাপাশি observe পদ্ধতিতে অতিরিক্ত includeSoftNavigationObservations পতাকা প্রয়োজন। পারফরম্যান্স পর্যবেক্ষক স্তরে এই সুস্পষ্ট অপ্ট-ইনটি নিশ্চিত করার জন্য যে বিদ্যমান কর্মক্ষমতা পর্যবেক্ষকরা এই অতিরিক্ত এন্ট্রিগুলির দ্বারা অবাক না হন কারণ নরম নেভিগেশনগুলির জন্য কোর ওয়েব ভাইটালগুলি পরিমাপ করার চেষ্টা করার সময় কিছু অতিরিক্ত বিবেচনা বিবেচনা করা প্রয়োজন৷

মূল "হার্ড" নেভিগেশন শুরুর সময়ের ক্ষেত্রে এখনও সময়গুলি ফেরত দেওয়া হবে৷ সুতরাং উদাহরণস্বরূপ একটি নরম নেভিগেশনের জন্য এলসিপি গণনা করতে, আপনাকে সফ্ট নেভিগেশনের সাথে সম্পর্কিত একটি সময় পেতে পূর্বে বিশদ হিসাবে উপযুক্ত সফ্ট নেভিগেশন শুরুর সময়টি বিয়োগ করতে হবে। উদাহরণস্বরূপ, LCP এর জন্য:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const softNavEntry =
      performance.getEntriesByType('soft-navigation').filter(
        (navEntry) => navEntry.navigationId === entry.navigationId
      )[0];
    const hardNavEntry = performance.getEntriesByType('navigation')[0];
    const navEntry = softNavEntry || hardNavEntry;
    const startTime = navEntry?.startTime;
    console.log('LCP time:', entry.startTime - startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true, includeSoftNavigationObservations: true});

কিছু মেট্রিক্স ঐতিহ্যগতভাবে পৃষ্ঠার পুরো জীবন জুড়ে পরিমাপ করা হয়েছে: LCP, উদাহরণস্বরূপ, একটি মিথস্ক্রিয়া না হওয়া পর্যন্ত পরিবর্তন হতে পারে। পৃষ্ঠাটি নেভিগেট না হওয়া পর্যন্ত CLS এবং INP আপডেট করা যেতে পারে। তাই প্রতিটি "নেভিগেশন" (মূল নেভিগেশন সহ) প্রতিটি নতুন সফট নেভিগেশন ঘটলে পূর্ববর্তী পৃষ্ঠার মেট্রিক্স চূড়ান্ত করতে হতে পারে। এর মানে প্রাথমিক "হার্ড" নেভিগেশন মেট্রিক্স স্বাভাবিকের আগে চূড়ান্ত করা হতে পারে।

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

নেভিগেশনের মধ্যে যে বিষয়বস্তু একই থাকে তা কীভাবে বিবেচনা করা উচিত?

নরম নেভিগেশনের জন্য FP, FCP, এবং LCP শুধুমাত্র নতুন পেইন্ট পরিমাপ করবে। এর ফলে একটি ভিন্ন LCP হতে পারে, উদাহরণস্বরূপ, সেই নরম নেভিগেশনের কোল্ড লোড থেকে নরম লোড পর্যন্ত।

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

যেমন এই উদাহরণটি দেখায়, সফ্ট নেভিগেশনের জন্য LCP উপাদানটি পৃষ্ঠাটি কীভাবে লোড হয় তার উপর নির্ভর করে ভিন্নভাবে রিপোর্ট করা যেতে পারে—যেমন পৃষ্ঠার আরও নিচে অ্যাঙ্কর লিঙ্ক সহ একটি পৃষ্ঠা লোড করার ফলে একটি ভিন্ন LCP উপাদান হতে পারে।

কিভাবে TTFB পরিমাপ?

একটি প্রচলিত পৃষ্ঠা লোডের জন্য টাইম টু ফার্স্ট বাইট (TTFB) মূল অনুরোধের প্রথম বাইট ফেরত দেওয়ার সময়কে প্রতিনিধিত্ব করে।

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

একটি সহজ পদ্ধতি হল নরম নেভিগেশনের জন্য 0-এর TTFB রিপোর্ট করা—যেমন আমরা ব্যাক/ফরওয়ার্ড ক্যাশে পুনরুদ্ধারের জন্য সুপারিশ করি। এই পদ্ধতিটি web-vitals লাইব্রেরি নরম নেভিগেশনের জন্য ব্যবহার করে।

ভবিষ্যতে, আমরা কোন অনুরোধটি নরম নেভিগেশনের "নেভিগেশন অনুরোধ" তা জানার আরও সুনির্দিষ্ট উপায় সমর্থন করতে পারি এবং আরও সুনির্দিষ্ট TTFB পরিমাপ করতে সক্ষম হব। কিন্তু এটি বর্তমান পরীক্ষার অংশ নয়।

পুরানো এবং নতুন উভয় পরিমাপ কিভাবে?

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

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

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

নরম নেভিগেশনের জন্য কোর ওয়েব ভাইটাল পরিমাপ করতে web-vitals লাইব্রেরি ব্যবহার করুন

সমস্ত সূক্ষ্মতা বিবেচনা করার সবচেয়ে সহজ উপায় হল web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা যা একটি পৃথক soft-navs branch নরম নেভিগেশনের জন্য পরীক্ষামূলক সমর্থন রয়েছে (যা npm এবং unpkg এও উপলব্ধ)। এটি নিম্নলিখিত উপায়ে পরিমাপ করা যেতে পারে (যথাযথভাবে doTraditionalProcessing এবং doSoftNavProcessing প্রতিস্থাপন করা):

import {
  onTTFB,
  onFCP,
  onLCP,
  onCLS,
  onINP,
} from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';

onTTFB(doTraditionalProcessing);
onFCP(doTraditionalProcessing);
onLCP(doTraditionalProcessing);
onCLS(doTraditionalProcessing);
onINP(doTraditionalProcessing);

onTTFB(doSoftNavProcessing, {reportSoftNavs: true});
onFCP(doSoftNavProcessing, {reportSoftNavs: true});
onLCP(doSoftNavProcessing, {reportSoftNavs: true});
onCLS(doSoftNavProcessing, {reportSoftNavs: true});
onINP(doSoftNavProcessing, {reportSoftNavs: true});

পূর্বে উল্লিখিত হিসাবে সঠিক URL-এর বিপরীতে মেট্রিক্স রিপোর্ট করা হয়েছে তা নিশ্চিত করুন।

web-vitals লাইব্রেরি নরম নেভিগেশনের জন্য নিম্নলিখিত মেট্রিক্স রিপোর্ট করে:

মেট্রিক বিস্তারিত
টিটিএফবি 0 হিসাবে রিপোর্ট করা হয়েছে।
FCP পৃষ্ঠার জন্য শুধুমাত্র প্রথম FCP রিপোর্ট করা হয়।
এলসিপি পরবর্তী বৃহত্তম কন্টেন্টফুল পেইন্টের সময়, নরম নেভিগেশন শুরুর সময়ের সাপেক্ষে। পূর্ববর্তী নেভিগেশন থেকে উপস্থিত বিদ্যমান পেইন্টগুলি বিবেচনা করা হয় না। তাই, LCP হবে >= 0। যথারীতি, এটি একটি ইন্টারঅ্যাকশনের সময় রিপোর্ট করা হবে, অথবা যখন পৃষ্ঠাটি ব্যাকগ্রাউন্ড করা হবে, তখনই LCP চূড়ান্ত করা যাবে।
সিএলএস নেভিগেশন সময়ের মধ্যে স্থানান্তরের সবচেয়ে বড় উইন্ডো। যথারীতি, এটি যখন পৃষ্ঠাটি ব্যাকগ্রাউন্ড করা হয় তখনই CLS চূড়ান্ত করা যেতে পারে। শিফট না হলে একটি 0 মান রিপোর্ট করা হয়।
আইএনপি নেভিগেশন সময়ের মধ্যে INP। যথারীতি এটি একটি ইন্টারঅ্যাকশনের সময় রিপোর্ট করা হবে, অথবা যখন পৃষ্ঠাটি ব্যাকগ্রাউন্ড করা হয় তখনই INP চূড়ান্ত করা যেতে পারে। ইন্টারঅ্যাকশন না থাকলে একটি 0 মান রিপোর্ট করা হয় না।

এই পরিবর্তনগুলি কি মূল ওয়েব ভাইটাল পরিমাপের অংশ হয়ে উঠবে?

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

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

কিভাবে নরম নেভিগেশন CrUX এ রিপোর্ট করা হবে?

CrUX-এ ঠিক কীভাবে নরম নেভিগেশন রিপোর্ট করা হবে, এই পরীক্ষাটি সফল হলে, তাও এখনও নির্ধারণ করা বাকি। বর্তমান "কঠিন" নেভিগেশনগুলিকে যেভাবে বিবেচনা করা হয় সেভাবে তাদের বিবেচনা করা হবে তা অগত্যা প্রদত্ত নয়৷

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

তাই, আমরা এই নরম নেভিগেশনগুলি আলাদাভাবে CrUX-এ রিপোর্ট করার সিদ্ধান্ত নিতে পারি, অথবা প্রদত্ত পৃষ্ঠা বা পৃষ্ঠাগুলির গোষ্ঠীর জন্য মূল ওয়েব ভাইটালগুলি গণনা করার সময় সম্ভবত সেগুলিকে ওজন করতে পারি৷ হিউরিস্টিক বিকশিত হওয়ার সাথে সাথে আমরা আংশিক লোড নরম নেভিগেশন সম্পূর্ণরূপে বাদ দিতে সক্ষম হতে পারি।

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

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

আমরা সক্রিয়ভাবে নিম্নলিখিত জায়গায় এই পরীক্ষায় প্রতিক্রিয়া চাইছি:

চেঞ্জলগ

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

উপসংহার

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

স্বীকৃতি

Unsplash এ জর্ডান মাদ্রিদের থাম্বনেইল চিত্র