সাইট এবং অ্যাপ ঠিকমতো কাজ না করলে ব্যবহারকারীরা তা লক্ষ্য করেন, তাই রেন্ডারিং পারফর্ম্যান্স অপ্টিমাইজ করা অত্যন্ত গুরুত্বপূর্ণ!
আজকের ওয়েব ব্যবহারকারীরা আশা করেন যে তারা যে পৃষ্ঠাগুলি দেখেন সেগুলি ইন্টারেক্টিভ এবং মসৃণ হবে এবং সেখানেই আপনাকে ক্রমবর্ধমানভাবে আপনার সময় এবং প্রচেষ্টা ফোকাস করতে হবে। পৃষ্ঠাগুলি শুধু দ্রুত লোড হলেই চলবে না, ব্যবহারকারীর ইনপুটের দ্রুত উত্তরও দিতে হবে তাদের সম্পূর্ণ লাইফসাইকেল জুড়ে। আসলে, ব্যবহারকারীর অভিজ্ঞতার এই দিকটি Interaction to Next Paint (INP) মেট্রিক সঠিকভাবে পরিমাপ করে। INP-এর ভাল স্কোর থাকার অর্থ হল, ব্যবহারকারীর প্রয়োজন অনুযায়ী পৃষ্ঠাটি ধারাবাহিকভাবে ও নির্ভরযোগ্যভাবে রেসপন্স করেছে।
ব্যবহারকারীর ইন্টার্যাকশনের উত্তরে আপনি কতটা JavaScript এক্সিকিউট করছেন তার উপর নির্ভর করে পৃষ্ঠাটি কতটা দ্রুত কাজ করবে। তবে, ব্যবহারকারীরা ইউজার ইন্টারফেসে ভিজ্যুয়াল পরিবর্তন দেখতে চান। ইউজার ইন্টারফেসে ভিজ্যুয়াল পরিবর্তন হল বিভিন্ন ধরনের কাজের ফলাফল, যা প্রায়ই সম্মিলিতভাবে রেন্ডারিং হিসেবে উল্লেখ করা হয় এবং এই কাজ যত দ্রুত সম্ভব করতে হয় যাতে ব্যবহারকারীর অভিজ্ঞতা দ্রুত ও নির্ভরযোগ্য মনে হয়।
ব্যবহারকারীর ইন্টার্যাকশনে দ্রুত রেসপন্স করে এমন পৃষ্ঠা তৈরি করতে, আপনাকে বুঝতে হবে কীভাবে HTML, JavaScript ও CSS ব্রাউজার দ্বারা ম্যানেজ করা হয় এবং নিশ্চিত করতে হবে যে আপনার লেখা কোড—পাশাপাশি আপনার অন্তর্ভুক্ত করা অন্য যেকোনও থার্ড-পার্টি কোড—যতটা সম্ভব দক্ষতার সাথে কাজ করে।
ডিভাইসের রিফ্রেশ রেট সম্পর্কে একটি নোট
আজকাল বেশিরভাগ ডিভাইসের স্ক্রিন প্রতি সেকেন্ডে ৬০ বার রিফ্রেশ হয়। প্রতিবার রিফ্রেশ করার সময় আপনি যে ভিজ্যুয়াল আউটপুট দেখতে পান, তাকে সাধারণত ফ্রেম বলা হয়। নিম্নলিখিত ভিডিওতে, ফ্রেমের ধারণা দেখানো হয়েছে:
ডিভাইসের স্ক্রিন সবসময় একই রেটে রিফ্রেশ হলেও, ডিভাইসে রান করা অ্যাপ্লিকেশন সবসময় সেই রিফ্রেশ রেটের সাথে ম্যাচ করার মতো পর্যাপ্ত ফ্রেম তৈরি করতে নাও পারে। যেমন, কোনও অ্যানিমেশন বা ট্রানজিশন চলতে থাকলে, স্ক্রিন যতবার রিফ্রেশ হয় ততবার একটি করে ফ্রেম তৈরি করার জন্য ব্রাউজারকে ডিভাইসের রিফ্রেশ রেটের সাথে ম্যাচ করতে হয়।
সাধারণত একটি ডিসপ্লে প্রতি সেকেন্ডে ৬০ বার রিফ্রেশ হয়, তাই একটু হিসেব করলেই বোঝা যাবে যে প্রতিটি ফ্রেম তৈরি করার জন্য ব্রাউজারের কাছে ১৬.৬৬ মিলিসেকেন্ড সময় থাকে। তবে বাস্তবে, প্রতিটি ফ্রেমের জন্য ব্রাউজারের নিজস্ব ওভারহেড থাকে, তাই আপনার সমস্ত কাজ ১০ মিলিসেকেন্ডের মধ্যে সম্পূর্ণ করতে হবে। এই বাজেট পূরণ করতে না পারলে, ফ্রেম রেট কমে যায় এবং পৃষ্ঠার কন্টেন্ট স্ক্রিনে কাঁপতে থাকে। এই ঘটনাকে প্রায়ই জ্যাঙ্ক বলা হয়।
তবে, আপনি যে ধরনের কাজ করার চেষ্টা করছেন তার উপর ভিত্তি করে আপনার টার্গেট পরিবর্তন হয়। অ্যানিমেশনের জন্য ১০ মিলিসেকেন্ডের থ্রেশহোল্ড পূরণ করা অত্যন্ত গুরুত্বপূর্ণ, যেখানে স্ক্রিনে অবজেক্টের দুটি পয়েন্টের মধ্যে ফ্রেমের একটি সিরিজ জুড়ে ইন্টারপোলেট করা হয়। ইউজার ইন্টারফেসে বিচ্ছিন্ন পরিবর্তনের ক্ষেত্রে—অর্থাৎ, মাঝে কোনও মোশন ছাড়াই এক অবস্থা থেকে অন্য অবস্থায় যাওয়া—এটি সাজেস্ট করা হয় যে আপনি এমন একটি টাইমফ্রেমে এই ধরনের পরিবর্তনগুলি অর্জন করুন যা ব্যবহারকারীর কাছে তাত্ক্ষণিক বলে মনে হয়। এই ধরনের ক্ষেত্রে, ১০০ মিলিসেকেন্ড হল একটি প্রায়শই উদ্ধৃত সংখ্যা, কিন্তু INP মেট্রিকের "ভালো" থ্রেশহোল্ড হল ২০০ মিলিসেকেন্ড বা তার কম যাতে বিভিন্ন ক্ষমতা সহ ডিভাইসের একটি বিস্তৃত অ্যারে মিটমাট করা যায়।
আপনার লক্ষ্য যাই হোক না কেন—সেটি জ্যাঙ্ক এড়ানোর জন্য অ্যানিমেশনের প্রয়োজনীয় অনেক ফ্রেম তৈরি করা হোক বা ব্যবহারকারী ইন্টারফেসে যত তাড়াতাড়ি সম্ভব একটি বিচ্ছিন্ন ভিজ্যুয়াল পরিবর্তন তৈরি করা হোক—ব্রাউজারের পিক্সেল পাইপলাইন কীভাবে কাজ করে তা বোঝা আপনার কাজের জন্য অপরিহার্য।
পিক্সেল পাইপলাইন
ওয়েব ডেভেলপার হিসেবে কাজ করার সময় আপনাকে পাঁচটি প্রধান বিষয় সম্পর্কে জানতে ও সচেতন থাকতে হবে। এই পাঁচটি ক্ষেত্র হল সেগুলি যেগুলির উপর আপনার সবচেয়ে বেশি নিয়ন্ত্রণ রয়েছে এবং প্রতিটি পিক্সেল-টু-স্ক্রিন পাইপলাইনের একটি মূল পয়েন্টকে উপস্থাপন করে:
- JavaScript: JavaScript সাধারণত এমন কাজ ম্যানেজ করতে ব্যবহার করা হয় যার ফলে
ইউজার ইন্টারফেসে ভিজ্যুয়াল পরিবর্তন হয়। যেমন, এটি jQuery-এর
animateফাংশন, ডেটাসেট সাজানো বা পৃষ্ঠায় DOM এলিমেন্ট যোগ করা হতে পারে। তবে, ভিজ্যুয়াল পরিবর্তন ট্রিগার করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা বাধ্যতামূলক নয়: CSS অ্যানিমেশন, CSS ট্রানজিশন এবং Web Animations API-এর মাধ্যমে পৃষ্ঠার কন্টেন্ট অ্যানিমেট করা যায়। - স্টাইল গণনা: এটি হল ম্যাচিং সিলেক্টরের উপর ভিত্তি করে কোন CSS নিয়ম কোন HTML এলিমেন্টে প্রযোজ্য তা খুঁজে বের করার প্রক্রিয়া। যেমন,
.headlineহল CSS বাছাইকারীর একটি উদাহরণ যাclassঅ্যাট্রিবিউট ভ্যালু সহ যেকোনও HTML এলিমেন্টে প্রয়োগ করা হয়, যার মধ্যেheadlineক্লাস থাকে। সেখান থেকে, নিয়মগুলি জানা হয়ে গেলে, সেগুলি প্রয়োগ করা হয় এবং প্রতিটি এলিমেন্টের জন্য চূড়ান্ত স্টাইল গণনা করা হয়। - লেআউট: কোনও এলিমেন্টের ক্ষেত্রে কোন নিয়ম প্রযোজ্য হবে তা ব্রাউজার জানতে পারলে, এটি পৃষ্ঠার জ্যামিতি গণনা করা শুরু করতে পারে, যেমন এলিমেন্ট কতটা জায়গা
নেয় এবং স্ক্রিনে কোথায় দেখা যায়। ওয়েবের লে-আউট মডেলের অর্থ হল
একটি এলিমেন্ট অন্যটিকে প্রভাবিত করতে পারে। যেমন,
<body>এলিমেন্টের প্রস্থ সাধারণত ট্রি-এর উপরে ও নিচে থাকা চাইল্ড এলিমেন্টের ডাইমেনশনকে প্রভাবিত করে, তাই ব্রাউজারের জন্য এই প্রসেসটি বেশ জটিল হতে পারে। - পেইন্ট: পেইন্টিং হল পিক্সেল পূরণ করার প্রসেস। পৃষ্ঠায় লেআউট হিসেব করার পরে, টেক্সট, রঙ, ছবি, বর্ডার, শ্যাডো এবং মূলত এলিমেন্টের প্রতিটি ভিজ্যুয়াল দিক আঁকার কাজ এতে অন্তর্ভুক্ত। ড্রয়িং সাধারণত একাধিক সারফেসে করা হয়, যেগুলিকে প্রায়শই লেয়ার বলা হয়।
- কম্পোজিট: পৃষ্ঠার অংশগুলি একাধিক লেয়ারে আঁকা হতে পারে, তাই সেগুলি সঠিক ক্রমে স্ক্রিনে প্রয়োগ করতে হবে যাতে পৃষ্ঠাটি প্রত্যাশিতভাবে রেন্ডার হয়। এটি বিশেষ করে সেইসব এলিমেন্টের জন্য গুরুত্বপূর্ণ যেগুলি অন্য এলিমেন্টের উপর ওভারল্যাপ করে, কারণ ভুল হলে একটি এলিমেন্ট অন্যটির উপরে ভুলভাবে দেখা যেতে পারে।
পিক্সেল পাইপলাইনের এই প্রতিটি অংশ অ্যানিমেশনে জ্যাঙ্ক প্রবর্তন করার বা ইউজার ইন্টারফেসে বিচ্ছিন্ন ভিজ্যুয়াল পরিবর্তনের জন্য ফ্রেমের পেইন্টিং বিলম্বিত করার সুযোগ উপস্থাপন করে। তাই আপনার কোড পাইপলাইনের ঠিক কোন অংশ ট্রিগার করে তা বোঝা গুরুত্বপূর্ণ। এছাড়াও, আপনি যদি আপনার পরিবর্তনগুলি শুধুমাত্র পিক্সেল পাইপলাইনের সেই অংশগুলিতে সীমাবদ্ধ করতে পারেন যা সেগুলি রেন্ডার করার জন্য প্রয়োজনীয়, তাহলে তা খতিয়ে দেখুন।
আপনি হয়ত "পেইন্ট" শব্দের সাথে "রাস্টারাইজ" শব্দটিও শুনেছেন। এর কারণ হল, পেইন্টিং আসলে দু'টি টাস্ক:
- ড্র কলের তালিকা তৈরি করা হচ্ছে।
- পিক্সেলগুলি পূরণ করা হচ্ছে।
পরেরটিকে "রাস্টারাইজেশন" বলা হয়, তাই DevTools-এ যখনই আপনি পেইন্ট রেকর্ড দেখবেন, তখনই আপনার মনে করা উচিত যে এতে রাস্টারাইজেশন অন্তর্ভুক্ত আছে। কিছু আর্কিটেকচারে, ড্র কলের তালিকা তৈরি করা এবং রাস্টারাইজেশন বিভিন্ন থ্রেডে করা হয়, তবে একজন ডেভেলপার হিসেবে এটি আপনার নিয়ন্ত্রণে নেই।
আপনি সবসময় প্রতিটি ফ্রেমে পাইপলাইনের প্রতিটি অংশ স্পর্শ করবেন না। আসলে, আপনি জাভাস্ক্রিপ্ট, CSS বা ওয়েব অ্যানিমেশন API-এর মাধ্যমে কোনও ভিজ্যুয়াল পরিবর্তন করলে, নির্দিষ্ট ফ্রেমের জন্য পাইপলাইন সাধারণত তিনটি উপায়ে কাজ করে।
১. JS / CSS > স্টাইল > লেআউট > পেইন্ট > কম্পোজিট
আপনি যদি "লেআউট" প্রপার্টি পরিবর্তন করেন, যেমন প্রস্থ, উচ্চতা বা এর অবস্থানের মতো কোনও এলিমেন্টের
জ্যামিতি পরিবর্তন করে (যেমন left বা top CSS
প্রপার্টি), ব্রাউজারকে অন্য সব এলিমেন্ট চেক করতে হবে এবং পৃষ্ঠাটি "রিফ্লো" করতে হবে। প্রভাবিত যেকোনও অংশ আবার আঁকতে হবে এবং আঁকা হয়ে গেলে
সব এলিমেন্ট একসাথে কম্পোজিট করতে হবে।
২. JS / CSS > স্টাইল > পেইন্ট > কম্পোজিট
আপনি যদি CSS-এ কোনও এলিমেন্টের জন্য "শুধুমাত্র-পেইন্ট" প্রপার্টি পরিবর্তন করেন—যেমন,
background-image, color বা box-shadow-এর মতো প্রপার্টি—তাহলে পৃষ্ঠায় ভিজ্যুয়াল আপডেট করার জন্য
লেআউট স্টেপের প্রয়োজন হয় না। লেআউট ধাপটি বাদ দিয়ে—যেখানে সম্ভব—আপনি সম্ভাব্য ব্যয়বহুল লেআউট কাজ এড়াতে পারেন যা অন্যথায় পরবর্তী ফ্রেম তৈরি করতে উল্লেখযোগ্য লেটেন্সি যোগ করতে পারে।
৩. JS / CSS > স্টাইল > কম্পোজিট
আপনি যদি এমন কোনও প্রপার্টি পরিবর্তন করেন যার জন্য লেআউট বা পেইন্ট কোনওটিরই প্রয়োজন হয় না, তাহলে ব্রাউজার সরাসরি কম্পোজিটিং ধাপে চলে যেতে পারে। এটি হল সবচেয়ে সস্তা এবং সবচেয়ে পছন্দসই পাথওয়ে যা পিক্সেল পাইপলাইনের মাধ্যমে কোনও পৃষ্ঠার লাইফসাইকেলে হাই প্রেসার পয়েন্টের জন্য ব্যবহার করা হয়, যেমন অ্যানিমেশন বা স্ক্রলিং। মজার তথ্য: Chromium পৃষ্ঠার স্ক্রোলিং অপ্টিমাইজ করে যাতে এটি শুধুমাত্র কম্পোজিটর থ্রেডে ঘটে যেখানে সম্ভব, যার অর্থ হল কোনও পৃষ্ঠা সাড়া না দিলেও, আপনি এখনও পৃষ্ঠাটি স্ক্রোল করতে পারবেন এবং এর কিছু অংশ দেখতে পারবেন যা আগে স্ক্রিনে দেখানো হয়েছিল।
ওয়েব পারফর্ম্যান্স হল কাজ এড়িয়ে যাওয়ার কৌশল, যেখানে প্রয়োজনীয় কাজের দক্ষতা যতটা সম্ভব বাড়ানো হয়। অনেক ক্ষেত্রে, এটি ব্রাউজারের সাথে কাজ করার ব্যাপার, এর বিরুদ্ধে নয়। মনে রাখবেন যে, পাইপলাইনে আগে দেখানো কাজের কম্পিউটেশনাল খরচ আলাদা; কিছু কাজ স্বভাবতই অন্যদের চেয়ে বেশি ব্যয়বহুল!
আসুন পাইপলাইনের বিভিন্ন অংশ সম্পর্কে জেনে নিই। আমরা সাধারণ সমস্যাগুলি এবং কীভাবে সেগুলি নির্ণয় ও সমাধান করা যায় তা দেখব।
ব্রাউজার রেন্ডারিং অপ্টিমাইজেশন
ব্যবহারকারীদের কাছে পারফর্ম্যান্স গুরুত্বপূর্ণ এবং ব্যবহারকারীদের ভালো অভিজ্ঞতা প্রদান করার জন্য, ওয়েব ডেভেলপারদের এমন ওয়েবসাইট তৈরি করতে হবে যা ব্যবহারকারীর ইন্টার্যাকশনে দ্রুত প্রতিক্রিয়া জানায় এবং স্মুথভাবে রেন্ডার করে। পারফর্ম্যান্স বিশেষজ্ঞ পল লুইস এখানে আপনাকে জ্যাঙ্ক ধ্বংস করতে এবং এমন ওয়েব অ্যাপ তৈরি করতে সাহায্য করবেন যা প্রতি সেকেন্ডে ৬০ ফ্রেমের পারফর্ম্যান্স বজায় রাখে। এই কোর্স শেষ করার পরে আপনি অ্যাপ প্রোফাইল করার জন্য প্রয়োজনীয় টুল পাবেন এবং সাবঅপ্টিমাল রেন্ডারিং পারফর্ম্যান্সের কারণ শনাক্ত করতে পারবেন। এছাড়াও, আপনি ব্রাউজারের রেন্ডারিং পাইপলাইন এক্সপ্লোর করবেন এবং এমন প্যাটার্ন খুঁজে পাবেন যা দ্রুত ওয়েবসাইট তৈরি করা সহজ করে তোলে এবং ব্যবহারকারীরা সেগুলি ব্যবহার করে আনন্দ পাবেন।
এটি Udacity-এর মাধ্যমে অফার করা একটি ফ্রি কোর্স এবং আপনি যেকোনও সময় এটি করতে পারেন।