কম ডেটা খরচে একটি পারফর্ম্যান্ট, স্থিতিস্থাপক সাইট তৈরি করার জন্য বেশ কয়েকটি মূল উদ্দেশ্য রয়েছে।
প্রতিটি উদ্দেশ্যের জন্য, আপনাকে অডিট করতে হবে।
| উদ্দেশ্য | কেন? | কী পরীক্ষা করতে হবে? |
|---|---|---|
| গোপনীয়তা, নিরাপত্তা ও ডেটা ইন্টিগ্রিটি নিশ্চিত করা এবং শক্তিশালী API ব্যবহার চালু করা | HTTPS কেন গুরুত্বপূর্ণ | সব সাইট পৃষ্ঠা/রুট এবং অ্যাসেটের জন্য HTTPS প্রয়োগ করা হয়েছে। |
| লোড পারফর্ম্যান্স উন্নত করুন | ৫৩% ব্যবহারকারী সাইট ছেড়ে চলে যান যেগুলি লোড হতে তিন সেকেন্ডের বেশি সময় নেয় | জাভাস্ক্রিপ্ট এবং CSS যা অ্যাসিঙ্ক্রোনাসভাবে লোড করা বা স্থগিত করা যেতে পারে। ইন্টার্যাক্টিভ ও পেলোড সাইজের জন্য লক্ষ্য সেট করুন: যেমন, 3G-তে TTI। পারফর্ম্যান্স বাজেট সেট করুন। |
| পৃষ্ঠার সাইজ কমানো | • সীমিত ডেটা প্ল্যান ব্যবহারকারীদের ডেটা খরচ কমানো • ওয়েব অ্যাপ স্টোরেজের প্রয়োজনীয়তা কমানো — বিশেষ করে কম স্পেসিফিকেশন থাকা ডিভাইস ব্যবহারকারীদের জন্য এটি গুরুত্বপূর্ণ • হোস্টিং ও পরিষেবার খরচ কমানো • পরিষেবার পারফর্ম্যান্স, নির্ভরযোগ্যতা ও স্থিতিস্থাপকতা উন্নত করা | পৃষ্ঠার সাইজের বাজেট সেট করুন: যেমন, প্রথম লোড ৪০০ কেবির কম। ভারী জাভাস্ক্রিপ্ট আছে কিনা চেক করুন। ফাইল সাইজ চেক করে দেখুন যে ছবি, মিডিয়া, HTML, CSS ও JavaScript-এর সাইজ অনেক বড় কিনা। ধীরে ধীরে লোড করা যেতে পারে এমন ছবি খুঁজুন এবং কভারেজ টুল ব্যবহার করে অব্যবহৃত কোড চেক করুন। |
| রিসোর্স সংক্রান্ত অনুরোধ কমানো | • লেটেন্সি সংক্রান্ত সমস্যা কমানো • পরিষেবা বাবদ খরচ কমানো • পরিষেবা প্রদান সংক্রান্ত পারফর্ম্যান্স, নির্ভরযোগ্যতা ও স্থিতিস্থাপকতা উন্নত করা | যেকোনও ধরনের রিসোর্সের জন্য অত্যধিক বা অপ্রয়োজনীয় অনুরোধের দিকে নজর রাখুন। যেমন: বারবার লোড করা ফাইল, একাধিক ভার্সনে লোড করা জাভাস্ক্রিপ্ট, কখনও ব্যবহার করা হয়নি এমন CSS, কখনও দেখা হয়নি এমন ছবি (অথবা ধীরে ধীরে লোড করা যেতে পারে)। |
| মেমরির ব্যবহার অপ্টিমাইজ করুন | বিশেষ করে মোবাইল ডিভাইসে, মেমরি নতুন বাধা হয়ে উঠতে পারে | হোম পেজ লোড করার সময় এবং অন্যান্য সাইট ফিচার ব্যবহার করার সময় মেমরির ব্যবহারের জন্য আপনার সাইটকে অন্যদের সাথে তুলনা করতে Chrome টাস্ক ম্যানেজার ব্যবহার করুন। |
| সিপিইউ লোড কমানো | মোবাইল ডিভাইসে সিপিইউ সীমিত থাকে, বিশেষ করে কম স্পেসিফিকেশন থাকা ডিভাইসে | ভারী জাভাস্ক্রিপ্ট আছে কিনা চেক করুন। কভারেজ টুল ব্যবহার করে অব্যবহৃত জাভাস্ক্রিপ্ট ও CSS খুঁজুন। অতিরিক্ত DOM সাইজ এবং প্রথমবার লোড হওয়ার সময় অপ্রয়োজনীয় স্ক্রিপ্ট রান করছে কিনা তা চেক করুন। একাধিক ভার্সনে লোড করা জাভাস্ক্রিপ্ট বা লাইব্রেরি খুঁজুন যা সামান্য রিফ্যাক্টরিংয়ের মাধ্যমে এড়ানো যেতে পারে। |
ওয়েবসাইট অডিট করার জন্য বিভিন্ন ধরনের টুল ও টেকনিক আছে:
- সিস্টেম টুল
- বিল্ট-ইন ব্রাউজার টুল
- ব্রাউজার এক্সটেনশন
- অনলাইন টেস্ট অ্যাপ্লিকেশন
- ইমুলেশন টুল
- Analytics
- সার্ভার ও বিজনেস সিস্টেমের মাধ্যমে প্রদান করা মেট্রিক
- স্ক্রিন ও ভিডিও রেকর্ডিং
- ম্যানুয়াল পরীক্ষা
প্রতিটি ধরনের অডিটের জন্য কোন পদ্ধতি প্রাসঙ্গিক তা নিচে জানতে পারবেন।
রিসোর্সের অনুরোধ রেকর্ড করুন: সংখ্যা, সাইজ, ধরন ও সময়
কোনও সাইট অডিট করার সময় আপনার ব্রাউজারের নেটওয়ার্ক টুল ব্যবহার করে পৃষ্ঠা চেক করা হল শুরু করার একটি ভালো উপায়। এটি কীভাবে করতে হবে তা বুঝতে না পারলে, Chrome DevTools নেটওয়ার্ক প্যানেল শুরু করার নির্দেশিকা দেখুন। একই ধরনের টুল Firefox, Safari, Internet Explorer এবং Edge-এর জন্য উপলভ্য।
পরিবর্তন করার আগে ফলাফলের রেকর্ড রাখতে ভুলবেন না। নেটওয়ার্ক অনুরোধের জন্য, এটি স্ক্রিনশটের মতোই সহজ হতে পারে — এছাড়াও আপনি JSON ফাইল হিসেবে প্রোফাইল ডেটা সেভ করতে পারবেন। পরীক্ষার ফলাফল কীভাবে সেভ ও শেয়ার করবেন সেই সম্পর্কে নিচে আরও তথ্য দেওয়া আছে।
নেটওয়ার্ক ব্যবহার অডিট করা শুরু করার আগে, ব্রাউজার ক্যাশে বন্ধ করে দিন যাতে প্রথমবার লোড হওয়ার পারফর্ম্যান্সের সঠিক পরিসংখ্যান পান। আপনি যদি আগে থেকেই কোনও সার্ভিস ওয়ার্কারের মাধ্যমে ক্যাশিং করেন, তাহলে Cache API স্টোরেজ খালি করুন। আপনি ছদ্মবেশী (ব্যক্তিগত) উইন্ডো ব্যবহার করতে পারেন, যাতে ব্রাউজার ক্যাশে বন্ধ করা বা আগে থেকে ক্যাশে করা এন্ট্রি সরিয়ে দেওয়ার ব্যাপারে আপনাকে চিন্তা করতে না হয়।
ব্রাউজার টুলের সাহায্যে আপনাকে চেক করতে হবে এমন কিছু মূল ফিচার ও মেট্রিক এখানে দেওয়া হল:
- লোড পারফর্ম্যান্স: Lighthouse লোড মেট্রিকের সারাংশ প্রদান করে। অ্যাডি ওসমানি পৃষ্ঠা লোড হওয়ার জন্য ব্যবহারকারীর গুরুত্বপূর্ণ মুহূর্ত সম্পর্কে একটি দুর্দান্ত সারসংক্ষেপ লিখেছেন।
- রিসোর্স লোড ও পার্স করা এবং মেমরির ব্যবহারের জন্য টাইমলাইন ইভেন্ট। আপনি আরও গভীরে যেতে চাইলে, মেমরি ও জাভাস্ক্রিপ্ট প্রোফাইলিং রান করুন।
- মোট পৃষ্ঠার সাইজ এবং ফাইলের সংখ্যা।
- জাভাস্ক্রিপ্ট ফাইলের সংখ্যা ও ওজন।
- বিশেষভাবে বড় কোনও জাভাস্ক্রিপ্ট ফাইল (যেমন, ১০০ কেবির বেশি)।
- ব্যবহার না করা জাভাস্ক্রিপ্ট। আপনি Chrome কভারেজ টুল ব্যবহার করে চেক করতে পারেন।
- ছবির ফাইলের মোট সংখ্যা ও ওজন।
- বিশেষভাবে বড় সাইজের যেকোনও ব্যক্তিগত ছবির ফাইল।
- ছবির ফর্ম্যাট: সেখানে কি PNG আছে যা JPEG বা SVG হতে পারে? WebP কি ফলব্যাকের সাথে ব্যবহার করা হয়?
- রেসপন্সিভ ছবির টেকনিক (যেমন srcset) ব্যবহার করা হয়েছে কিনা।
- HTML ফাইলের সাইজ।
- CSS ফাইলের মোট সংখ্যা ও ওজন।
- ব্যবহার না করা CSS। (Chrome-এ, কভারেজ প্যানেল ব্যবহার করুন।)
- ওয়েব ফন্টের (আইকন ফন্ট সহ) মতো অন্যান্য অ্যাসেটের ব্যবহার সংক্রান্ত সমস্যা চেক করুন।
- পৃষ্ঠা লোড হতে বাধা দেয় এমন কিছু আছে কিনা তা DevTools টাইমলাইনে চেক করুন।
আপনি যদি দ্রুত ওয়াই-ফাই বা দ্রুত মোবাইল কানেকশন থেকে কাজ করেন, তাহলে কম ব্যান্ডউইথ এবং বেশি লেটেন্সি এমুলেশন সহ পরীক্ষা করুন। মোবাইল ও ডেস্কটপ, দুটিতেই পরীক্ষা করতে ভুলবেন না — কিছু সাইট UA স্নিফিং ব্যবহার করে বিভিন্ন ডিভাইসের জন্য আলাদা অ্যাসেট ও লেআউট প্রদান করে। আপনাকে হয়ত শুধু ডিভাইস সিমুলেশন নয়, রিমোট ডিবাগিং ব্যবহার করে আসল হার্ডওয়্যারে টেস্ট করতে হবে।
মেমরি ও সিপিইউ লোড চেক করা
পরিবর্তন করার আগে, মেমরি ও সিপিইউ ব্যবহারের রেকর্ড রাখুন।
Chrome-এ আপনি উইন্ডো মেনু থেকে টাস্ক ম্যানেজার অ্যাক্সেস করতে পারবেন। এটি কোনও ওয়েব পেজের প্রয়োজনীয়তা চেক করার সহজ উপায়।
প্রথম ও পরবর্তী লোড পারফর্ম্যান্স পরীক্ষা করুন
Lighthouse, WebPagetest এবং Pagespeed Insights স্পিড, ডেটার খরচ এবং রিসোর্স ব্যবহার বিশ্লেষণ করার জন্য উপযোগী। WebPagetest স্ট্যাটিক-কন্টেন্ট ক্যাশিং, টাইম টু ফার্স্ট বাইট এবং আপনার সাইট CDN-এর কার্যকর ব্যবহার করে কিনা তাও চেক করবে।
ফলাফল সেভ করুন
- WebPagetest: প্রতিটি টেস্ট ফলাফলের নিজস্ব URL আছে।
- Pagespeed Insights: অনলাইন Pagespeed Insights টুলে এখন Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্টের ডেটা অন্তর্ভুক্ত করা হয়েছে যা বাস্তব-জগতের পারফর্ম্যান্স পরিসংখ্যান হাইলাইট করে।
- Lighthouse: Chrome DevTools অডিট প্যানেল থেকে রিপোর্ট সেভ করতে ডাউনলোড বোতামে ক্লিক করুন:
প্রোগ্রেসিভ ওয়েব অ্যাপের মূল প্রয়োজনীয়তাগুলি পরীক্ষা করুন
Lighthouse আপনাকে নিরাপত্তা, কার্যকারিতা, অ্যাক্সেসিবিলিটি, পারফর্ম্যান্স এবং সার্চ ইঞ্জিনের পারফর্ম্যান্স পরীক্ষা করতে সাহায্য করে। বিশেষ করে, Lighthouse চেক করে দেখে যে আপনার সাইট সার্ভিস ওয়ার্কার ও ওয়েব অ্যাপ ম্যানিফেস্টের মতো PWA ফিচার সফলভাবে প্রয়োগ করে কিনা।
আপনার সাইট গ্রহণযোগ্য অফলাইন অভিজ্ঞতা প্রদান করতে পারে কিনা তাও Lighthouse পরীক্ষা করে।
আপনি JSON হিসেবে Lighthouse রিপোর্ট ডাউনলোড করতে পারেন অথবা আপনি Lighthouse Chrome এক্সটেনশন ব্যবহার করলে, GitHub Gist হিসেবে রিপোর্ট শেয়ার করুন: শেয়ার বোতামে ক্লিক করুন, ভিউয়ারে খুলুন বিকল্প বেছে নিন, তারপর নতুন উইন্ডোতে আবার শেয়ার বোতামে ক্লিক করুন এবং Gist হিসেবে সেভ করুন।
বাস্তব-জগতের পারফর্ম্যান্স ট্র্যাক করতে অ্যানালিটিক্স, ইভেন্ট ট্র্যাকিং এবং ব্যবসায়িক মেট্রিক্স ব্যবহার করুন
সম্ভব হলে, পরিবর্তন করার আগে অ্যানালিটিক্স ডেটার রেকর্ড রাখুন: বাউন্স রেট, পৃষ্ঠায় কাটানো সময়, এক্সিট পৃষ্ঠা: আপনার ব্যবসার প্রয়োজনীয়তার সাথে প্রাসঙ্গিক যেকোনও কিছু।
সম্ভব হলে, প্রভাবিত হতে পারে এমন ব্যবসা ও টেকনিক্যাল মেট্রিক রেকর্ড করুন, যাতে পরিবর্তন করার পরে আপনি ফলাফল তুলনা করতে পারেন। যেমন: কোনও ই-কমার্স সাইট প্রতি মিনিটে অর্ডার ট্র্যাক করতে পারে অথবা স্ট্রেস ও এন্ডুরেন্স টেস্টিংয়ের জন্য পরিসংখ্যান রেকর্ড করতে পারে। আপনি পৃষ্ঠার সাইজ ও রিসোর্স সংক্রান্ত অনুরোধ কমালে, ব্যাক-এন্ড স্টোরেজ খরচ, CPU সংক্রান্ত প্রয়োজনীয়তা, পরিষেবার খরচ ও স্থিতিস্থাপকতা উন্নত হওয়ার সম্ভাবনা আছে।
অ্যানালিটিক্স প্রয়োগ করা না থাকলে, এখনই তা করার সময়! আপনার সাইট কাজ করছে কিনা তা বোঝার জন্য বিজনেস মেট্রিক ও অ্যানালিটিক্স হল চূড়ান্ত মাপকাঠি। প্রয়োজন হলে, বোতামে ক্লিক করা এবং ভিডিও চালানোর মতো ব্যবহারকারীর অ্যাকশনের জন্য ইভেন্ট ট্র্যাকিং যোগ করুন। এছাড়াও, আপনি লক্ষ্য ফ্লো বিশ্লেষণ প্রয়োগ করতে চাইতে পারেন: যেসব পাথ ব্যবহার করে আপনার ব্যবহারকারীরা 'কনভার্সন' পর্যন্ত নেভিগেট করেন।
আপনি Google Analytics সাইটের স্পিড-এর উপর নজর রাখতে পারেন, যাতে পারফর্ম্যান্স মেট্রিক কীভাবে ব্যবসার মেট্রিকের সাথে সম্পর্কিত তা চেক করতে পারেন। যেমন: 'হোমপেজ কত দ্রুত লোড হয়েছে?' এর সাথে 'হোমপেজের মাধ্যমে প্রবেশ করার ফলে কি বিক্রি হয়েছে?' তুলনা করা।
Google Analytics, Navigation Timing API থেকে ডেটা ব্যবহার করে।
আপনি হয়ত JavaScript পারফর্ম্যান্স API বা আপনার নিজস্ব মেট্রিক ব্যবহার করে ডেটা রেকর্ড করতে চাইবেন, যেমন:
const subscribeBtn = document.querySelector('#subscribe');
subscribeBtn.addEventListener('click', (event) => {
// Event listener logic goes here...
const lag = performance.now() - event.timeStamp;
if (lag > 100) {
ga('send', 'event', {
eventCategory: 'Performance Metric'
eventAction: 'input-latency',
eventLabel: '#subscribe:click',
eventValue: Math.round(lag),
nonInteraction: true,
});
}
});
এছাড়াও, আপনি ReportingObserver ব্যবহার করে ব্রাউজার বন্ধ হয়ে যাওয়া এবং হস্তক্ষেপ সংক্রান্ত সতর্কতা চেক করতে পারবেন। এটি হল আসল ব্যবহারকারীদের থেকে বাস্তব-জগতের, লাইভ পরিমাপ পাওয়ার জন্য অনেক API-এর মধ্যে একটি।
বাস্তব অভিজ্ঞতা: স্ক্রিন ও ভিডিও রেকর্ডিং
মোবাইল ও ডেস্কটপে পৃষ্ঠা লোড হওয়ার ভিডিও রেকর্ডিং করুন। এটি হাই ফ্রেম রেটে এবং আপনি টাইমার ডিসপ্লে যোগ করলে আরও ভাল কাজ করে।
এছাড়াও, আপনি স্ক্রিনকাস্ট সেভ করতে চাইতে পারেন। Android, iOS ও ডেস্কটপ প্ল্যাটফর্মের জন্য স্ক্রিনকাস্ট রেকর্ড করার অনেক অ্যাপ আছে (এবং একই কাজ করার জন্য স্ক্রিপ্ট)।
ভিডিও-রেকর্ডিং পৃষ্ঠা লোড অনেকটা WebPagetest-এ ফিল্মস্ট্রিপ ভিউ বা Chrome DevTools-এ স্ক্রিনশট ক্যাপচার করুন বিকল্পের মতো কাজ করে। আপনি পৃষ্ঠার কম্পোনেন্ট লোড হওয়ার স্পিডের বাস্তব রেকর্ড পাবেন: কোনটি দ্রুত এবং কোনটি ধীর। পরে করা উন্নতির সাথে তুলনা করার জন্য ভিডিও রেকর্ডিং ও স্ক্রিনকাস্ট সেভ করুন।
আগের ও পরের মধ্যে পাশাপাশি তুলনা করা হলে, তা উন্নতি দেখানোর একটি দুর্দান্ত উপায় হতে পারে!
আর কী?
প্রাসঙ্গিক হলে, ওয়েব ব্লট স্কোর পান। এটি একটি মজার পরীক্ষা, তবে এটি কোড ব্লট প্রদর্শন করার একটি বাধ্যতামূলক উপায়ও হতে পারে — অথবা আপনি যে উন্নতি করেছেন তা দেখানোর জন্য।
আমার সাইটের খরচ কত?, নিচে দেখানো হয়েছে, বিভিন্ন অঞ্চলে আপনার সাইট লোড করার আর্থিক খরচ সম্পর্কে একটি আনুমানিক নির্দেশিকা দেয়।
আরও অনেক স্ট্যান্ডঅ্যালোন ও অনলাইন টুল উপলভ্য আছে: perf.rocks/tools লিঙ্কে গিয়ে দেখুন।