কম ডেটা খরচ সহ একটি পারফরম্যান্ট, স্থিতিস্থাপক সাইট তৈরি করার জন্য বেশ কয়েকটি মূল উদ্দেশ্য রয়েছে।
প্রতিটি উদ্দেশ্য জন্য, আপনি একটি অডিট প্রয়োজন.
| উদ্দেশ্য | কেন? | কি জন্য পরীক্ষা করতে হবে? |
|---|---|---|
| গোপনীয়তা, নিরাপত্তা এবং ডেটা অখণ্ডতা নিশ্চিত করুন এবং শক্তিশালী API ব্যবহার সক্ষম করুন | কেন HTTPS গুরুত্বপূর্ণ | HTTPS সমস্ত সাইটের পৃষ্ঠা/রুট এবং সম্পদের জন্য প্রয়োগ করা হয়েছে। |
| লোড কর্মক্ষমতা উন্নত | 53% ব্যবহারকারী এমন সাইট ত্যাগ করে যা লোড হতে তিন সেকেন্ডের বেশি সময় নেয় | জাভাস্ক্রিপ্ট এবং সিএসএস যা অ্যাসিঙ্ক্রোনাসভাবে লোড করা যেতে পারে বা স্থগিত করা যেতে পারে। ইন্টারেক্টিভ এবং পেলোড আকারে সময়ের জন্য লক্ষ্য সেট করুন: উদাহরণস্বরূপ 3G-তে TTI। একটি কর্মক্ষমতা বাজেট সেট করুন . |
| পাতার ওজন কমান | • ক্যাপড ডেটা প্ল্যান সহ ব্যবহারকারীদের জন্য ডেটা খরচ হ্রাস করুন • ওয়েব অ্যাপ স্টোরেজ প্রয়োজনীয়তা হ্রাস করুন — বিশেষত স্বল্প-নির্দিষ্ট ডিভাইসগুলিতে ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ • হোস্টিং এবং পরিবেশন খরচ হ্রাস করুন • পরিবেশন কর্মক্ষমতা, নির্ভরযোগ্যতা এবং স্থিতিস্থাপকতা উন্নত করুন | একটি পৃষ্ঠা ওজন বাজেট সেট করুন: উদাহরণস্বরূপ, 400 kB এর নিচে প্রথম লোড। ভারী জাভাস্ক্রিপ্ট জন্য পরীক্ষা করুন. ফোলা ছবি, মিডিয়া, এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট খুঁজতে ফাইলের আকার পরীক্ষা করুন। অলস লোড হতে পারে এমন চিত্রগুলি খুঁজুন এবং কভারেজ সরঞ্জামগুলির সাথে অব্যবহৃত কোড পরীক্ষা করুন৷ |
| রিসোর্স অনুরোধ কমান | • বিলম্বিত সমস্যা হ্রাস করুন • পরিবেশন খরচ হ্রাস করুন • পরিবেশন কর্মক্ষমতা, নির্ভরযোগ্যতা এবং স্থিতিস্থাপকতা উন্নত করুন | যে কোনো ধরনের সম্পদের জন্য অত্যধিক বা অপ্রয়োজনীয় অনুরোধের জন্য দেখুন। উদাহরণ স্বরূপ: বারবার লোড হওয়া ফাইল, একাধিক সংস্করণে লোড হওয়া জাভাস্ক্রিপ্ট, CSS যা কখনো ব্যবহার করা হয় না, যে ছবিগুলো কখনো দেখা যায় না (বা অলস লোড হতে পারে)। |
| মেমরি ব্যবহার অপ্টিমাইজ করুন | মেমরি নতুন বাধা হয়ে দাঁড়াতে পারে , বিশেষ করে মোবাইল ডিভাইসে | হোম পৃষ্ঠা লোড করার সময় এবং অন্যান্য সাইটের বৈশিষ্ট্যগুলি ব্যবহার করার সময় মেমরি ব্যবহারের জন্য আপনার সাইটটিকে অন্যদের সাথে তুলনা করতে Chrome টাস্ক ম্যানেজার ব্যবহার করুন৷ |
| CPU লোড হ্রাস করুন | মোবাইল ডিভাইসে সীমিত সিপিইউ আছে, বিশেষ করে লো-স্পেক ডিভাইস | ভারী জাভাস্ক্রিপ্ট জন্য পরীক্ষা করুন. কভারেজ টুল সহ অব্যবহৃত JavaScript এবং CSS খুঁজুন। অত্যধিক DOM আকার এবং স্ক্রিপ্টগুলি পরীক্ষা করুন যা প্রথম লোডে অপ্রয়োজনীয়ভাবে চলে। একাধিক সংস্করণে লোড করা JavaScript বা লাইব্রেরিগুলি দেখুন যা ছোটখাট রিফ্যাক্টরিংয়ের মাধ্যমে এড়ানো যেতে পারে। |
ওয়েবসাইট অডিট করার জন্য বিস্তৃত সরঞ্জাম এবং কৌশল রয়েছে:
- সিস্টেম টুলস
- অন্তর্নির্মিত ব্রাউজার সরঞ্জাম
- ব্রাউজার এক্সটেনশন
- অনলাইন পরীক্ষার আবেদন
- এমুলেশন টুল
- বিশ্লেষণ
- সার্ভার এবং ব্যবসা সিস্টেম দ্বারা প্রদত্ত মেট্রিক্স
- স্ক্রিন এবং ভিডিও রেকর্ডিং
- ম্যানুয়াল পরীক্ষা
প্রতিটি ধরনের নিরীক্ষার জন্য কোন পদ্ধতি প্রাসঙ্গিক তা নিচে আপনি শিখবেন।
রেকর্ড রিসোর্স অনুরোধ: সংখ্যা, আকার, প্রকার এবং সময়
একটি সাইট অডিট করার সময় শুরু করার একটি ভাল জায়গা হল আপনার ব্রাউজারের নেটওয়ার্ক টুল দিয়ে পৃষ্ঠাগুলি পরীক্ষা করা৷ আপনি যদি এটি কীভাবে করবেন তা নিশ্চিত না হন, তাহলে Chrome DevTools নেটওয়ার্ক প্যানেলের মাধ্যমে কাজ শুরু করুন গাইড । ফায়ারফক্স , সাফারি , ইন্টারনেট এক্সপ্লোরার এবং এজ- এর জন্য অনুরূপ সরঞ্জাম উপলব্ধ।
পরিবর্তন করার আগে ফলাফলের রেকর্ড রাখতে ভুলবেন না। নেটওয়ার্ক অনুরোধের জন্য, এটি একটি স্ক্রিনশট হিসাবে সহজ হতে পারে — আপনি একটি JSON ফাইল হিসাবে প্রোফাইল ডেটা সংরক্ষণ করতে পারেন৷ পরীক্ষার ফলাফলগুলি কীভাবে সংরক্ষণ এবং ভাগ করতে হয় সে সম্পর্কে নীচে আরও তথ্য রয়েছে৷
আপনি নেটওয়ার্ক ব্যবহার নিরীক্ষণ শুরু করার আগে, আপনি প্রথম-লোড কর্মক্ষমতার জন্য সঠিক পরিসংখ্যান পান তা নিশ্চিত করতে ব্রাউজার ক্যাশে অক্ষম করতে ভুলবেন না। আপনি যদি ইতিমধ্যে একজন পরিষেবা কর্মীর মাধ্যমে ক্যাশিং করেন, ক্যাশে API স্টোরেজ সাফ করুন । আপনি একটি ছদ্মবেশী (ব্যক্তিগত) উইন্ডো ব্যবহার করতে চাইতে পারেন, যাতে আপনাকে ব্রাউজার ক্যাশে নিষ্ক্রিয় করা বা পূর্বে ক্যাশে করা এন্ট্রিগুলি সরানোর বিষয়ে চিন্তা করতে হবে না৷
এখানে কিছু মূল বৈশিষ্ট্য এবং মেট্রিক্স রয়েছে যা আপনাকে ব্রাউজার সরঞ্জামগুলির সাথে পরীক্ষা করা উচিত:
- লোড কর্মক্ষমতা: বাতিঘর লোড মেট্রিক্সের একটি সারাংশ প্রদান করে। অ্যাডী ওসমানী পেজ লোডের জন্য ব্যবহারকারীর গুরুত্বপূর্ণ মুহূর্তগুলির একটি দুর্দান্ত সারসংক্ষেপ লিখেছেন।
- সম্পদ লোড এবং পার্সিং এবং মেমরি ব্যবহারের জন্য টাইমলাইন ইভেন্ট । আপনি যদি আরও গভীরে যেতে চান, মেমরি এবং জাভাস্ক্রিপ্ট প্রোফাইলিং চালান।
- পৃষ্ঠার মোট ওজন এবং ফাইলের সংখ্যা।
- জাভাস্ক্রিপ্ট ফাইলের সংখ্যা এবং ওজন।
- যেকোন বিশেষভাবে বড় পৃথক জাভাস্ক্রিপ্ট ফাইল (ওভার, বলুন, 100KB)।
- অব্যবহৃত জাভাস্ক্রিপ্ট। আপনি Chrome কভারেজ টুল ব্যবহার করে চেক করতে পারেন।
- ইমেজ ফাইলের মোট সংখ্যা এবং ওজন।
- কোনো বিশেষ করে বড় ব্যক্তিগত ইমেজ ফাইল.
- চিত্র বিন্যাস: সেখানে কি PNG আছে যা JPEG বা SVG হতে পারে ? WebP ফলব্যাক সঙ্গে ব্যবহার করা হয়?
- প্রতিক্রিয়াশীল চিত্র কৌশল (যেমন srcset ) ব্যবহার করা হয় কিনা।
- HTML ফাইলের আকার।
- CSS ফাইলের মোট সংখ্যা এবং ওজন।
- অব্যবহৃত CSS. (ক্রোমে, কভারেজ প্যানেল ব্যবহার করুন।)
- অন্যান্য সম্পদ যেমন ওয়েব ফন্ট (আইকন ফন্ট সহ) এর সমস্যাযুক্ত ব্যবহার পরীক্ষা করুন৷
- পৃষ্ঠা লোড ব্লক করে এমন যেকোনো কিছুর জন্য DevTools টাইমলাইন দেখুন।
আপনি যদি দ্রুত ওয়াইফাই বা একটি দ্রুত সেলুলার সংযোগ থেকে কাজ করেন তবে কম ব্যান্ডউইথ এবং উচ্চ লেটেন্সি এমুলেশন দিয়ে পরীক্ষা করুন৷ মোবাইলের পাশাপাশি ডেস্কটপে পরীক্ষা করতে মনে রাখবেন — কিছু সাইট বিভিন্ন ডিভাইসের জন্য বিভিন্ন সম্পদ এবং লেআউট সরবরাহ করতে UA স্নিফিং ব্যবহার করে। আপনাকে রিমোট ডিবাগিং ব্যবহার করে প্রকৃত হার্ডওয়্যার পরীক্ষা করতে হতে পারে, শুধু ডিভাইস সিমুলেশন দিয়ে নয়।
মেমরি এবং CPU লোড পরীক্ষা করুন
আপনি পরিবর্তন করার আগে, মেমরি এবং CPU ব্যবহারের রেকর্ড রাখুন।
ক্রোমে আপনি উইন্ডো মেনু থেকে টাস্ক ম্যানেজার অ্যাক্সেস করতে পারেন। এটি একটি ওয়েব পৃষ্ঠার প্রয়োজনীয়তা পরীক্ষা করার একটি সহজ উপায়৷
পরীক্ষা প্রথম এবং পরবর্তী লোড কর্মক্ষমতা
লাইটহাউস , ওয়েবপেজেটেস্ট এবং পেজস্পিড ইনসাইটগুলি গতি, ডেটা খরচ এবং সম্পদের ব্যবহার বিশ্লেষণের জন্য দরকারী৷ ওয়েবপেজেটেস্ট স্ট্যাটিক-কন্টেন্ট ক্যাশিং, প্রথম বাইটের সময় এবং আপনার সাইট CDN-এর কার্যকর ব্যবহার করে কিনা তাও পরীক্ষা করবে।
ফলাফল সংরক্ষণ করুন
- ওয়েবপেজটেস্ট : পরীক্ষার ফলাফলের প্রত্যেকটির নিজস্ব URL আছে ।
- পেজস্পিড ইনসাইটস : অনলাইন পেজস্পিড ইনসাইটস টুলে এখন ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্ট ডেটা রয়েছে যা বাস্তব-বিশ্বের পারফরম্যান্স পরিসংখ্যান হাইলাইট করে।
- বাতিঘর : ডাউনলোড বোতামে ক্লিক করে Chrome DevTools অডিট প্যানেল থেকে প্রতিবেদনগুলি সংরক্ষণ করুন:
মূল প্রগ্রেসিভ ওয়েব অ্যাপের প্রয়োজনীয়তার জন্য পরীক্ষা করুন
লাইটহাউস আপনাকে নিরাপত্তা, কার্যকারিতা, অ্যাক্সেসযোগ্যতা, কর্মক্ষমতা এবং সার্চ ইঞ্জিনের কার্যকারিতা পরীক্ষা করতে সহায়তা করে। বিশেষ করে, Lighthouse আপনার সাইট সফলভাবে PWA বৈশিষ্ট্য যেমন পরিষেবা কর্মী এবং একটি ওয়েব অ্যাপ ম্যানিফেস্ট প্রয়োগ করে কিনা তা পরীক্ষা করে।
Lighthouse এছাড়াও পরীক্ষা করে যে আপনার সাইট একটি গ্রহণযোগ্য অফলাইন অভিজ্ঞতা প্রদান করতে পারে কিনা।
আপনি JSON হিসাবে একটি Lighthouse রিপোর্ট ডাউনলোড করতে পারেন অথবা, আপনি যদি Lighthouse Chrome এক্সটেনশন ব্যবহার করেন, তাহলে রিপোর্টটিকে GitHub সারাংশ হিসাবে শেয়ার করুন: শেয়ার বোতামে ক্লিক করুন, ভিউয়ারে খুলুন নির্বাচন করুন, তারপর নতুন উইন্ডোতে আবার শেয়ার বোতামে ক্লিক করুন এবং সারাংশ হিসাবে সংরক্ষণ করুন।
বাস্তব-বিশ্বের পারফরম্যান্স ট্র্যাক করতে বিশ্লেষণ, ইভেন্ট ট্র্যাকিং এবং ব্যবসার মেট্রিক্স ব্যবহার করুন
আপনি যদি পারেন, পরিবর্তনগুলি বাস্তবায়নের আগে বিশ্লেষণ ডেটার একটি রেকর্ড রাখুন: বাউন্স রেট, পৃষ্ঠায় সময়, প্রস্থান পৃষ্ঠা: আপনার ব্যবসার প্রয়োজনীয়তার সাথে যা প্রাসঙ্গিক।
সম্ভব হলে, প্রভাবিত হতে পারে এমন ব্যবসা এবং প্রযুক্তিগত মেট্রিক্স রেকর্ড করুন, যাতে আপনি পরিবর্তন করার পরে ফলাফল তুলনা করতে পারেন। উদাহরণস্বরূপ: একটি ই-কমার্স সাইট প্রতি মিনিটে অর্ডার ট্র্যাক করতে পারে বা চাপ এবং সহনশীলতা পরীক্ষার জন্য পরিসংখ্যান রেকর্ড করতে পারে। ব্যাক-এন্ড স্টোরেজ খরচ, CPU প্রয়োজনীয়তা, পরিবেশন খরচ এবং স্থিতিস্থাপকতা উন্নত হতে পারে যদি আপনি পৃষ্ঠার ওজন এবং সংস্থান অনুরোধগুলি কমিয়ে দেন।
যদি বিশ্লেষণ বাস্তবায়িত না হয়, এখন সময়! ব্যবসার মেট্রিক্স এবং অ্যানালিটিক্স হল আপনার সাইট কাজ করছে কি না তার চূড়ান্ত বিচারক। উপযুক্ত হলে, ব্যবহারকারীর ক্রিয়াকলাপের জন্য ইভেন্ট ট্র্যাকিং অন্তর্ভুক্ত করুন যেমন বোতাম ক্লিক এবং ভিডিও প্লে। আপনি লক্ষ্য প্রবাহ বিশ্লেষণ বাস্তবায়ন করতে চাইতে পারেন: যে পথগুলি দ্বারা আপনার ব্যবহারকারীরা 'রূপান্তর'-এর দিকে নেভিগেট করে।
ব্যবসায়িক মেট্রিক্সের সাথে পারফরম্যান্স মেট্রিক্স কীভাবে সম্পর্কযুক্ত তা পরীক্ষা করতে আপনি Google Analytics সাইটের গতিতে নজর রাখতে পারেন। উদাহরণস্বরূপ: 'হোমপেজ কত দ্রুত লোড হয়েছে?' 'হোম পেজের মাধ্যমে কি এন্ট্রির ফলে বিক্রি হয়েছে?'
Google Analytics নেভিগেশন টাইমিং 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 এ একবার দেখুন।