RAIL মডেল দিয়ে কর্মক্ষমতা পরিমাপ করুন

RAIL হল একটি ব্যবহারকারী-কেন্দ্রিক কর্মক্ষমতা মডেল যা কর্মক্ষমতা সম্পর্কে চিন্তা করার জন্য একটি কাঠামো প্রদান করে। মডেলটি ব্যবহারকারীর অভিজ্ঞতাকে মূল ক্রিয়ায় বিভক্ত করে (উদাহরণস্বরূপ, আলতো চাপুন, স্ক্রোল করুন, লোড করুন) এবং আপনাকে তাদের প্রতিটির জন্য কর্মক্ষমতা লক্ষ্য নির্ধারণে সহায়তা করে।

RAIL হল ওয়েব অ্যাপের জীবনচক্রের চারটি স্বতন্ত্র দিক: প্রতিক্রিয়া, অ্যানিমেশন, নিষ্ক্রিয় এবং লোড। এই প্রসঙ্গগুলির প্রতিটির জন্য ব্যবহারকারীদের বিভিন্ন কর্মক্ষমতা প্রত্যাশা থাকে, তাই ব্যবহারকারীরা কীভাবে বিলম্ব বুঝতে পারে তার প্রসঙ্গ এবং UX গবেষণার উপর ভিত্তি করে কর্মক্ষমতা লক্ষ্যগুলি সংজ্ঞায়িত করা হয়।

RAIL কর্মক্ষমতা মডেলের 4টি অংশ: প্রতিক্রিয়া, অ্যানিমেশন, নিষ্ক্রিয়, এবং লোড৷
RAIL পারফরম্যান্স মডেলের 4টি অংশ

ব্যবহারকারীর উপর ফোকাস করুন

ব্যবহারকারীদের আপনার কর্মক্ষমতা প্রচেষ্টার কেন্দ্রবিন্দু করুন। নীচের সারণীটি ব্যবহারকারীরা কীভাবে পারফরম্যান্স বিলম্ব বুঝতে পারে তার মূল মেট্রিক্স বর্ণনা করে:

পারফরম্যান্স বিলম্ব সম্পর্কে ব্যবহারকারীর ধারণা
0 থেকে 16 ms ব্যবহারকারীরা গতি ট্র্যাকিংয়ে ব্যতিক্রমীভাবে ভাল, এবং অ্যানিমেশনগুলি মসৃণ না হলে তারা এটি অপছন্দ করে। প্রতি সেকেন্ডে 60টি নতুন ফ্রেম রেন্ডার করা হলে তারা অ্যানিমেশনগুলিকে মসৃণ হিসাবে উপলব্ধি করে। এটি প্রতি ফ্রেমে 16 ms, যার মধ্যে ব্রাউজারটির স্ক্রীনে নতুন ফ্রেম আঁকতে সময় লাগে, একটি অ্যাপকে একটি ফ্রেম তৈরি করতে প্রায় 10 ms ছেড়ে যায়।
0 থেকে 100 ms এই সময় উইন্ডোর মধ্যে ব্যবহারকারীর ক্রিয়াগুলির প্রতিক্রিয়া জানান এবং ব্যবহারকারীরা মনে করেন যে ফলাফলটি অবিলম্বে। কোন আর, এবং কর্ম এবং প্রতিক্রিয়া মধ্যে সংযোগ বিচ্ছিন্ন হয়.
100 থেকে 1000 ms এই উইন্ডোর মধ্যে, জিনিসগুলি কাজগুলির একটি স্বাভাবিক এবং ক্রমাগত অগ্রগতির অংশ অনুভব করে। ওয়েবে বেশিরভাগ ব্যবহারকারীর জন্য, পেজ লোড করা বা ভিউ পরিবর্তন করা একটি টাস্ক প্রতিনিধিত্ব করে।
1000 ms বা তার বেশি 1000 মিলিসেকেন্ড (1 সেকেন্ড) ছাড়িয়ে, ব্যবহারকারীরা যে কাজটি করছেন তাতে মনোযোগ হারান।
10000 ms বা তার বেশি 10000 মিলিসেকেন্ড (10 সেকেন্ড) ছাড়িয়ে, ব্যবহারকারীরা হতাশ এবং সম্ভবত কাজগুলি ছেড়ে দিতে পারে৷ তারা পরে ফিরে আসতে পারে আবার নাও আসতে পারে।

লক্ষ্য এবং নির্দেশিকা

RAIL এর পরিপ্রেক্ষিতে, লক্ষ্য এবং নির্দেশিকা শব্দের নির্দিষ্ট অর্থ রয়েছে:

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

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

প্রতিক্রিয়া: 50ms এর নিচে প্রক্রিয়া ইভেন্ট

লক্ষ্য : 100 ms এর মধ্যে ব্যবহারকারীর ইনপুট দ্বারা শুরু করা একটি রূপান্তর সম্পূর্ণ করুন, যাতে ব্যবহারকারীরা মনে করেন যে মিথস্ক্রিয়াগুলি তাত্ক্ষণিক।

নির্দেশিকা :

  • 100 ms এর মধ্যে দৃশ্যমান প্রতিক্রিয়া নিশ্চিত করতে, 50 ms এর মধ্যে ব্যবহারকারীর ইনপুট ইভেন্টগুলি প্রক্রিয়া করুন৷ এটি বেশিরভাগ ইনপুটের ক্ষেত্রে প্রযোজ্য, যেমন বোতামে ক্লিক করা, ফর্ম কন্ট্রোল টগল করা বা অ্যানিমেশন শুরু করা। এটি টাচ ড্র্যাগ বা স্ক্রোলগুলিতে প্রযোজ্য নয়৷

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

  • সম্পূর্ণ হতে 50 ms-এর বেশি সময় নেয় এমন ক্রিয়াগুলির জন্য, সর্বদা প্রতিক্রিয়া প্রদান করুন।

50 ms নাকি 100 ms?

লক্ষ্য হল 100 ms এর নিচে ইনপুট এর সাড়া দেওয়া, তাহলে আমাদের বাজেট শুধুমাত্র 50 ms কেন? এর কারণ হল ইনপুট হ্যান্ডলিং ছাড়াও সাধারণত অন্যান্য কাজ করা হয় এবং সেই কাজটি গ্রহণযোগ্য ইনপুট প্রতিক্রিয়ার জন্য উপলব্ধ সময়ের কিছু অংশ নেয়। যদি কোনো অ্যাপ্লিকেশন অলস সময়ে প্রস্তাবিত 50 ms খণ্ডে কাজ করে, তার মানে ইনপুটটি 50 ms পর্যন্ত সারিবদ্ধ হতে পারে যদি এটি সেই কাজের একটি অংশের সময় ঘটে। এর জন্য অ্যাকাউন্টিং, প্রকৃত ইনপুট পরিচালনার জন্য শুধুমাত্র অবশিষ্ট 50 ms উপলব্ধ রয়েছে বলে ধরে নেওয়া নিরাপদ। এই প্রভাবটি নীচের চিত্রে ভিজ্যুয়ালাইজ করা হয়েছে যা দেখায় কিভাবে একটি নিষ্ক্রিয় কাজের সময় প্রাপ্ত ইনপুট সারিবদ্ধ হয়, উপলব্ধ প্রক্রিয়াকরণের সময় হ্রাস করে:

একটি নিষ্ক্রিয় টাস্কের সময় ইনপুট প্রাপ্ত কিভাবে সারিবদ্ধ করা হয় তা দেখানো ডায়াগ্রাম, উপলব্ধ ইনপুট প্রক্রিয়াকরণের সময়কে 50ms এ হ্রাস করে
কীভাবে নিষ্ক্রিয় কাজগুলি ইনপুট প্রতিক্রিয়া বাজেটকে প্রভাবিত করে৷

অ্যানিমেশন: 10 মিসে একটি ফ্রেম তৈরি করুন

লক্ষ্য :

  • 10 মিসে বা তার কম সময়ে একটি অ্যানিমেশনে প্রতিটি ফ্রেম তৈরি করুন। প্রযুক্তিগতভাবে, প্রতিটি ফ্রেমের জন্য সর্বাধিক বাজেট হল 16 ms (1000 ms / 60 ফ্রেম প্রতি সেকেন্ড ≈ 16 ms), কিন্তু ব্রাউজারগুলির প্রতিটি ফ্রেম রেন্ডার করার জন্য প্রায় 6 ms প্রয়োজন, তাই প্রতি ফ্রেমে 10 ms নির্দেশিকা।

  • চাক্ষুষ মসৃণতা জন্য লক্ষ্য. ফ্রেমের হার পরিবর্তিত হলে ব্যবহারকারীরা লক্ষ্য করেন।

নির্দেশিকা :

  • অ্যানিমেশনের মতো উচ্চ চাপের পয়েন্টগুলিতে, আপনি যেখানে পারেন সেখানে কিছুই না করা এবং সর্বনিম্ন যেখানে আপনি পারবেন না সেখানে মূল বিষয়। যখনই সম্ভব, ব্যয়বহুল কাজের প্রাক-গণনা করার জন্য 100 ms প্রতিক্রিয়া ব্যবহার করুন যাতে আপনি 60 fps আঘাত করার সম্ভাবনাকে সর্বাধিক করেন।

  • বিভিন্ন অ্যানিমেশন অপ্টিমাইজেশান কৌশলগুলির জন্য রেন্ডারিং পারফরম্যান্স দেখুন।

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

নিষ্ক্রিয়: নিষ্ক্রিয় সময় সর্বাধিক করুন

লক্ষ্য : পৃষ্ঠাটি 50 ms এর মধ্যে ব্যবহারকারীর ইনপুটে সাড়া দেয় এমন প্রতিকূলতা বাড়ানোর জন্য নিষ্ক্রিয় সময়কে সর্বাধিক করুন৷

নির্দেশিকা :

  • স্থগিত কাজ সম্পূর্ণ করতে অলস সময় ব্যবহার করুন। উদাহরণস্বরূপ, প্রাথমিক পৃষ্ঠা লোডের জন্য, যতটা সম্ভব কম ডেটা লোড করুন, তারপর বাকিগুলি লোড করতে অলস সময় ব্যবহার করুন।

  • 50 মিসে বা তার কম সময়ে অলস সময়ে কাজ করুন। আর কোনো দিন, এবং আপনি 50 ms এর মধ্যে ব্যবহারকারীর ইনপুটকে সাড়া দেওয়ার জন্য অ্যাপের ক্ষমতার সাথে হস্তক্ষেপ করার ঝুঁকি নিতে পারেন।

  • অলস সময় কাজ করার সময় যদি কোনও ব্যবহারকারী কোনও পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে, ব্যবহারকারীর ইন্টারঅ্যাকশন সর্বদা সর্বোচ্চ অগ্রাধিকার গ্রহণ করে এবং অলস সময়ের কাজকে বাধা দেয়।

লোড করুন: সামগ্রী সরবরাহ করুন এবং 5 সেকেন্ডের মধ্যে ইন্টারেক্টিভ হয়ে উঠুন

যখন পৃষ্ঠাগুলি ধীরে ধীরে লোড হয়, তখন ব্যবহারকারীর মনোযোগ ঘুরে যায়, এবং ব্যবহারকারীরা কাজটিকে ভাঙ্গা বলে মনে করেন। যেসব সাইট দ্রুত লোড হয় তাদের গড় সেশন, কম বাউন্স রেট এবং উচ্চতর বিজ্ঞাপন দর্শনযোগ্যতা থাকে।

লক্ষ্য :

নির্দেশিকা :

RAIL পরিমাপের জন্য সরঞ্জাম

আপনার RAIL পরিমাপ স্বয়ংক্রিয় করতে আপনাকে সাহায্য করার জন্য কয়েকটি সরঞ্জাম রয়েছে। আপনি কোনটি ব্যবহার করেন তা নির্ভর করে আপনার কোন ধরনের তথ্য প্রয়োজন এবং আপনি কোন ধরনের কর্মপ্রবাহ পছন্দ করেন তার উপর।

Chrome DevTools

Chrome DevTools আপনার পৃষ্ঠা লোড বা চালানোর সময় ঘটে যাওয়া সমস্ত কিছুর গভীর বিশ্লেষণ প্রদান করে৷ পারফরম্যান্স প্যানেল UI এর সাথে পরিচিত হতে রানটাইম পারফরম্যান্স বিশ্লেষণের সাথে শুরু করুন দেখুন।

নিম্নলিখিত DevTools বৈশিষ্ট্যগুলি বিশেষভাবে প্রাসঙ্গিক:

বাতিঘর

Lighthouse Chrome DevTools-এ, PageSpeed ​​Insights এ, একটি Chrome এক্সটেনশন হিসাবে, একটি Node.js মডিউল হিসাবে এবং WebPageTest-এর মধ্যে উপলব্ধ৷ আপনি এটিকে একটি URL দেন, এটি একটি ধীরগতির 3G সংযোগ সহ একটি মধ্য-পরিসরের ডিভাইসকে অনুকরণ করে, পৃষ্ঠায় অডিটের একটি সিরিজ চালায় এবং তারপরে আপনাকে লোড কর্মক্ষমতা সম্পর্কে একটি প্রতিবেদন দেয়, সেইসাথে কীভাবে উন্নতি করা যায় সে সম্পর্কে পরামর্শ দেয়৷

নিম্নলিখিত অডিটগুলি বিশেষভাবে প্রাসঙ্গিক:

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

বোঝা

ওয়েবপেজ টেস্ট

WebPageTest হল একটি ওয়েব পারফরম্যান্স টুল যা ওয়েব পেজ অ্যাক্সেস করতে এবং টাইমিং মেট্রিক্স সংগ্রহ করতে বাস্তব ব্রাউজার ব্যবহার করে। একটি ধীরগতির 3G সংযোগ সহ একটি বাস্তব Moto G4 ডিভাইসে পৃষ্ঠার লোড কর্মক্ষমতা সম্পর্কে একটি বিশদ প্রতিবেদন পেতে webpagetest.org/easy- এ একটি URL লিখুন৷ আপনি এটিকে একটি লাইটহাউস অডিট অন্তর্ভুক্ত করতে কনফিগার করতে পারেন।

সারসংক্ষেপ

RAIL হল একটি লেন্স যা একটি ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতাকে স্বতন্ত্র মিথস্ক্রিয়া দ্বারা গঠিত একটি যাত্রা হিসাবে দেখার জন্য। ব্যবহারকারীর অভিজ্ঞতার উপর সর্বাধিক প্রভাব সহ কর্মক্ষমতা লক্ষ্য সেট করার জন্য ব্যবহারকারীরা কীভাবে আপনার সাইটকে উপলব্ধি করে তা বুঝুন।

  • ব্যবহারকারীর উপর ফোকাস করুন।

  • 100 ms এর নিচে ব্যবহারকারীর ইনপুট এর উত্তর দিন।

  • অ্যানিমেটিং বা স্ক্রোলিং করার সময় 10 ms-এর নিচে একটি ফ্রেম তৈরি করুন।

  • প্রধান থ্রেড নিষ্ক্রিয় সময় সর্বাধিক করুন.

  • ইন্টারেক্টিভ কন্টেন্ট 5000 ms-এর কম লোড করুন।