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

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

আপনি একটি সুন্দর ওয়েবসাইট তৈরি করেছেন, কিন্তু ব্যবহারকারীরা এটি ধীর মনে করে চলে যাচ্ছে। কোর ওয়েব ভাইটালস হল বাস্তব-বিশ্বের ব্যবহারকারীর অভিজ্ঞতার জন্য Google-এর মেট্রিকস: Largest Contentful Paint (LCP), First Input Delay (FID), এবং Cumulative Layout Shift (CLS)। এগুলি সার্চ র‌্যাঙ্কিং এবং আরও গুরুত্বপূর্ণভাবে, দর্শনার্থীরা থাকবে কিনা তা প্রভাবিত করে। এই গাইডটি দেখায় কীভাবে সেগুলি পরিমাপ ও উন্নত করবেন।

তিনটি মেট্রিক বোঝা

প্রতিটি মেট্রিক লোডিং, ইন্টার‌্যাক্টিভিটি এবং ভিজ্যুয়াল স্থিতিশীলতার একটি ভিন্ন দিক ধারণ করে।

দ্রষ্টব্য: ২০২৪ সালে FID-কে Interaction to Next Paint (INP) দ্বারা প্রতিস্থাপিত করা হচ্ছে, তবে অপটিমাইজেশন নীতিগুলি একই রকম থাকে।

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

আপনার ল্যাব এবং ফিল্ড উভয় ডেটা প্রয়োজন। ল্যাব টুলগুলি শর্ত অনুকরণ করে; ফিল্ড ডেটা প্রকৃত ব্যবহারকারীদের প্রতিফলিত করে।

1. Chrome DevTools Lighthouse: Lighthouse ট্যাবে একটি অডিট চালান। এটি ল্যাব স্কোর এবং সুযোগ প্রদান করে।
2. PageSpeed Insights: আপনার URL লিখুন Chrome User Experience Report (CrUX) থেকে ফিল্ড ডেটা এবং ল্যাব পরামর্শ দেখতে।
3. Search Console: গ্রুপ-স্তরের ফিল্ড ডেটার জন্য Core Web Vitals রিপোর্ট পরীক্ষা করুন।
4. Web Vitals JavaScript লাইব্রেরি: প্রকৃত ব্যবহারকারীর মেট্রিক সংগ্রহ করতে আপনার সাইটে web-vitals যোগ করুন।

import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

প্যাটার্ন সনাক্ত করতে এবং সংশোধনকে অগ্রাধিকার দিতে এই ডেটা ব্যবহার করুন।

Largest Contentful Paint (LCP) উন্নত করা

LCP প্রায়শই সবচেয়ে প্রভাবশালী মেট্রিক। এই ক্ষেত্রগুলি অপটিমাইজ করুন:

• ছবি অপটিমাইজ করুন: ছবি কম্প্রেস করুন, WebP বা AVIF ব্যবহার করুন এবং রেসপন্সিভ সাইজ পরিবেশন করুন। Image Compressor এর মতো টুলগুলি দৃশ্যমান গুণমান হ্রাস না করে ফাইল সাইজ কমাতে সাহায্য করতে পারে।
• গুরুত্বপূর্ণ রিসোর্স প্রিলোড করুন: হিরো ইমেজ এবং ফন্টের জন্য <link rel="preload"> ব্যবহার করুন।
• রেন্ডার-ব্লকিং রিসোর্স দূর করুন: গুরুত্বপূর্ণ CSS ইনলাইন করুন, অ-গুরুত্বপূর্ণ JavaScript ডিফার করুন।
• CDN ব্যবহার করুন: ব্যবহারকারীদের কাছাকাছি অবস্থান থেকে অ্যাসেট পরিবেশন করুন।
• অ্যাসেট ক্যাশে করুন: স্ট্যাটিক ফাইলের জন্য দীর্ঘ ক্যাশে লাইফটাইম সেট করুন।

উদাহরণ: আপনার LCP ইমেজ প্রিলোড করুন:

<link rel="preload" as="image" href="#">

First Input Delay (FID) উন্নত করা

FID প্রতিক্রিয়াশীলতা পরিমাপ করে। দীর্ঘ JavaScript টাস্ক মেইন থ্রেড ব্লক করে।

• দীর্ঘ টাস্ক ভাগ করুন: মেইন থ্রেডে ছাড় দিতে setTimeout বা requestIdleCallback ব্যবহার করুন।
• মেইন-থ্রেড কাজ কমান: অব্যবহৃত JavaScript সরান, কোড-স্প্লিট করুন এবং অ-গুরুত্বপূর্ণ স্ক্রিপ্ট ডিফার করুন।
• ভারী গণনার জন্য ওয়েব ওয়ার্কার ব্যবহার করুন।
• বড় সিঙ্ক্রোনাস স্ক্রিপ্ট এড়িয়ে চলুন: থার্ড-পার্টি স্ক্রিপ্ট অ্যাসিঙ্ক্রোনাসভাবে লোড করুন।

Lighthouse-এর "Minimize main-thread work" এবং "Reduce JavaScript execution time" সুযোগগুলির সাথে অডিট করুন।

Cumulative Layout Shift (CLS) উন্নত করা

CLS ঘটে যখন এলিমেন্টগুলি অপ্রত্যাশিতভাবে সরে যায়। সাধারণ কারণ এবং সমাধান:

• মাত্রা ছাড়া ছবি: সর্বদা width এবং height অ্যাট্রিবিউট সেট করুন বা CSS aspect-ratio ব্যবহার করুন।
• বিজ্ঞাপন, এমবেড, আইফ্রেম: একটি প্লেসহোল্ডার বা নির্দিষ্ট-আকারের কন্টেইনার দিয়ে জায়গা সংরক্ষণ করুন।
• ডায়নামিক কন্টেন্ট ইনজেকশন: ব্যবহারকারীর ইন্টার‌্যাকশন দ্বারা ট্রিগার না হলে বিদ্যমান কন্টেন্টের উপরে কন্টেন্ট সন্নিবেশ করা এড়িয়ে চলুন।
• ওয়েব ফন্ট: অদৃশ্য টেক্সট বা লেআউট পরিবর্তন এড়াতে font-display: swap ব্যবহার করুন এবং ফন্ট প্রিলোড করুন।

উদাহরণ: একটি ছবির জন্য জায়গা সংরক্ষণ করুন:

<img src="#" width="800" height="600" alt="...">

ধারাবাহিক মনিটরিংয়ের জন্য টুল এবং ওয়ার্কফ্লো

পারফরম্যান্স এককালীন সমাধান নয়। আপনার ডেভেলপমেন্ট প্রক্রিয়ায় মনিটরিং সংহত করুন:

• Lighthouse CI: রিগ্রেশন ধরতে প্রতিটি পুল রিকোয়েস্টে অডিট চালান।
• Real User Monitoring (RUM): web-vitals লাইব্রেরি ব্যবহার করুন এবং আপনার অ্যানালিটিক্স প্ল্যাটফর্মে ডেটা পাঠান।
• পারফরম্যান্স বাজেট: মেট্রিকের জন্য থ্রেশহোল্ড সেট করুন এবং অতিক্রম হলে বিল্ড ব্যর্থ করুন।

অগ্রগতি ট্র্যাক করতে নিয়মিত PageSpeed Insights এবং Search Console পরীক্ষা করুন।

সাধারণ প্রশ্নোত্তর

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

কোর ওয়েব ভাইটালস হল Google দ্বারা সংজ্ঞায়িত মেট্রিকের একটি সেট যা বাস্তব-বিশ্বের ব্যবহারকারীর অভিজ্ঞতা পরিমাপ করে: Largest Contentful Paint (লোডিং), First Input Delay (ইন্টার‌্যাক্টিভিটি), এবং Cumulative Layout Shift (ভিজ্যুয়াল স্থিতিশীলতা)।

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

RUM দিয়ে ধারাবাহিকভাবে মনিটর করুন এবং প্রতিটি উল্লেখযোগ্য কোড পরিবর্তনে ল্যাব অডিট চালান। Search Console বা PageSpeed Insights-এর মাধ্যমে মাসিকভাবে ফিল্ড ডেটা পরীক্ষা করুন।

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

ছবি কম্প্রেশন এবং CDN ব্যবহারের মতো কিছু সংশোধন প্লাগইন বা টুল দিয়ে করা যায়, কিন্তু গভীর অপটিমাইজেশনের জন্য প্রায়শই কোড পরিবর্তন প্রয়োজন। ছবি এবং ক্যাশিং দিয়ে শুরু করুন।

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