ওয়েব পারফরম্যান্স ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ দিক যা পৃষ্ঠাগুলি যে গতিতে লোড হয় তার উপর ফোকাস করে, সেইসাথে তারা ব্যবহারকারীর ইনপুট কতটা প্রতিক্রিয়াশীল। আপনি যখন আপনার ওয়েবসাইটকে পারফরম্যান্সের জন্য অপ্টিমাইজ করেন, তখন আপনি ব্যবহারকারীদের আরও ভালো অভিজ্ঞতা প্রদান করেন। আপনার ওয়েবসাইটের জন্য আপনার মাথায় থাকা লক্ষ্যগুলি অর্জনে আপনাকে সাহায্য করার জন্য আরও ভাল ব্যবহারকারীর অভিজ্ঞতা অনেক দূর এগিয়ে যায়।
ওয়েব কর্মক্ষমতা একটি কুলুঙ্গি বিষয় মত মনে হতে পারে, কিন্তু এটি, আসলে, উভয় বিস্তৃত এবং বেশ গভীর. বিষয়ের ক্ষেত্র হিসাবে এর গভীরতা দেওয়া, ওয়েব পারফরম্যান্সের উপর একটি কোর্স উভয়ই যোগাযোগযোগ্য, তবুও তথ্যপূর্ণ হওয়া গুরুত্বপূর্ণ। এই কোর্সের প্রাথমিক প্রকাশটি ওয়েব পারফরম্যান্সের মৌলিক বিষয়গুলির উপর দৃষ্টি নিবদ্ধ করে যা নতুনদের তথ্যপূর্ণ হওয়া উচিত।
এই সিরিজের প্রতিটি মডিউলের লক্ষ্য থাকে—যেখানে ব্যবহারিকভাবে সম্ভব—একটি ডেমোর সেট যা প্রতিটি মডিউলের বিষয়বস্তুর পরিপূরক এবং মূল কর্মক্ষমতা ধারণাগুলি প্রদর্শন করে। প্রদত্ত যে এই কোর্সটি একটি প্রাথমিক অফার, বর্তমানে অতিরিক্ত মডিউলগুলি আগামী মাসে প্রকাশের জন্য পরিকল্পনা করা হচ্ছে৷
শিখুন পারফরম্যান্সের জন্য প্রাথমিক কোর্সে যা অফার করা হয় তা এখানে রয়েছে:
কেন গতি গুরুত্বপূর্ণ
শেখার পারফরম্যান্সের সাথে শুরু করার আগে, আপনাকে প্রথমে ব্যবহারকারীর অভিজ্ঞতায় এর ভূমিকা বুঝতে হবে এবং এটি কীভাবে ব্যবহারকারীদের জন্য আরও ভাল ফলাফল করতে পারে। এই কোর্সটি এই বিষয়গুলির একটি সংক্ষিপ্ত ভূমিকা দিয়ে শুরু হয়, কেন পারফরম্যান্স শেখা গুরুত্বপূর্ণ তা গুরুত্বপূর্ণ প্রসঙ্গ দেয়।
সাধারণ এইচটিএমএল কর্মক্ষমতা বিবেচনা
প্রতিটি ওয়েবসাইট একটি HTML নথির জন্য একটি অনুরোধের সাথে শুরু হয়, আপনার ওয়েবসাইটটি কত দ্রুত লোড হয় তাতে সেই অনুরোধটির একটি বড় ভূমিকা রয়েছে৷ এই মডিউলটি এইচটিএমএল ক্যাশিং, পার্সার ব্লকিং, রেন্ডার ব্লকিং এবং আরও অনেক কিছুর মতো গুরুত্বপূর্ণ ধারণাগুলিকে কভার করে, যাতে আপনি নিশ্চিত করতে পারেন যে আপনার ওয়েবসাইটের HTML এর জন্য প্রথম অনুরোধটি ডান পায়ে বন্ধ রয়েছে৷
সমালোচনামূলক পথ বোঝা
সমালোচনামূলক রেন্ডারিং পাথ ওয়েব পারফরম্যান্সের একটি ধারণা যা ব্রাউজারে একটি পৃষ্ঠার প্রাথমিক রেন্ডারিং কত দ্রুত প্রদর্শিত হয় তা নিয়ে কাজ করে। এই মডিউলটি সমালোচনামূলক রেন্ডারিং পাথের পিছনের তত্ত্বে যায়, রেন্ডার-ব্লকিং এবং পার্সার-ব্লকিং রিসোর্সের মতো ধারণাগুলিকে কভার করে এবং ব্রাউজারে একটি পৃষ্ঠা কত দ্রুত প্রদর্শিত হয় তাতে তারা কীভাবে মূল ভূমিকা পালন করে।
রিসোর্স লোডিং অপ্টিমাইজ করুন
একটি পৃষ্ঠা লোড হওয়ার সাথে সাথে, এর HTML-এর মধ্যে অনেক সংস্থান উল্লেখ করা হয় যা CSS এর মাধ্যমে একটি পৃষ্ঠার চেহারা এবং বিন্যাস প্রদান করে, সেইসাথে জাভাস্ক্রিপ্টের মাধ্যমে এর ইন্টারঅ্যাক্টিভিটি প্রদান করে। এই মডিউলে, এই সংস্থানগুলির সাথে সম্পর্কিত বেশ কয়েকটি গুরুত্বপূর্ণ ধারণা এবং তারা কীভাবে একটি পৃষ্ঠার লোডের সময়কে প্রভাবিত করে তা কভার করা হয়েছে।
রিসোর্স ইঙ্গিত দিয়ে ব্রাউজারকে সহায়তা করুন
রিসোর্স ইঙ্গিত হল এইচটিএমএল-এ উপলব্ধ বৈশিষ্ট্যের একটি সংগ্রহ যা ব্রাউজারকে রিসোর্স লোড করতে সাহায্য করতে পারে আগে এবং সম্ভবত উচ্চ রিসোর্স অগ্রাধিকার দিয়েও। এই মডিউলে, কিছু রিসোর্স ইঙ্গিত রয়েছে যা আপনার পৃষ্ঠাগুলিকে আরও দ্রুত লোড করতে সাহায্য করতে পারে৷
ইমেজ কর্মক্ষমতা
চিত্রগুলি আজ অনেক ওয়েব পেজে স্থানান্তরিত ডেটার একটি বড় অংশ উপস্থাপন করে৷ এই মডিউলটি কভার করে যে কীভাবে ছবিগুলিকে অপ্টিমাইজ করা যায়, সেইসাথে সেগুলিকে দক্ষতার সাথে পরিবেশন করা যায় যাতে আপনি ব্যবহারকারীর ডিভাইস নির্বিশেষে নষ্ট বাইটগুলি কমিয়ে আনতে পারেন।
ভিডিও কর্মক্ষমতা
ভিডিও হল একটি মিডিয়া টাইপ যা প্রায়শই ওয়েব পৃষ্ঠাগুলিতে ব্যবহৃত হয়—কিন্তু কীভাবে সেগুলিকে দক্ষতার সাথে পরিবেশন করা যায় তা জানা হল পারফরম্যান্সের একটি দিক যা আপনাকে উপেক্ষা করা উচিত নয়৷ এই মডিউলটি এমনভাবে ভিডিও এমবেড করার জন্য কিছু মূল কৌশল কভার করে যাতে আপনার ওয়েবসাইটটি দ্রুত থাকে, সেইসাথে তাদের ব্যবহারের সাথে উদ্ভূত পারফরম্যান্স বিবেচনার সাথে সংলগ্ন হয়।
ওয়েব ফন্ট অপ্টিমাইজ করুন
ওয়েব ফন্ট হল ওয়েবে একটি সাধারণভাবে ব্যবহৃত সম্পদ—এবং যথার্থভাবেই—যেহেতু তারা এমনভাবে একটি ওয়েবসাইটের ডিজাইনে যোগ করে যা অন্য সংস্থান করতে পারে না। তা সত্ত্বেও, ওয়েব ফন্টগুলির এখনও একটি কর্মক্ষমতা খরচ আছে। এই মডিউলে, ওয়েব ফন্টের চারপাশে কর্মক্ষমতা বিবেচনা এবং কৌশলগুলির একটি সংখ্যা অন্বেষণ করা হয়েছে।
কোড-বিভক্ত জাভাস্ক্রিপ্ট
কিছু সংস্থান একটি ওয়েব পৃষ্ঠার প্রাথমিক লোডের জন্য গুরুত্বপূর্ণ নয়। জাভাস্ক্রিপ্ট হল এমন একটি সংস্থান যা কোড স্প্লিটিং নামে পরিচিত একটি কৌশলের মাধ্যমে প্রয়োজনের সময় পর্যন্ত স্থগিত করা যেতে পারে। এটি করার মাধ্যমে, আপনি ব্যান্ডউইথ এবং CPU কন্টেন্ট কমিয়ে কর্মক্ষমতা উন্নত করতে পারেন—স্টার্টআপের সময় প্রাথমিক পৃষ্ঠা লোড গতি এবং ইনপুট প্রতিক্রিয়া উভয়ের উন্নতির জন্য একটি গুরুত্বপূর্ণ বিবেচনা।
অলস লোড ছবি এবং <iframe> উপাদান
ছবি এবং <iframe> উপাদানগুলি উল্লেখযোগ্য ব্যান্ডউইথ এবং CPU প্রক্রিয়াকরণ সময় গ্রাস করতে পারে। যাইহোক, প্রাথমিক পৃষ্ঠা লোডের সময় সমস্ত ছবি এবং <iframe> উপাদানগুলিকে লোড করার প্রয়োজন হয় না এবং পরবর্তী সময়ে স্থগিত করা যেতে পারে যেখানে ব্যবহারকারীর সেগুলি দেখার সম্ভাবনা বেশি। এই কৌশলটি অলস লোডিং নামে পরিচিত। এই মডিউলে, অলস লোডিং ইমেজ এবং <iframe> উপাদানগুলি ব্যাখ্যা করা হয়েছে যাতে আপনি আপনার পৃষ্ঠাগুলি দ্রুত লোড করতে পারেন এবং শুধুমাত্র প্রয়োজনের সময় ব্যান্ডউইথ এবং প্রক্রিয়াকরণের সময় ব্যবহার করতে পারেন।
প্রিফেচিং, প্রিরেন্ডারিং এবং সার্ভিস ওয়ার্কার প্রিক্যাচিং
যদিও বেশিরভাগ কর্মক্ষমতা অপ্রয়োজনীয় সংস্থানগুলি অপ্টিমাইজ করতে এবং নির্মূল করতে আপনি কী করতে পারেন তার সাথে সম্পর্কিত, তবে কিছু সংস্থান প্রয়োজনের আগে লোড করা উচিত বলে পরামর্শ দেওয়া কিছুটা বিরোধিতাপূর্ণ বলে মনে হতে পারে। যাইহোক, এমন কিছু ক্ষেত্রে রয়েছে যেখানে নির্দিষ্ট সংস্থানগুলি সময়ের আগে লোড করা উপযুক্ত হতে পারে । এই মডিউলে, পারফরম্যান্সের এই দিকটি অন্বেষণ করা হয়েছে, যেমন প্রিফেচিং, প্রিরেন্ডারিং এবং পরিষেবা কর্মী প্রিক্যাচিং নিয়ে আলোচনা করা হয়েছে।
ওয়েব কর্মীদের একটি ওভারভিউ
ব্যবহারকারী ব্রাউজারে যা দেখেন তার বেশিরভাগই একটি একক থ্রেডে ঘটে যা প্রধান থ্রেড হিসাবে পরিচিত। যাইহোক, এমন সুযোগ রয়েছে যেখানে আপনি গণনামূলকভাবে ব্যয়বহুল কাজ করার জন্য নতুন থ্রেড শুরু করতে পারেন যাতে মূল থ্রেডটি গুরুত্বপূর্ণ ব্যবহারকারী-মুখী কাজগুলিকে মিটমাট করতে পারে। যে APIটি এটি করে সেটি ওয়েব ওয়ার্কার API নামে পরিচিত এবং এই মডিউলে এর মূল বিষয়গুলি কভার করা হয়েছে।
একটি কংক্রিট ওয়েব কর্মী ব্যবহার কেস
এখন যেহেতু আপনার ওয়েব কর্মীদের এবং তাদের ক্ষমতা এবং সীমাবদ্ধতা সম্পর্কে একটি প্রাথমিক ধারণা রয়েছে, এটি একটি ওয়েব কর্মীর জন্য একটি কংক্রিট ব্যবহারের ক্ষেত্রে কটাক্ষপাত করার সময়। এই ডেমোতে, একজন ওয়েব কর্মী একটি JPEG ফাইল আনতে, এর মেটাডেটা বের করতে এবং মূল থ্রেডে ফেরত পাঠাতে ব্যবহার করা হয় যাতে ব্যবহারকারী ব্রাউজারে এটি দেখতে পারেন।
ওয়েব পারফরম্যান্স শেখার সাথে শুরু করতে প্রস্তুত? কেন গতি গুরুত্বপূর্ণ তা পড়ার মাধ্যমে জিনিসগুলি শুরু করুন।