কোর ওয়েব ভাইটালস: উন্নত ওয়েব পারফরম্যান্সের জন্য পরিমাপ ও উন্নয়ন

আপনি একটি দ্রুত ওয়েবসাইট তৈরি করেছেন, কিন্তু ব্যবহারকারীরা এখনও ধীরগতির অভিযোগ করছেন। অথবা হয়তো দুর্দান্ত কন্টেন্ট সত্ত্বেও আপনার এসইও র‍্যাঙ্কিং আটকে আছে। এর কারণ হতে পারে কোর ওয়েব ভাইটালস—ব্যবহারকারীর অভিজ্ঞতার জন্য গুগলের মেট্রিক্স। এই গাইডে, আপনি জানতে পারবেন এগুলি কী, কীভাবে পরিমাপ করবেন এবং প্রতিটি উন্নত করার ব্যবহারিক পদক্ষেপ।

কোর ওয়েব ভাইটালস কী?

কোর ওয়েব ভাইটালস হল তিনটি নির্দিষ্ট মেট্রিক যা গুগল ব্যবহারকারীর অভিজ্ঞতা পরিমাপ করতে ব্যবহার করে:

• লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP): লোডিং পারফরম্যান্স পরিমাপ করে। পৃষ্ঠা লোড শুরু হওয়ার ২.৫ সেকেন্ডের মধ্যে এটি ঘটতে হবে।
• ইন্টার্যাকশন টু নেক্সট পেইন্ট (INP): প্রতিক্রিয়াশীলতা পরিমাপ করে। ৭৫% পৃষ্ঠা ভিজিটের জন্য এটি ২০০ মিলিসেকেন্ডের কম হওয়া উচিত।
• কিউমুলেটিভ লেআউট শিফট (CLS): ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। এটি ০.১-এর কম হওয়া উচিত।

এই মেট্রিকগুলি গুগলের পেজ এক্সপেরিয়েন্স সিগন্যালের অংশ এবং আপনার সার্চ র‍্যাঙ্কিংকে প্রভাবিত করতে পারে। আরও গুরুত্বপূর্ণভাবে, তারা প্রকৃত ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে—ধীর সাইটগুলি দর্শকদের বিরক্ত করে এবং তাদের দূরে সরিয়ে দেয়।

কোর ওয়েব ভাইটালস কীভাবে পরিমাপ করবেন

যা পরিমাপ করেন না, তা উন্নত করতে পারেন না। দুটি প্রধান ধরনের টুল রয়েছে: ল্যাব টুল (সিন্থেটিক টেস্টিং) এবং ফিল্ড টুল (রিয়েল ইউজার মনিটরিং)।

ল্যাব টুল

• Lighthouse: Chrome DevTools-এ অন্তর্নির্মিত (Audits ট্যাব)। একটি স্কোর এবং নির্দিষ্ট সুযোগ প্রদান করে।
• PageSpeed Insights: ওয়েব টুল যা ল্যাব এবং ফিল্ড ডেটা একত্রিত করে।
• WebPageTest: কাস্টম লোকেশন এবং ডিভাইস সহ উন্নত টেস্টিং।

ফিল্ড টুল

• Chrome User Experience Report (CrUX): Chrome ব্যবহারকারীদের থেকে বাস্তব-জগতের ডেটা, PageSpeed Insights বা BigQuery-এর মাধ্যমে উপলব্ধ।
• web-vitals লাইব্রেরি: আপনার নিজের অ্যানালিটিক্সে মেট্রিক্স পরিমাপের জন্য জাভাস্ক্রিপ্ট লাইব্রেরি।
• Search Console: কোর ওয়েব ভাইটালস রিপোর্ট CrUX ডেটার উপর ভিত্তি করে গ্রুপ পারফরম্যান্স দেখায়।

দ্রুত ওভারভিউ পেতে PageSpeed Insights দিয়ে শুরু করুন, তারপর সময়ের সাথে প্রকৃত ব্যবহারকারীর মেট্রিক্স ট্র্যাক করতে web-vitals লাইব্রেরি ব্যবহার করুন।

LCP (লার্জেস্ট কন্টেন্টফুল পেইন্ট) উন্নত করা

LCP সাধারণত ফোল্ডের উপরে থাকা বৃহত্তম ছবি বা টেক্সট ব্লক। এটি উন্নত করতে:

1. ছবি অপ্টিমাইজ করুন: ছবি কম্প্রেস করুন, WebP বা AVIF-এর মতো আধুনিক ফরম্যাট ব্যবহার করুন, এবং srcset দিয়ে রেসপন্সিভ ছবি পরিবেশন করুন।
2. গুরুত্বপূর্ণ রিসোর্স প্রিলোড করুন: হিরো ইমেজ এবং ফন্টের জন্য <link rel="preload"> ব্যবহার করুন।
3. রেন্ডার-ব্লকিং রিসোর্স দূর করুন: গুরুত্বপূর্ণ CSS ইনলাইন করুন, অ-গুরুত্বপূর্ণ CSS এবং জাভাস্ক্রিপ্ট ডিফার করুন।
4. CDN ব্যবহার করুন: ব্যবহারকারীদের কাছাকাছি অবস্থান থেকে অ্যাসেট পরিবেশন করুন।
5. ক্যাশিং সক্রিয় করুন: স্ট্যাটিক অ্যাসেটের জন্য দীর্ঘ ক্যাশ সময় সেট করুন।

ছবির জন্য, TryQuickToolBox-এর Image Compressor-এর মতো টুল দৃশ্যমান গুণমান হ্রাস না করে ফাইল আকার কমাতে সাহায্য করতে পারে।

INP (ইন্টার্যাকশন টু নেক্সট পেইন্ট) উন্নত করা

INP একটি ব্যবহারকারীর ইন্টার্যাকশন (ক্লিক, ট্যাপ, কী প্রেস) থেকে পরবর্তী ভিজ্যুয়াল আপডেট পর্যন্ত সময় পরিমাপ করে। এটি উন্নত করতে:

1. জাভাস্ক্রিপ্ট এক্সিকিউশন সময় কমান: দীর্ঘ কাজ ভাগ করুন, মেইন থ্রেডে ইল্ড করতে requestIdleCallback বা setTimeout ব্যবহার করুন।
2. বড় DOM আকার এড়িয়ে চলুন: DOM ১,৫০০ নোডের নিচে এবং গভীরতা ৩২ স্তরের নিচে রাখুন।
3. ইভেন্ট হ্যান্ডলার অপ্টিমাইজ করুন: স্ক্রল এবং রিসাইজের মতো ঘন ঘন ইভেন্ট ডিবাউন্স বা থ্রটল করুন।
4. ওয়েব ওয়ার্কার ব্যবহার করুন: ভারী গণনা মেইন থ্রেড থেকে সরান।
5. থার্ড-পার্টি স্ক্রিপ্ট কমান: তারা প্রায়ই মেইন থ্রেড ব্লক করে।

দীর্ঘ কাজ সনাক্ত এবং অপ্টিমাইজ করতে Chrome DevTools পারফরম্যান্স প্যানেল ব্যবহার করুন।

CLS (কিউমুলেটিভ লেআউট শিফট) উন্নত করা

CLS অপ্রত্যাশিত লেআউট শিফট পরিমাপ করে। এটি কমাতে:

1. ছবি এবং ভিডিওতে সর্বদা width এবং height অ্যাট্রিবিউট অন্তর্ভুক্ত করুন: এটি স্থান সংরক্ষণ করে।
2. বিজ্ঞাপন এবং এমবেডের জন্য স্থান সংরক্ষণ করুন: CSS aspect-ratio বা নির্দিষ্ট মাত্রা ব্যবহার করুন।
3. বিদ্যমান কন্টেন্টের উপরে কন্টেন্ট সন্নিবেশ এড়িয়ে চলুন: ব্যবহারকারীর ইন্টার্যাকশনের প্রতিক্রিয়া ছাড়া।
4. font-display: swap ব্যবহার করুন: অদৃশ্য টেক্সট প্রতিরোধ করে কিন্তু সামান্য শিফট হতে পারে; গুরুত্বপূর্ণ টেক্সটের জন্য font-display: optional বিবেচনা করুন।
5. ডায়নামিক কন্টেন্টের সাথে সতর্ক থাকুন: এটি ফোল্ডের নিচে লোড করুন বা ট্রানজিশন মসৃণভাবে অ্যানিমেট করুন।

কোর ওয়েব ভাইটালস মেট্রিক্সের তুলনা

চলমান মনিটরিংয়ের জন্য টুল এবং কৌশল

কোর ওয়েব ভাইটালস উন্নত করা এককালীন কাজ নয়। ক্রমাগত মনিটরিং সেট আপ করুন:

• আপনার অ্যানালিটিক্স প্ল্যাটফর্মে মেট্রিক্স পাঠাতে web-vitals লাইব্রেরি ব্যবহার করুন।
• মেট্রিক্স থ্রেশহোল্ড ছাড়িয়ে গেলে সতর্কতা সেট আপ করুন।
• রিগ্রেশন ধরতে নিয়মিত CI/CD-তে Lighthouse চালান।
• প্রকৃত-ব্যবহারকারীর প্রবণতার জন্য Search Console-এ CrUX ডেটা মনিটর করুন।

দ্রুত চেকের জন্য, প্রতিটি উল্লেখযোগ্য পরিবর্তনের পরে Chrome DevTools Lighthouse ট্যাব বা PageSpeed Insights ব্যবহার করুন।

সাধারণ জিজ্ঞাসা

কোর ওয়েব ভাইটালস কী এবং কেন গুরুত্বপূর্ণ?

কোর ওয়েব ভাইটালস হল তিনটি মেট্রিক (LCP, INP, CLS) যা লোডিং, ইন্টার্যাক্টিভিটি এবং ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। এগুলি গুরুত্বপূর্ণ কারণ তারা প্রকৃত ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে এবং গুগল একটি র‍্যাঙ্কিং সংকেত হিসেবে ব্যবহার করে।

কত ঘন ঘন কোর ওয়েব ভাইটালস পরিমাপ করা উচিত?

প্রতিটি বড় কোড পরিবর্তনের পরে পরিমাপ করুন, এবং সময়ের সাথে প্রকৃত-ব্যবহারকারীর মেট্রিক্স ট্র্যাক করতে ক্রমাগত ফিল্ড মনিটরিং সেট আপ করুন। Lighthouse-এর মতো ল্যাব টুল দ্রুত চেকের জন্য ভাল, কিন্তু ফিল্ড ডেটা প্রকৃত ব্যবহারকারীর অভিজ্ঞতা দেখায়।

একজন ডেভেলপার ছাড়া কি কোর ওয়েব ভাইটালস উন্নত করা সম্ভব?

ছবি কম্প্রেস করার মতো কিছু উন্নতি টুল দিয়ে করা যায়, কিন্তু বেশিরভাগের জন্য কোড পরিবর্তন প্রয়োজন (যেমন, width/height অ্যাট্রিবিউট যোগ করা, জাভাস্ক্রিপ্ট অপ্টিমাইজ করা)। সাধারণত একজন ডেভেলপার বা ওয়েব পারফরম্যান্সের সাথে পরিচিত ব্যক্তি প্রয়োজন।

উন্নত LCP-এর জন্য আপনার ছবি অপ্টিমাইজ করতে প্রস্তুত? গুণমান ত্যাগ না করে ফাইল আকার কমাতে আমাদের বিনামূল্যের Image Compressor ব্যবহার করে দেখুন।