যখন আপনি একটি ব্যক্তিগত, ব্যবসায়িক বা পারিবারিক বাজেট সেট করেন, তখন আপনি আপনার ব্যয়ের একটি সীমা নির্ধারণ করেন এবং নিশ্চিত হন যে আপনি এটির মধ্যে থাকবেন। পারফরম্যান্স বাজেট একইভাবে কাজ করে, কিন্তু মেট্রিক্সের জন্য যা ওয়েবসাইটের কর্মক্ষমতাকে প্রভাবিত করে।
একটি পারফরম্যান্স বাজেট প্রতিষ্ঠিত এবং প্রয়োগ করা হলে আপনি নিশ্চিত হতে পারেন যে আপনার সাইট যত তাড়াতাড়ি সম্ভব রেন্ডার হবে। এটি আপনার দর্শকদের জন্য একটি ভাল অভিজ্ঞতা প্রদান করবে এবং ব্যবসায়িক মেট্রিক্সকে ইতিবাচকভাবে প্রভাবিত করবে।
কয়েকটি সহজ ধাপে আপনার প্রথম কর্মক্ষমতা বাজেট কীভাবে সংজ্ঞায়িত করবেন তা এখানে।
প্রাথমিক বিশ্লেষণ
আপনি যদি একটি বিদ্যমান সাইটের কর্মক্ষমতা উন্নত করার চেষ্টা করছেন, তাহলে সবচেয়ে গুরুত্বপূর্ণ পৃষ্ঠাগুলি সনাক্ত করে শুরু করুন। উদাহরণস্বরূপ, এগুলি এমন পৃষ্ঠা হতে পারে যেখানে ব্যবহারকারীর ট্রাফিকের সর্বোচ্চ পরিমাণ বা একটি পণ্যের ল্যান্ডিং পৃষ্ঠা রয়েছে৷
আপনি আপনার মূল পৃষ্ঠাগুলি সনাক্ত করার পরে, সেগুলি বিশ্লেষণ করার সময় এসেছে৷ প্রথমত, আমরা টাইমিং মাইলস্টোনগুলিতে ফোকাস করব যা ব্যবহারকারীর অভিজ্ঞতাকে সর্বোত্তম পরিমাপ করে।
Chrome DevTools-এর অডিট প্যানেলের অধীনে, আপনি Lighthouse খুঁজে পাবেন। এই দুটি বার রেকর্ড করতে গেস্ট উইন্ডোতে প্রতিটি পৃষ্ঠায় অডিট চালান:
একটি অত্যন্ত বিশেষ সার্চ ইঞ্জিন, Doggos.com, উদাহরণ হিসেবে ধরা যাক। Doggos.com-এর লক্ষ্য ইন্টারনেটে কুকুর-সম্পর্কিত সমস্ত জিনিস সূচী করা, এবং এর সবচেয়ে গুরুত্বপূর্ণ পৃষ্ঠাগুলি হল হোম এবং ফলাফল পৃষ্ঠা৷ এখানে FCP এবং TTI নম্বরগুলি ডেস্কটপ এবং মোবাইলে সাইটের জন্য পরিমাপ করা হয়েছে৷
| ডেস্কটপ | FCP | টিটিআই |
|---|---|---|
| হোমপেজ | 1,680 ms | 5,550 ms |
| ফলাফল পৃষ্ঠা | 2,060 ms | 6,690 ms |
| মুঠোফোন | FCP | টিটিআই |
|---|---|---|
| হোমপেজ | 1,800 ms | 6,150 ms |
| ফলাফল পৃষ্ঠা | 1,100 ms | 7,870 ms |
প্রতিযোগিতামূলক বিশ্লেষণ
একবার আপনি আপনার নিজের সাইট বিশ্লেষণ করলে, আপনার প্রতিযোগীদের সাইটগুলি বিশ্লেষণ করার সময় এসেছে৷ আপনার মতো ওয়েবসাইট থেকে ফলাফলের তুলনা করা একটি পারফরম্যান্স বাজেট বের করার একটি দুর্দান্ত উপায়। আপনি একটি প্রতিষ্ঠিত প্রকল্পে কাজ করছেন বা স্ক্র্যাচ থেকে শুরু করছেন কিনা, এটি একটি গুরুত্বপূর্ণ পদক্ষেপ। আপনি যখন আপনার প্রতিযোগীদের চেয়ে দ্রুত হন তখন আপনি প্রতিযোগিতামূলক সুবিধা পান।
আপনি যদি নিশ্চিত না হন যে কোন সাইটগুলি দেখতে হবে, এখানে চেষ্টা করার জন্য কয়েকটি সরঞ্জাম রয়েছে:
- গুগল সার্চের "related:" কীওয়ার্ড
- অ্যালেক্সার অনুরূপ সাইট বৈশিষ্ট্য
- অনুরূপ ওয়েব
একটি বাস্তবসম্মত ছবির জন্য, 10 বা তার বেশি প্রতিযোগী খুঁজে বের করার চেষ্টা করুন।
টাইমিং মাইলফলক জন্য বাজেট
এই উদাহরণে আমাদের বিশেষ সার্চ ইঞ্জিনে মুষ্টিমেয় কিছু প্রতিযোগী রয়েছে এবং আমরা মোবাইল ডিভাইসের জন্য হোমপেজ অপ্টিমাইজ করার উপর ফোকাস করব। ইন্টারনেট ট্র্যাফিকের অর্ধেকেরও বেশি আজ মোবাইল নেটওয়ার্কে ঘটে এবং মোবাইল নম্বরগুলিকে ডিফল্ট হিসাবে ব্যবহার করা শুধুমাত্র আপনার মোবাইল ব্যবহারকারীদেরই নয়, আপনার ডেস্কটপ ব্যবহারকারীদেরও উপকৃত করবে৷
সমস্ত অনুরূপ ওয়েবসাইটগুলির জন্য FCP এবং TTI বার সহ একটি চার্ট তৈরি করুন এবং গুচ্ছের মধ্যে সবচেয়ে দ্রুত হাইলাইট করুন৷ এই ধরনের একটি চার্ট আপনাকে প্রতিযোগিতার তুলনায় আপনার ওয়েবসাইট কেমন করছে তার একটি পরিষ্কার ছবি দেয়।
| সাইট/হোমপেজ | FCP | টিটিআই |
|---|---|---|
| goggles.com | 880 ms | 3,150 ms |
| Doggos.com | 1,800 ms | 6,500 ms |
| quackquackgo.com | 2,680 ms | 4,740 ms |
| ding.xyz | 2,420 ms | 7,040 ms |
উন্নতির জন্য জায়গা আছে এবং এর জন্য একটি ভাল নির্দেশিকা হল 20% নিয়ম । গবেষণায় বলা হয়েছে যে ব্যবহারকারীরা প্রতিক্রিয়ার সময়ের মধ্যে পার্থক্য স্বীকার করে যখন এটি 20% এর বেশি হয়। এর মানে হল যে আপনি যদি সেরা তুলনাযোগ্য সাইটের থেকে লক্ষণীয়ভাবে ভাল হতে চান তবে আপনাকে কমপক্ষে 20% দ্রুত হতে হবে ।
| পরিমাপ করা | বর্তমান সময় | বাজেট (প্রতিযোগিতার চেয়ে 20% দ্রুত) |
|---|---|---|
| FCP | 1,800 ms | 704 ms |
| টিটিআই | 6,500 ms | 2,520 ms |
আপনি যদি একটি বিদ্যমান সাইট অপ্টিমাইজ করার চেষ্টা করেন তবে সেই লক্ষ্যে পৌঁছানো অসম্ভব বলে মনে হতে পারে। এটি আপনার জন্য হাল ছেড়ে দেওয়ার লক্ষণ নয়। ছোট পদক্ষেপ দিয়ে শুরু করুন এবং আপনার বর্তমান গতির চেয়ে 20% দ্রুত বাজেট সেট করুন। সেখান থেকে অপটিমাইজ করতে থাকুন।
Doggos.com এর জন্য, একটি সংশোধিত বাজেট এইরকম দেখতে পারে।
| পরিমাপ করা | বর্তমান সময় | প্রাথমিক বাজেট (বর্তমান সময়ের চেয়ে 20% দ্রুত) | দীর্ঘমেয়াদী লক্ষ্য (প্রতিযোগিতার চেয়ে 20% দ্রুত) |
|---|---|---|---|
| FCP | 1,800 ms | 1,440 ms | 704 ms |
| টিটিআই | 6,500 ms | 5,200 ms | 2,520 ms |
বিভিন্ন মেট্রিক্স একত্রিত করুন
একটি কঠিন কর্মক্ষমতা বাজেট বিভিন্ন ধরনের মেট্রিক্স একত্রিত করে। আমরা ইতিমধ্যেই মাইলফলক সময়ের জন্য বাজেট সংজ্ঞায়িত করেছি এবং এখন আমরা মিশ্রণে আরও দুটি যোগ করব:
- পরিমাণ-ভিত্তিক মেট্রিক্স
- নিয়ম-ভিত্তিক মেট্রিক্স
পরিমাণ-ভিত্তিক মেট্রিক্সের জন্য বাজেট
আপনি যে মোট পৃষ্ঠা ওজন নম্বর নিয়ে আসেন না কেন, 170 KB-এর নিচে ক্রিটিক্যাল-পাথ রিসোর্স (সংকুচিত/মিনিফাইড) দেওয়ার চেষ্টা করুন। এটি গ্যারান্টি দেয় যে আপনার ওয়েবসাইট এমনকি সস্তা ডিভাইস এবং ধীর 3G- তেও দ্রুত হবে।
ডেস্কটপ অভিজ্ঞতার জন্য আপনার কাছে একটি বড় বাজেট থাকতে পারে, তবে বন্য হবেন না। গত বছরের HTTP আর্কাইভ ডেটা অনুসারে ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই পৃষ্ঠার গড় ওজন 1MB-এর বেশি। একটি পারফরম্যান্ট ওয়েবসাইট পেতে আপনাকে এই মধ্যম সংখ্যার নীচে লক্ষ্য রাখতে হবে।
এখানে TTI বাজেটের উপর ভিত্তি করে কয়েকটি উদাহরণ দেওয়া হল:
| অন্তর্জাল | যন্ত্র | জেএস | ছবি | সিএসএস | এইচটিএমএল | হরফ | মোট | ইন্টারেক্টিভ বাজেটের সময় |
|---|---|---|---|---|---|---|---|---|
| ধীর 3G | Moto G4 | 100 | 30 | 10 | 10 | 20 | ~170 KB | 5s |
| ধীর 4G | Moto G4 | 200 | 50 | 35 | 30 | 30 | ~345 KB | 3s |
| ওয়াইফাই | ডেস্কটপ | 300 | 250 | 50 | 50 | 100 | ~750 KB | 2 সে |
পরিমাণ মেট্রিক্সের উপর ভিত্তি করে একটি বাজেট সংজ্ঞায়িত করা একটি চতুর ব্যবসা। একটি ই-কমার্স ওয়েবসাইট যাতে প্রচুর পণ্যের ছবি থাকে তা একটি নিউজ পোর্টাল থেকে খুব আলাদা যা বেশিরভাগই পাঠ্য। আপনার সাইটে বিজ্ঞাপন বা বিশ্লেষণ থাকলে, এটি আপনার পাঠানো জাভাস্ক্রিপ্টের পরিমাণ বাড়িয়ে দেয়।
উপরের সারণীটিকে একটি প্রারম্ভিক বিন্দু হিসাবে ব্যবহার করুন এবং আপনি যে বিষয়বস্তুর সাথে কাজ করছেন তার উপর ভিত্তি করে সামঞ্জস্য করুন। আপনার পৃষ্ঠাগুলি কী অন্তর্ভুক্ত করবে তা নির্ধারণ করুন, আপনার গবেষণা পর্যালোচনা করুন এবং পৃথক সম্পদের আকারের জন্য একটি শিক্ষিত অনুমান নিন। উদাহরণস্বরূপ, আপনি যদি অনেকগুলি চিত্র সহ একটি ওয়েবসাইট তৈরি করেন, তাহলে JS আকারে কঠোর সীমা রাখুন।
একবার আপনার একটি কাজের ওয়েবসাইট হয়ে গেলে, ব্যবহারকারী-কেন্দ্রিক কর্মক্ষমতা মেট্রিক্সে আপনি কীভাবে করছেন তা পরীক্ষা করুন এবং আপনার বাজেট সামঞ্জস্য করুন।
নিয়ম-ভিত্তিক মেট্রিক্সের জন্য বাজেট
অত্যন্ত কার্যকর নিয়ম-ভিত্তিক মেট্রিক্স হল লাইটহাউস স্কোর। Lighthouse আপনার অ্যাপকে 5টি বিভাগে গ্রেড করে এবং এর মধ্যে একটি হল পারফরম্যান্স। পারফরম্যান্স স্কোরগুলি 5টি ভিন্ন মেট্রিকের উপর ভিত্তি করে গণনা করা হয়, যার মধ্যে রয়েছে ফার্স্ট কনটেন্টফুল পেইন্ট এবং ইন্টারেক্টিভ করার সময়।
আপনি যখন একটি দুর্দান্ত সাইট তৈরি করার চেষ্টা করেন, তখন লাইটহাউস পারফরম্যান্স স্কোর বাজেট কমপক্ষে 85 (100টির মধ্যে) সেট করুন । পুল-অনুরোধে এটি প্রয়োগ করতে Lighthouse CI ব্যবহার করুন।
অগ্রাধিকার দিন
নিজেকে জিজ্ঞাসা করুন আপনি আপনার সাইটে কি ধরনের ইন্টারঅ্যাকশন আশা করেন। যদি এটি একটি সংবাদ ওয়েবসাইট হয়, ব্যবহারকারীদের প্রাথমিক লক্ষ্য হল বিষয়বস্তু পড়া যাতে আপনার দ্রুত রেন্ডারিং এবং FCP কম রাখার উপর ফোকাস করা উচিত। Doggos.com দর্শকরা যত তাড়াতাড়ি সম্ভব প্রাসঙ্গিক লিঙ্কগুলিতে ক্লিক করতে চান, তাই শীর্ষ অগ্রাধিকার কম TTI।
আপনার দর্শকদের ঠিক কোন অংশটি ডেস্কটপ বনাম মোবাইল ডিভাইসে ব্রাউজ করে তা খুঁজে বের করুন এবং সেই অনুযায়ী অগ্রাধিকার দিন। এটি বের করার একটি উপায় হল Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্ট ড্যাশবোর্ডের মাধ্যমে প্রতিযোগীদের ওয়েবসাইটে আপনার দর্শকরা কী করছে তা পরীক্ষা করা।
পরবর্তী পদক্ষেপ
নিশ্চিত করুন যে আপনার পারফরম্যান্স বাজেট পুরো প্রকল্প জুড়ে প্রয়োগ করা হয়েছে এবং এটি আপনার বিল্ড প্রক্রিয়াতে অন্তর্ভুক্ত করুন।