আপনার সাইটের ওয়েব ভাইটালগুলিতে ডেটা সংগ্রহ করা তাদের উন্নতির দিকে প্রথম পদক্ষেপ। একটি ভাল বৃত্তাকার বিশ্লেষণ বাস্তব-বিশ্ব এবং ল্যাব পরিবেশ উভয় থেকে কর্মক্ষমতা ডেটা সংগ্রহ করবে। ওয়েব ভাইটাল পরিমাপের জন্য ন্যূনতম কোড পরিবর্তন প্রয়োজন এবং বিনামূল্যে টুলিং ব্যবহার করে সম্পন্ন করা যেতে পারে।
RUM ডেটা ব্যবহার করে ওয়েব ভাইটাল পরিমাপ করুন
রিয়েল ইউজার মনিটরিং (RUM) ডেটা, যা ফিল্ড ডেটা নামেও পরিচিত, একটি সাইটের প্রকৃত ব্যবহারকারীদের দ্বারা অভিজ্ঞ কর্মক্ষমতা ক্যাপচার করে। কোনও সাইট প্রস্তাবিত কোর ওয়েব ভাইটাল থ্রেশহোল্ডগুলি পূরণ করে কিনা তা নির্ধারণ করতে Google যা RUM ডেটা ব্যবহার করে৷
শুরু হচ্ছে
আপনার কাছে RUM সেটআপ না থাকলে, নিম্নলিখিত টুলগুলি আপনাকে দ্রুত আপনার সাইটের বাস্তব-বিশ্বের কর্মক্ষমতা সম্পর্কে ডেটা সরবরাহ করবে৷ এই টুলগুলি সবই একই অন্তর্নিহিত ডেটাসেটের উপর ভিত্তি করে ( Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন ), কিন্তু ব্যবহারের ক্ষেত্রে সামান্য ভিন্নতা রয়েছে:
- Chrome DevTools পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স ভিউতে CrUX ডেটাসেটের সাথে একীভূত হয়। একই পৃষ্ঠায় বাস্তব-ব্যবহারকারীর অভিজ্ঞতার সাথে আপনার স্থানীয় অভিজ্ঞতার তুলনা করে, আপনি আপনার ডিবাগিং প্রচেষ্টাকে কোথায় ফোকাস করবেন সে সম্পর্কে আরও সচেতন সিদ্ধান্ত নিতে পারেন। আপনি যদি আপনার সাইটের ওয়েব ভাইটালগুলি পরিমাপ এবং উন্নত করতে শুরু করার জন্য একটি একক পদক্ষেপ খুঁজছেন, আমরা Chrome DevTools পারফরম্যান্স প্যানেল ব্যবহার করার পরামর্শ দিই৷
- PageSpeed Insights (PSI) গত 28 দিনে সামগ্রিক পৃষ্ঠা-স্তর এবং উত্স-স্তরের কর্মক্ষমতা সম্পর্কে রিপোর্ট করে। উপরন্তু, এটি কর্মক্ষমতা উন্নত করার পরামর্শ প্রদান করে। PSI ওয়েবে এবং একটি API হিসাবে উপলব্ধ।
- সার্চ কনসোল প্রতি-পৃষ্ঠার ভিত্তিতে কর্মক্ষমতা ডেটা প্রতিবেদন করে। এটি নির্দিষ্ট পৃষ্ঠাগুলি সনাক্ত করার জন্য এটিকে উপযুক্ত করে তোলে যেগুলির উন্নতি প্রয়োজন৷ পেজস্পিড ইনসাইটের বিপরীতে, সার্চ কনসোল রিপোর্টিংয়ে ঐতিহাসিক পারফরম্যান্স ডেটা অন্তর্ভুক্ত থাকে। Search Console শুধুমাত্র আপনার মালিকানাধীন এবং যাচাইকৃত মালিকানা আছে এমন সাইটগুলির সাথে ব্যবহার করা যেতে পারে৷
- CrUX Vis হল একটি পূর্বনির্মাণ ড্যাশবোর্ড যা একটি URL বা আপনার পছন্দের উৎসের জন্য CrUX ইতিহাসের ডেটা দেখায় (যেখানে CrUX ডেটাসেটে উপলব্ধ)। এটি CrUX History API এর উপরে তৈরি করা হয়েছে এবং সেটআপ প্রক্রিয়াটি প্রায় এক মিনিট সময় নেয়। পেজস্পিড ইনসাইট এবং সার্চ কনসোলের তুলনায়, CrUX Vis-এ আরও ডেটা উদাহরণ, LCP সাবপার্টস, নেভিগেশনের ধরন এবং আরও অনেক কিছু রয়েছে।
- CrUX Vis হল একটি ঐতিহাসিক ড্যাশবোর্ড যা আপনার পছন্দের উৎস বা URL-এর জন্য CrUX ডেটা প্রকাশ করে। এটি CrUX History API-এর উপরে নির্মিত। PageSpeed Insights এবং Search Console-এর তুলনায়, CrUX Vis রিপোর্টিং-এ আরও বিশদ বিবরণ রয়েছে—উদাহরণস্বরূপ, নেভিগেশনের ধরন এবং LCP এবং RTT ডেটা CrUX Vis-এ উপলব্ধ।
এটি লক্ষণীয় যে যদিও পূর্বে তালিকাভুক্ত টুলগুলি ওয়েব ভাইটাল পরিমাপের সাথে "শুরু করার" জন্য উপযুক্ত, তবে সেগুলি অন্যান্য প্রসঙ্গেও কার্যকর হতে পারে। বিশেষ করে, CrUX এবং PSI উভয়ই একটি API হিসাবে উপলব্ধ এবং ড্যাশবোর্ড এবং অন্যান্য রিপোর্টিং তৈরি করতে ব্যবহার করা যেতে পারে।
RUM ডেটা সংগ্রহ করুন
যদিও CrUX-ভিত্তিক টুলগুলি Web Vitals পারফরম্যান্সের তদন্তের জন্য একটি ভাল সূচনা বিন্দু, আমরা দৃঢ়ভাবে এটিকে আপনার নিজস্ব RUM এর সাথে সম্পূরক করার পরামর্শ দিই। আপনি নিজে যে RUM ডেটা সংগ্রহ করেন তা আপনার সাইটের কর্মক্ষমতা সম্পর্কে আরও বিস্তারিত এবং তাৎক্ষণিক প্রতিক্রিয়া প্রদান করতে পারে। এটি সমস্যাগুলি সনাক্ত করা এবং সম্ভাব্য সমাধানগুলি পরীক্ষা করা সহজ করে তোলে।
আপনি একটি ডেডিকেটেড RUM প্রদানকারী ব্যবহার করে বা আপনার নিজস্ব টুলিং সেট আপ করে আপনার নিজস্ব RUM ডেটা সংগ্রহ করতে পারেন।
ডেডিকেটেড RUM প্রদানকারীরা RUM ডেটা সংগ্রহ এবং রিপোর্ট করার ক্ষেত্রে বিশেষজ্ঞ। এই পরিষেবাগুলির সাথে Core Web Vitals ব্যবহার করতে, আপনার RUM প্রদানকারীকে আপনার সাইটের জন্য Core Web Vitals মনিটরিং সক্ষম করার বিষয়ে জিজ্ঞাসা করুন।
যদি আপনার কোনো RUM প্রদানকারী না থাকে, তাহলে আপনি web-vitals JavaScript লাইব্রেরি ব্যবহার করে এই মেট্রিক্স সংগ্রহ ও রিপোর্ট করার জন্য আপনার বিদ্যমান অ্যানালিটিক্স সেটআপ বাড়াতে পারবেন। এই পদ্ধতিটি পরবর্তীতে আরও বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে।
ওয়েব-ভিটালস জাভাস্ক্রিপ্ট লাইব্রেরি
আপনি যদি Web Vitals-এর জন্য আপনার নিজস্ব RUM সেটআপ বাস্তবায়ন করেন, তাহলে ওয়েব ভাইটাল পরিমাপ সংগ্রহ করার সবচেয়ে সহজ উপায় হল web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা। web-vitals হল একটি ছোট, মডুলার লাইব্রেরি (~2KB) যা ক্ষেত্র-পরিমাপযোগ্য ওয়েব ভাইটাল মেট্রিক্সের প্রতিটি সংগ্রহ এবং রিপোর্ট করার জন্য একটি সুবিধাজনক API প্রদান করে।
ওয়েব ভাইটালগুলি তৈরি করা মেট্রিক্সগুলি ব্রাউজারের অন্তর্নির্মিত পারফরম্যান্স APIগুলি দ্বারা সরাসরি প্রকাশিত হয় না - বরং তাদের উপরে তৈরি করা হয়৷ উদাহরণস্বরূপ, Cumulative Layout Shift (CLS) প্রয়োগ করা হয় Layout Instability API ব্যবহার করে। web-vitals ব্যবহার করে, আপনাকে এই মেট্রিক্সগুলি নিজে বাস্তবায়নের বিষয়ে চিন্তা করতে হবে না; এটি নিশ্চিত করে যে আপনার সংগ্রহ করা ডেটা প্রতিটি মেট্রিকের জন্য পদ্ধতি এবং সর্বোত্তম অনুশীলনের সাথে মেলে।
web-vitals বাস্তবায়নের বিষয়ে আরও তথ্যের জন্য, ফিল্ড গাইডে ডকুমেন্টেশন এবং ওয়েব ভাইটালগুলি পরিমাপের জন্য সর্বোত্তম অনুশীলনগুলি পড়ুন।
ডেটা একত্রিতকরণ
web-vitals দ্বারা সংগৃহীত পরিমাপের রিপোর্ট করা অপরিহার্য। যদি এই ডেটা পরিমাপ করা হয় কিন্তু রিপোর্ট করা না হয়, আপনি এটি কখনই দেখতে পাবেন না। web-vitals ডকুমেন্টেশনে উদাহরণ রয়েছে যেগুলি দেখায় কিভাবে একটি জেনেরিক API এন্ডপয়েন্ট , Google Analytics , বা Google ট্যাগ ম্যানেজারে ডেটা পাঠাতে হয়।
আপনার যদি ইতিমধ্যেই একটি প্রিয় রিপোর্টিং টুল থাকে, তাহলে সেটি ব্যবহার করার কথা বিবেচনা করুন। যদি না হয়, Google Analytics বিনামূল্যে এবং এই উদ্দেশ্যে ব্যবহার করা যেতে পারে।
কোন টুলটি ব্যবহার করতে হবে তা বিবেচনা করার সময়, কার ডেটা অ্যাক্সেস করতে হবে সে সম্পর্কে চিন্তা করা সহায়ক। ব্যবসাগুলি সাধারণত সবচেয়ে বড় পারফরম্যান্স জয়লাভ করে যখন পুরো কোম্পানি, একটি একক বিভাগের পরিবর্তে, কর্মক্ষমতা উন্নত করতে আগ্রহী হয়। বিভিন্ন বিভাগ থেকে কীভাবে কেনাকাটা করা যায় তা শিখতে ক্রস-কার্যকরীভাবে ওয়েবসাইটের গতি ঠিক করা দেখুন।
ডেটা ব্যাখ্যা
কর্মক্ষমতা ডেটা বিশ্লেষণ করার সময়, বিতরণের লেজের দিকে মনোযোগ দেওয়া গুরুত্বপূর্ণ। RUM ডেটা প্রায়শই প্রকাশ করে যে কর্মক্ষমতা ব্যাপকভাবে পরিবর্তিত হয় — কিছু ব্যবহারকারীর দ্রুত অভিজ্ঞতা আছে, অন্যদের ধীর অভিজ্ঞতা আছে। যাইহোক, ডেটা সংক্ষিপ্ত করতে মিডিয়ান ব্যবহার করে এই আচরণটি মাস্ক করতে পারে।
ওয়েব ভাইটাল সংক্রান্ত বিষয়ে, কোনো সাইট বা পৃষ্ঠা প্রস্তাবিত থ্রেশহোল্ডগুলি পূরণ করে কিনা তা নির্ধারণ করতে মধ্য বা গড় হিসাবে পরিসংখ্যানের পরিবর্তে Google "ভাল" অভিজ্ঞতার শতাংশ ব্যবহার করে। বিশেষভাবে, একটি সাইট বা পৃষ্ঠাকে কোর ওয়েব ভাইটাল থ্রেশহোল্ড পূরণ হিসাবে বিবেচনা করার জন্য, 75% পৃষ্ঠা ভিজিট প্রতিটি মেট্রিকের জন্য "ভাল" থ্রেশহোল্ড পূরণ করতে হবে।
ল্যাব ডেটা ব্যবহার করে ওয়েব ভাইটাল পরিমাপ করুন
ল্যাব ডেটা , সিন্থেটিক ডেটা নামেও পরিচিত, প্রকৃত ব্যবহারকারীর পরিবর্তে একটি নিয়ন্ত্রিত পরিবেশ থেকে সংগ্রহ করা হয়। RUM ডেটার বিপরীতে, ল্যাব ডেটা প্রাক-প্রোডাকশন পরিবেশ থেকে সংগ্রহ করা যেতে পারে এবং সেইজন্য ডেভেলপার ওয়ার্কফ্লো এবং ক্রমাগত ইন্টিগ্রেশন প্রক্রিয়াগুলিতে অন্তর্ভুক্ত করা যেতে পারে। সিন্থেটিক ডেটা সংগ্রহ করে এমন সরঞ্জামগুলির উদাহরণ হল Lighthouse এবং WebPageTest৷
বিবেচনা
RUM ডেটা এবং ল্যাব ডেটার মধ্যে সর্বদা অসঙ্গতি থাকবে-বিশেষত যদি নেটওয়ার্কের অবস্থা, ডিভাইসের ধরন, বা ল্যাব পরিবেশের অবস্থান ব্যবহারকারীদের থেকে উল্লেখযোগ্যভাবে আলাদা হয়। যাইহোক, যখন বিশেষভাবে ওয়েব ভাইটাল মেট্রিক্সে ল্যাব ডেটা সংগ্রহের কথা আসে, তখন কয়েকটি নির্দিষ্ট বিবেচ্য বিষয় রয়েছে যা লক্ষ্য করা গুরুত্বপূর্ণ:
- ল্যাব পরিবেশে পরিমাপ করা সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) RUM ডেটার সাথে পৃষ্ঠাটি লোড করতে বিলম্বের কারণে (পুনঃনির্দেশ, সার্ভারের সাথে লেটেন্সি সংযোগ বা আনক্যাশড ডেটার মাধ্যমে), স্ক্রীনের উপর নির্ভর করে বিভিন্ন ব্যবহারকারীকে দেখানো ভিন্ন বিষয়বস্তু, বা অন্যান্য কারণে (ব্যক্তিগতকরণ ব্যানার সহ) (কুকি ব্যানার সহ) ফিল্ডে পরিমাপ করা থেকে ভিন্ন হতে পারে।
- ল্যাব পরিবেশে পরিমাপ করা ক্রমবর্ধমান লেআউট শিফট (CLS) RUM ডেটাতে পরিলক্ষিত CLS থেকে কৃত্রিমভাবে কম হতে পারে। অনেক ল্যাব টুল শুধুমাত্র পৃষ্ঠাটি লোড করে - তারা এটির সাথে ইন্টারঅ্যাক্ট করে না। ফলস্বরূপ, তারা কেবলমাত্র লেআউট শিফটগুলিই ক্যাপচার করে যা প্রাথমিক পৃষ্ঠা লোডের সময় ঘটে। বিপরীতে, RUM টুল দ্বারা পরিমাপ করা CLS অপ্রত্যাশিত লেআউট পরিবর্তনগুলি ক্যাপচার করে যা পৃষ্ঠার সমগ্র জীবনকাল জুড়ে ঘটে।
- নেক্সট পেইন্টের সাথে ইন্টারঅ্যাকশন (INP) ল্যাব পরিবেশে পরিমাপ করা যায় না কারণ এটির জন্য পৃষ্ঠার সাথে ব্যবহারকারীর মিথস্ক্রিয়া প্রয়োজন। ফলস্বরূপ, টোটাল ব্লকিং টাইম (TBT) হল INP-এর জন্য প্রস্তাবিত ল্যাব প্রক্সি। TBT পরিমাপ করে "প্রথম কন্টেন্টফুল পেইন্ট এবং ইন্টারঅ্যাকটিভের সময় এর মধ্যে মোট সময় যে সময়ে পৃষ্ঠাটি ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া জানানো থেকে অবরুদ্ধ করা হয়"। যদিও INP এবং TBT আলাদাভাবে গণনা করা হয়, তবে তারা উভয়ই বুটস্ট্র্যাপ প্রক্রিয়া চলাকালীন একটি অবরুদ্ধ প্রধান থ্রেডের প্রতিফলন। যখন প্রধান থ্রেড ব্লক করা হয়, ব্রাউজার ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়া জানাতে বিলম্বিত হয়।
টুলিং
এই টুলগুলি ওয়েব ভাইটালগুলির ল্যাব পরিমাপ সংগ্রহ করতে ব্যবহার করা যেতে পারে:
- Chrome DevTools পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স ভিউতে একটি প্রদত্ত পৃষ্ঠার জন্য মূল ওয়েব ভাইটালগুলি পরিমাপ করে এবং রিপোর্ট করে। এই দৃশ্যটি বিকাশকারীদের কোড পরিবর্তন করার সাথে সাথে রিয়েল-টাইম কর্মক্ষমতা প্রতিক্রিয়া প্রদান করে।
- LCP, CLS, এবং TBT-এ লাইটহাউস লাইটহাউস রিপোর্ট করে এবং সম্ভাব্য পারফরম্যান্সের উন্নতিও হাইলাইট করে। Lighthouse একটি npm প্যাকেজ হিসাবে Chrome DevTools-এ উপলব্ধ, এবং Lighthouse CI ব্যবহার করে ক্রমাগত ইন্টিগ্রেশন ওয়ার্কফ্লোতে অন্তর্ভুক্ত করা যেতে পারে।
- WebPageTest এর স্ট্যান্ডার্ড রিপোর্টিং এর একটি অংশ হিসাবে ওয়েব Vitals অন্তর্ভুক্ত করে। WebPageTest নির্দিষ্ট ডিভাইস এবং নেটওয়ার্ক অবস্থার অধীনে ওয়েব ভাইটাল সম্পর্কে তথ্য সংগ্রহের জন্য দরকারী।