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

আপনার প্রিয় বিকাশকারী সরঞ্জামগুলি এখন কোর ওয়েব ভাইটালগুলি পরিমাপ করতে পারে৷

Addy Osmani

Elizabeth Sweeny

সম্প্রতি ঘোষিত Web Vitals উদ্যোগটি মানের সংকেত সম্পর্কে একীভূত নির্দেশিকা প্রদান করে যা ওয়েবে একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য সমস্ত সাইটের জন্য অপরিহার্য। আমরা ঘোষণা করতে পেরে আনন্দিত যে ওয়েব ডেভেলপারদের জন্য Google-এর সমস্ত জনপ্রিয় টুল এখন Core Web Vitals-এর পরিমাপকে সমর্থন করে , আপনাকে আরও সহজে ব্যবহারকারীর অভিজ্ঞতার সমস্যাগুলি নির্ণয় ও সমাধান করতে সাহায্য করে৷ এর মধ্যে রয়েছে Lighthouse , PageSpeed ​​Insights , Chrome DevTools , Search Console , web.dev এর পরিমাপ টুল , ওয়েব ভাইটালস ক্রোম এক্সটেনশন এবং একটি নতুন (!) Chrome UX রিপোর্ট API৷

পৃষ্ঠার অভিজ্ঞতা মূল্যায়নের ভিত্তি হিসাবে Google অনুসন্ধান এখন কোর ওয়েব ভাইটাল সহ, এই মেট্রিক্সগুলি যতটা সম্ভব উপলব্ধ এবং কার্যকর করা গুরুত্বপূর্ণ।

Core Web Vitals-এর সাথে ব্যবহারকারী-অভিজ্ঞতা অপ্টিমাইজ করার জন্য আপনার যাত্রা শুরু করতে, নিম্নলিখিত ওয়ার্কফ্লো চেষ্টা করুন:

• সার্চ কনসোলের নতুন কোর ওয়েব ভাইটাল রিপোর্ট ব্যবহার করুন যাতে মনোযোগের প্রয়োজন হয় এমন পৃষ্ঠাগুলির গোষ্ঠীগুলি সনাক্ত করুন (ক্ষেত্রের ডেটার উপর ভিত্তি করে)।
• একবার আপনি কাজের প্রয়োজন এমন পৃষ্ঠাগুলি চিহ্নিত করার পরে, একটি পৃষ্ঠায় ল্যাব এবং ক্ষেত্রের সমস্যাগুলি নির্ণয় করতে PageSpeed ​​Insights (Lighthouse এবং Chrome UX রিপোর্ট দ্বারা চালিত) ব্যবহার করুন৷ PageSpeed ​​Insights (PSI) সার্চ কনসোলের মাধ্যমে পাওয়া যায় অথবা আপনি সরাসরি PSI-এ একটি URL লিখতে পারেন।
• ল্যাবে স্থানীয়ভাবে আপনার সাইট অপ্টিমাইজ করতে প্রস্তুত? Core Web Vitals পরিমাপ করতে Lighthouse এবং Chrome DevTools ব্যবহার করুন এবং ঠিক কী ঠিক করতে হবে সেই বিষয়ে পদক্ষেপযোগ্য নির্দেশিকা পান। ওয়েব ভাইটালস ক্রোম এক্সটেনশন আপনাকে ডেস্কটপে মেট্রিক্সের রিয়েল-টাইম ভিউ দিতে পারে।
• কোর ওয়েব ভাইটালস এর একটি কাস্টম ড্যাশবোর্ড প্রয়োজন? ফিল্ড ডেটার জন্য আপডেট করা CrUX ড্যাশবোর্ড বা নতুন Chrome UX রিপোর্ট API বা ল্যাব ডেটার জন্য PageSpeed ​​Insights API ব্যবহার করুন৷
• নির্দেশিকা খুঁজছেন? web.dev/measure আপনার পৃষ্ঠা পরিমাপ করতে পারে এবং আপনাকে PSI ডেটা ব্যবহার করে অপ্টিমাইজেশনের জন্য নির্দেশিকা এবং কোডল্যাবগুলির একটি অগ্রাধিকার সেট দেখাতে পারে।
• অবশেষে, আপনি প্রোডাকশনে একটি পরিবর্তন স্থাপন করার আগে কোর ওয়েব ভাইটালগুলিতে কোনও রিগ্রেশন নেই তা নিশ্চিত করতে পুল অনুরোধে লাইটহাউস সিআই ব্যবহার করুন।

সেই ভূমিকার সাথে, আসুন প্রতিটি সরঞ্জামের জন্য নির্দিষ্ট আপডেটগুলিতে ডুব দেওয়া যাক!

বাতিঘর

Lighthouse হল একটি স্বয়ংক্রিয় ওয়েবসাইট অডিটিং টুল যা ডেভেলপারদের সমস্যাগুলি নির্ণয় করতে এবং তাদের সাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করার সুযোগগুলি সনাক্ত করতে সহায়তা করে৷ এটি কর্মক্ষমতা এবং অ্যাক্সেসযোগ্যতা সহ একটি ল্যাব পরিবেশে ব্যবহারকারীর অভিজ্ঞতার মানের বিভিন্ন মাত্রা পরিমাপ করে। Lighthouse এর সর্বশেষ সংস্করণ ( 6.0 , 2020 সালের মে মাসের মাঝামাঝি প্রকাশিত) অতিরিক্ত অডিট, নতুন মেট্রিক্স এবং একটি নতুন রচিত পারফরম্যান্স স্কোর অন্তর্ভুক্ত করে।

Lighthouse 6.0 রিপোর্টে তিনটি নতুন মেট্রিক্স প্রবর্তন করেছে। এই নতুন মেট্রিকগুলির মধ্যে দুটি- লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) এবং Cumulative Layout Shift (CLS)- হল কোর ওয়েব ভাইটালগুলির ল্যাব বাস্তবায়ন এবং ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করার জন্য গুরুত্বপূর্ণ ডায়াগনস্টিক তথ্য প্রদান করে৷ ব্যবহারকারীর অভিজ্ঞতা মূল্যায়নের জন্য তাদের গুরুত্বের প্রেক্ষিতে, নতুন মেট্রিকগুলি শুধুমাত্র পরিমাপ করা হয় না এবং প্রতিবেদনে অন্তর্ভুক্ত করা হয় না, তারা কর্মক্ষমতা স্কোর গণনা করার ক্ষেত্রেও ফ্যাক্টর করে।

লাইটহাউস-এ অন্তর্ভুক্ত তৃতীয় নতুন মেট্রিক— টোটাল ব্লকিং টাইম (TBT)- ফিল্ড মেট্রিক ফার্স্ট ইনপুট ডেলে (FID), আরেকটি কোর ওয়েব ভাইটালস মেট্রিকের সঙ্গে ভালভাবে সম্পর্কযুক্ত। লাইটহাউস রিপোর্টে প্রদত্ত সুপারিশগুলি অনুসরণ করে এবং আপনার স্কোরের বিপরীতে অপ্টিমাইজ করা আপনাকে আপনার ব্যবহারকারীদের সর্বোত্তম সম্ভাব্য অভিজ্ঞতা প্রদানের জন্য সেট আপ করে৷

Lighthouse CI সহ সর্বশেষ সংস্করণ প্রতিফলিত করার জন্য লাইটহাউস শক্তির সমস্ত পণ্য আপডেট করা হয় যা আপনাকে একত্রিত এবং স্থাপন করার আগে পুল অনুরোধে আপনার মূল ওয়েব ভাইটালগুলিকে সহজেই পরিমাপ করতে সক্ষম করে৷

লাইটহাউসের সর্বশেষ আপডেট সম্পর্কে আরও জানতে, আমাদের লাইটহাউস 6.0 ব্লগ পোস্টে নতুন কী আছে তা দেখুন।

পেজস্পিড ইনসাইট

পেজস্পিড ইনসাইটস (পিএসআই) মোবাইল এবং ডেস্কটপ উভয় ডিভাইসেই একটি পৃষ্ঠার ল্যাব এবং ফিল্ড কর্মক্ষমতা সম্পর্কে রিপোর্ট করে। টুলটি বাস্তব-বিশ্বের ব্যবহারকারীরা কীভাবে পৃষ্ঠার অভিজ্ঞতা লাভ করে তার একটি ওভারভিউ প্রদান করে (Chrome UX রিপোর্ট দ্বারা চালিত) এবং কীভাবে একজন সাইটের মালিক পৃষ্ঠার অভিজ্ঞতা উন্নত করতে পারেন (Lighthouse দ্বারা সরবরাহ করা) তার উপর একটি পদক্ষেপযোগ্য সুপারিশের একটি সেট।

PageSpeed ​​Insights এবং PageSpeed ​​Insights API-কেও লাইটহাউস 6.0 ব্যবহার করার জন্য আপগ্রেড করা হয়েছে এবং এখন রিপোর্টের ল্যাব এবং ফিল্ড উভয় বিভাগে কোর ওয়েব ভাইটাল পরিমাপ করতে সহায়তা করে! কোর ওয়েব ভাইটালগুলি নীচে দেখানো হিসাবে একটি নীল ফিতা দিয়ে টীকা করা হয়েছে৷

যেখানে সার্চ কনসোল সাইটের মালিকদের পৃষ্ঠাগুলির গ্রুপগুলির একটি দুর্দান্ত ওভারভিউ প্রদান করে যেগুলির মনোযোগ প্রয়োজন, PSI পৃষ্ঠার অভিজ্ঞতা উন্নত করার জন্য প্রতি-পৃষ্ঠা সুযোগগুলি সনাক্ত করতে সহায়তা করে৷ PSI-তে, আপনি স্পষ্টভাবে দেখতে পারবেন যে আপনার পৃষ্ঠাটি রিপোর্টের শীর্ষে থাকা সমস্ত কোর ওয়েব ভাইটাল জুড়ে একটি ভাল অভিজ্ঞতার জন্য থ্রেশহোল্ড পূরণ করে কিনা, কোর ওয়েব ভাইটাল মূল্যায়ন পাস করে বা কোর ওয়েব ভাইটাল মূল্যায়ন পাস করে না। .

CrUX

Chrome UX রিপোর্ট (CrUX) হল লক্ষ লক্ষ ওয়েবসাইটের বাস্তব ব্যবহারকারীর অভিজ্ঞতার ডেটার একটি সর্বজনীন ডেটাসেট৷ এটি সমস্ত কোর ওয়েব ভাইটালের ফিল্ড সংস্করণ পরিমাপ করে। ল্যাব ডেটার বিপরীতে, CrUX ডেটা ক্ষেত্রের অপ্ট-ইন ব্যবহারকারীদের কাছ থেকে আসে। এই ডেটা ব্যবহার করে, বিকাশকারীরা তাদের নিজস্ব বা এমনকি প্রতিযোগীদের ওয়েবসাইটে বাস্তব-বিশ্ব ব্যবহারকারীর অভিজ্ঞতার বিতরণ বুঝতে সক্ষম হয়৷ আপনার সাইটে RUM না থাকলেও, CrUX আপনার মূল ওয়েব ভাইটালগুলি মূল্যায়ন করার একটি দ্রুত এবং সহজ উপায় প্রদান করতে পারে। BigQuery-এর CrUX ডেটাসেটে সমস্ত Core Web Vitals-এর জন্য সূক্ষ্ম কর্মক্ষমতা ডেটা অন্তর্ভুক্ত রয়েছে এবং এটি মূল-স্তরে মাসিক স্ন্যাপশটে উপলব্ধ।

আপনার সাইটটি আপনার ব্যবহারকারীদের জন্য কীভাবে কার্য সম্পাদন করে তা সত্যিকারভাবে জানার একমাত্র উপায় হল প্রকৃতপক্ষে ক্ষেত্রের কার্যক্ষমতা পরিমাপ করা কারণ সেই ব্যবহারকারীরা এটির সাথে লোড হচ্ছে এবং ইন্টারঅ্যাক্ট করছে। এই ধরনের পরিমাপকে সাধারণত রিয়েল ইউজার মনিটরিং বা সংক্ষেপে RUM বলা হয়। আপনার সাইটে RUM না থাকলেও, CrUX আপনার মূল ওয়েব ভাইটালগুলি মূল্যায়ন করার একটি দ্রুত এবং সহজ উপায় প্রদান করতে পারে।

CrUX API প্রবর্তন করা হচ্ছে

আজ আমরা CrUX API ঘোষণা করতে পেরে আনন্দিত, এটি নিম্নোক্ত ফিল্ড মেট্রিক্সের জন্য মূল এবং URL-স্তরের গুণমান পরিমাপের সাথে আপনার ডেভেলপমেন্ট ওয়ার্কফ্লোগুলিকে সহজেই সংহত করার একটি দ্রুত এবং বিনামূল্যের উপায়:

• সবচেয়ে বড় বিষয়বস্তু পেইন্ট
• ক্রমবর্ধমান লেআউট শিফট
• প্রথম ইনপুট বিলম্ব
• প্রথম কনটেন্টফুল পেইন্ট

বিকাশকারীরা বিভিন্ন ফর্ম ফ্যাক্টর দ্বারা একটি উত্স বা URL এবং বিভাগের ফলাফলের জন্য অনুসন্ধান করতে পারে৷ API প্রতিদিন আপডেট করে এবং আগের 28 দিনের মূল্যের ডেটার সারসংক্ষেপ করে (BigQuery ডেটাসেটের বিপরীতে, যা মাসিক একত্রিত হয়)। এপিআই-এরও একই রকম শিথিল পাবলিক API কোটা রয়েছে যা আমরা আমাদের অন্যান্য API, PageSpeed ​​Insights API (প্রতিদিন 25,000 অনুরোধ) তে রাখি।

ভাল , উন্নতির প্রয়োজন এবং খারাপের জন্য ডিস্ট্রিবিউশন সহ কোর ওয়েব ভাইটাল মেট্রিকগুলি কল্পনা করতে CrUX API ব্যবহার করে নীচে একটি ডেমো রয়েছে:

ভবিষ্যতের রিলিজে, আমরা অতিরিক্ত CrUX ডেটাসেট মাত্রা এবং মেট্রিক্সে অ্যাক্সেস সক্ষম করতে API প্রসারিত করার পরিকল্পনা করছি।

সংস্কার করা CrUX ড্যাশবোর্ড

নতুন নতুন ডিজাইন করা CrUX ড্যাশবোর্ড আপনাকে সময়ের সাথে সাথে একটি মূলের কর্মক্ষমতা সহজেই ট্র্যাক করতে দেয় এবং এখন আপনি এটিকে ব্যবহার করতে পারেন সমস্ত কোর ওয়েব ভাইটাল মেট্রিক্সের ডিস্ট্রিবিউশন নিরীক্ষণ করতে। ড্যাশবোর্ড দিয়ে শুরু করতে, web.dev-এ আমাদের টিউটোরিয়াল দেখুন।

আপনার সাইটটি এক নজরে কীভাবে পারফর্ম করছে তা দেখতে আরও সহজ করতে আমরা একটি নতুন কোর ওয়েব ভাইটাল ল্যান্ডিং পৃষ্ঠা চালু করেছি৷ আমরা সমস্ত CrUX টুলিং সম্পর্কে আপনার প্রতিক্রিয়া স্বাগত জানাই; আপনার চিন্তাভাবনা এবং প্রশ্ন শেয়ার করতে আমাদের সাথে যোগাযোগ করুন @ChromeUXReport টুইটার অ্যাকাউন্ট বা Google গ্রুপে ।

Chrome DevTools পারফরম্যান্স প্যানেল

অভিজ্ঞতা বিভাগে ডিবাগ লেআউট শিফট ইভেন্ট

Chrome DevTools পারফরম্যান্স প্যানেলে একটি নতুন অভিজ্ঞতা বিভাগ রয়েছে যা আপনাকে অপ্রত্যাশিত লেআউট পরিবর্তন শনাক্ত করতে সাহায্য করতে পারে। এটি আপনার পৃষ্ঠায় ভিজ্যুয়াল অস্থিরতার সমস্যাগুলি খুঁজে পেতে এবং ঠিক করার জন্য সহায়ক যা ক্রমবর্ধমান লেআউট শিফটে অবদান রাখে।

সারাংশ ট্যাবে এর বিশদ বিবরণ দেখতে একটি লেআউট শিফট নির্বাচন করুন। স্থানান্তরটি কোথায় ঘটেছে তা কল্পনা করতে, সরানো থেকে সরানো এবং ক্ষেত্রগুলিতে স্থানান্তর করুন।

ফুটারে মোট ব্লকিং সময়ের সাথে ডিবাগ ইন্টারঅ্যাকশন প্রস্তুতি

মোট ব্লকিং টাইম (TBT) মেট্রিক ল্যাব টুলে পরিমাপ করা যেতে পারে এবং এটি প্রথম ইনপুট বিলম্বের জন্য একটি চমৎকার প্রক্সি। টিবিটি ফার্স্ট কনটেন্টফুল পেইন্ট (এফসিপি) এবং টাইম টু ইন্টারঅ্যাকটিভ (টিটিআই) এর মধ্যে মোট সময় পরিমাপ করে যেখানে ইনপুট প্রতিক্রিয়া রোধ করার জন্য প্রধান থ্রেডটি যথেষ্ট দীর্ঘ সময়ের জন্য অবরুদ্ধ ছিল। কর্মক্ষমতা অপ্টিমাইজেশান যা ল্যাবে টিবিটি উন্নত করে সেক্ষেত্রে এফআইডি উন্নত করা উচিত।

আপনি যখন পৃষ্ঠার কার্যক্ষমতা পরিমাপ করেন তখন TBT এখন Chrome DevTools পারফরম্যান্স প্যানেলের ফুটারে দেখানো হয়:

1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
2. পারফরমেন্স ট্যাবে ক্লিক করুন।
3. রেকর্ড ক্লিক করুন.
4. ম্যানুয়ালি পৃষ্ঠাটি পুনরায় লোড করুন।
5. পৃষ্ঠাটি লোড হওয়ার জন্য অপেক্ষা করুন এবং তারপরে রেকর্ডিং বন্ধ করুন।

আরও তথ্যের জন্য, DevTools-এ নতুন কী আছে দেখুন (Chrome 84) ।

সার্চ কনসোল

Search Console-এ নতুন Core Web Vitals রিপোর্ট আপনাকে CrUX-এর বাস্তব-বিশ্ব (ক্ষেত্র) ডেটার উপর ভিত্তি করে আপনার সাইটের সমস্ত পৃষ্ঠাগুলির গোষ্ঠীগুলি সনাক্ত করতে সাহায্য করে যেগুলির জন্য মনোযোগ প্রয়োজন৷ ইউআরএল পারফরম্যান্স স্ট্যাটাস, মেট্রিক টাইপ এবং ইউআরএল গ্রুপ (অনুরূপ ওয়েব পৃষ্ঠার গ্রুপ) দ্বারা গোষ্ঠীভুক্ত করা হয়।

প্রতিবেদনটি তিনটি কোর ওয়েব ভাইটাল মেট্রিক্সের উপর ভিত্তি করে তৈরি করা হয়েছে: LCP, FID এবং CLS। যদি কোনও URL-এ এই মেট্রিক্সের জন্য রিপোর্টিং ডেটার ন্যূনতম পরিমাণ না থাকে, তাহলে তা রিপোর্ট থেকে বাদ দেওয়া হয়। আপনার মূলের জন্য পারফরম্যান্সের একটি সামগ্রিক দৃষ্টিভঙ্গি পেতে নতুন প্রতিবেদনটি চেষ্টা করুন।

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

web.dev

https://pagespeed.web.dev/ আপনাকে সময়ের সাথে সাথে আপনার পৃষ্ঠার কর্মক্ষমতা পরিমাপ করার অনুমতি দেয়, কীভাবে উন্নতি করা যায় তার নির্দেশিকা এবং কোডল্যাবগুলির একটি অগ্রাধিকার তালিকা প্রদান করে৷ এটির পরিমাপ PageSpeed ​​Insights দ্বারা চালিত হয়৷ পরিমাপ সরঞ্জামটি এখন কোর ওয়েব ভাইটাল মেট্রিক্সকেও সমর্থন করে, যেমনটি নীচে দেখানো হয়েছে:

ওয়েব ভাইটাল এক্সটেনশন

ওয়েব ভাইটালস এক্সটেনশনটি (ডেস্কটপ) গুগল ক্রোমের জন্য রিয়েল-টাইমে তিনটি মূল ওয়েব ভাইটাল মেট্রিক্স পরিমাপ করে। আপনার ডেভেলপমেন্ট ওয়ার্কফ্লো চলাকালীন প্রথম দিকে সমস্যাগুলি ধরার জন্য এবং আপনি ওয়েব ব্রাউজ করার সময় কোর ওয়েব ভাইটালগুলির কার্যকারিতা মূল্যায়ন করার জন্য একটি ডায়াগনস্টিক টুল হিসাবে এটি সহায়ক।

এক্সটেনশনটি এখন Chrome ওয়েব স্টোর থেকে ইনস্টল করার জন্য উপলব্ধ! আমরা আশা করি আপনি এটি দরকারী খুঁজে. আমরা প্রকল্পের GitHub সংগ্রহস্থলে প্রতিক্রিয়ার পাশাপাশি এটিকে উন্নত করতে যেকোনো অবদানকে স্বাগত জানাই।

দ্রুত হাইলাইট

এটা একটা মোড়ানো! আপনি পরবর্তী কি করতে পারেন:

• আপনার ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করতে DevTools-এ Lighthouse ব্যবহার করুন এবং নিশ্চিত করুন যে আপনি ক্ষেত্রে কোর ওয়েব ভাইটালগুলির সাথে সাফল্যের জন্য নিজেকে সেট আপ করছেন৷
• আপনার ল্যাব এবং ফিল্ড কোর ওয়েব ভাইটাল কর্মক্ষমতা তুলনা করতে PageSpeed ​​অন্তর্দৃষ্টি ব্যবহার করুন.
• গত 28 দিনে কোর ওয়েব ভাইটালগুলির বিরুদ্ধে আপনার উত্স এবং URL কতটা ভাল পারফর্ম করেছে তা সহজেই অ্যাক্সেস করতে নতুন Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন API ব্যবহার করে দেখুন৷
• গভীরে ডুব দিতে এবং নির্দিষ্ট কোর ওয়েব ভাইটালগুলির বিরুদ্ধে ডিবাগ করতে DevTools পারফরম্যান্স প্যানেলে অভিজ্ঞতা বিভাগ এবং ফুটার ব্যবহার করুন।
• আপনার উৎপত্তি ক্ষেত্রে কীভাবে পারফর্ম করছে তার সারসংক্ষেপের জন্য Search Console-এর কোর ওয়েব ভাইটাল রিপোর্ট ব্যবহার করুন।
• রিয়েল-টাইমে কোর ওয়েব ভাইটালগুলির বিরুদ্ধে একটি পৃষ্ঠার কর্মক্ষমতা ট্র্যাক করতে ওয়েব ভাইটাল এক্সটেনশন ব্যবহার করুন।

আমরা জুন মাসে web.dev লাইভে আমাদের কোর ওয়েব ভাইটাল টুলিং সম্পর্কে আরও কভার করব। ইভেন্টের আপডেট পেতে সাইন আপ করুন!

~ এলিজাবেথ এবং অ্যাডির দ্বারা, ওয়েবপারফ জনিটরস