← ফিচারে ফিরে যান
Pro

Core Web Vitals

Core Web Vitals Google-এর তিনটি মেট্রিক্স দেখায় — LCP, CLS এবং INP — আপনি যে পৃষ্ঠাটি দেখছেন তাতে লাইভ পরিমাপ করা হয়েছে, Google-এর থ্রেশহোল্ডের বিপরীতে রেট দেওয়া হয়েছে, এবং প্রতিটি নম্বরের পিছনের সঠিক উপাদানটি খুঁজে বের করা হয়েছে।

Core Web Vitals আপনার পৃষ্ঠাগুলি কীভাবে র‌্যাঙ্ক করে তার একটি অংশ নির্ধারণ করে, তবে সেগুলি পরিমাপের সাধারণ উপায়গুলি বিশ্রী। ল্যাব টুলস একটি সিন্থেটিক লোড স্কোর করে যা কেউ অনুভব করে না। সার্চ কনসোল আসল ব্যবহারকারীদের রিপোর্ট করে, চার সপ্তাহ দেরিতে, ইউআরএল বালতিতে গোষ্ঠীবদ্ধ। আপনার সামনের পৃষ্ঠায় কোন উপাদানটি সমস্যা তা আপনাকেও বলে না।

এই টুলটি আপনি যে পৃষ্ঠাটি ব্যবহার করছেন তা পরিমাপ করে। LCP, CLS এবং INP প্রত্যেকে তার মান সহ একটি টাইল পায়, Google-এর প্রকাশিত থ্রেশহোল্ডের বিপরীতে একটি ভাল, কাজের প্রয়োজন বা খারাপ রেটিং এবং আপনি কোথায় বসেন তা দেখানো একটি বার। FCP এবং TTFB প্রেক্ষাপটের জন্য তাদের পাশাপাশি বসে, কারণ একটি ধীরগতির সার্ভারের কারণে একটি ধীর এলসিপি একটি ভারী চিত্রের কারণে সৃষ্ট সমস্যা থেকে আলাদা।

সংজ্ঞাগুলি ক্রোম CrUX-এ যা রিপোর্ট করে তার সাথে মেলে, যদি আপনি অনুসন্ধান কনসোলের সাথে সংখ্যার তুলনা করতে চান তবে এটি গুরুত্বপূর্ণ। CLS সেশন উইন্ডো ব্যবহার করে — একটি উইন্ডো এক-সেকেন্ডের ব্যবধানে বা পাঁচ সেকেন্ডে শেষ হয়, এবং সবচেয়ে খারাপ উইন্ডো জয়লাভ করে — প্রতিটি শিফট একসঙ্গে যোগ করার পরিবর্তে। INP হল আপনার ইন্টারঅ্যাকশন লেটেন্সির 98 তম শতাংশ, যা সাধারণ ভিজিটের জন্য সবচেয়ে ধীর মিথস্ক্রিয়া। LCP আপনার প্রথম ইন্টারঅ্যাকশনে পরিবর্তন করা বন্ধ করে দেয়, ঠিক যেমন Chrome এটি করে।

সবচেয়ে দরকারী, প্রতিটি সংখ্যা আরোপিত হয়. প্যানেলটি সবচেয়ে বড়-পেইন্ট উপাদানের নাম দেয়, যে উপাদানগুলি স্থানান্তরিত হয়েছে এবং সবচেয়ে ধীর মিথস্ক্রিয়াগুলি এবং একটি শো বোতাম তাদের যেকোনো একটিতে স্ক্রোল করে এবং পৃষ্ঠায় এটির রূপরেখা দেয়৷ CLS যে 0.31 তা জানার পরিবর্তে, আপনি ব্যানারটি দেখতে পাচ্ছেন যা আপনার সামগ্রীকে নিচে ঠেলে দিচ্ছে। একটি টিকিটের জন্য টেক্সট হিসাবে পুরো জিনিস আপনার হাতে কপি রিপোর্ট.

লাইভ প্রিভিউ
example.com/products
Core Web Vitals লাইভ পরিমাপ
LCPভাল
1.84 s
CLSদরিদ্র
0.312
INPকাজ দরকার
248 ms
FCP 1.12 s
TTFB 410 ms
সবচেয়ে বড় উপাদান
1.84 s section.hero > img.banner দেখান
সবচেয়ে বড় লেআউট পরিবর্তন
0.241 div.promo-banner দেখান
0.071 ul.product-grid > li:nth-of-type(3) দেখান
মূল বৈশিষ্ট্য

লাইভ এলসিপি, সিএলএস এবং আইএনপি

আপনি পৃষ্ঠাটি ব্যবহার করার সাথে সাথে তিনটি র‌্যাঙ্কিং মেট্রিক্স আপডেট হয়: স্ক্রোল করা CLS সরানো, ক্লিক করা এবং টাইপ করা মুভ INP। প্রতিটি Google-এর থ্রেশহোল্ডের বিপরীতে ভাল, কাজের প্রয়োজন বা খারাপ রেট দেওয়া হয়েছে।

কোন উপাদান আপনাকে বলে

সবচেয়ে বড়-পেইন্ট উপাদান, যে উপাদানগুলি স্থানান্তরিত হয়েছে এবং সবচেয়ে ধীর মিথস্ক্রিয়াগুলির নাম দেয়৷ তাদের যেকোনো একটিতে স্ক্রোল করতে এবং সরাসরি পৃষ্ঠায় এটির রূপরেখা করতে Show টিপুন।

Chrome এর নিজস্ব সংজ্ঞা

CLS একটি 1s ব্যবধান এবং 5s ক্যাপ সহ সেশন উইন্ডো ব্যবহার করে, INP হল ইন্টারঅ্যাকশন লেটেন্সির 98 তম পার্সেন্টাইল, এবং LCP প্রথম ইন্টারঅ্যাকশনে হিমায়িত হয় — তাই আপনার নম্বরগুলি সার্চ কনসোলের সাথে সারিবদ্ধ হয়৷

প্রসঙ্গের জন্য FCP এবং TTFB

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

মিথস্ক্রিয়া ব্রেকডাউন

ইভেন্টের ধরন এবং জড়িত উপাদানের সাথে আপনার ধীর মিথস্ক্রিয়া তালিকাভুক্ত করে, যাতে অনুমান করার পরিবর্তে একটি অলস ড্রপডাউন বা ফিল্টার পাওয়া যায়।

অনুলিপিযোগ্য প্রতিবেদন

একটি ক্লিক প্রতিটি মেট্রিক, রেটিং এবং আপত্তিকর নির্বাচককে প্লেইন টেক্সট হিসাবে অনুলিপি করে — একটি টিকিট, একটি পুল অনুরোধ বা একটি ক্লায়েন্ট ইমেলে আটকানোর জন্য প্রস্তুত৷

সাধারণ ব্যবহারের ক্ষেত্র

এটি পাঠানোর আগে একটি পৃষ্ঠা পরীক্ষা করা হচ্ছে

এক মাস পরে সার্চ কনসোল থেকে খুঁজে বের করার পরিবর্তে, লাইভ হওয়ার আগে একটি নতুন টেমপ্লেটে LCP, CLS এবং INP সবুজ রঙে রয়েছে তা নিশ্চিত করুন।

একটি অনুসন্ধান কনসোল সতর্কতা তাড়া করা

সার্চ কনসোল আপনাকে বলে যে ইউআরএলগুলির একটি গ্রুপ CLS ব্যর্থ হয়; এই টুলের সাথে তাদের একটি খুলুন এবং দেখুন ঠিক কোন উপাদানটি স্থানান্তর করে।

লাফানো উপাদান খুঁজে বের করা

পৃষ্ঠাটি স্ক্রোল করুন এবং CLS ক্লাইম্ব দেখুন, তারপর দেরীতে লোড হওয়া বিজ্ঞাপন, ব্যানার বা ওয়েব ফন্ট যা আপনার বিষয়বস্তুকে স্থানান্তরিত করছে তার রূপরেখা দিতে Show টিপুন।

একটি অলস ইন্টারফেস নির্ণয়

ফিল্টার, মেনু এবং মডেলের মাধ্যমে ক্লিক করুন, তারপর কোন নিয়ন্ত্রণের জন্য শত শত মিলিসেকেন্ড খরচ হচ্ছে তা খুঁজে পেতে সবচেয়ে ধীর-মিথস্ক্রিয়া তালিকাটি পড়ুন।

একটি অপ্টিমাইজেশান কাজ প্রমাণ

সংখ্যা রেকর্ড করুন, ফিক্স স্থাপন করুন, তারপর একই পৃষ্ঠা আবার পরিমাপ করুন এবং পাশাপাশি দুটি প্রতিবেদনের তুলনা করুন।

কিভাবে ব্যবহার করবেন
1

Core Web Vitals খুলুন

DevSuite Pro ডকে Core Web Vitals আইকনে ক্লিক করুন। মেট্রিক টাইলস পৃষ্ঠাটি ইতিমধ্যে রেকর্ড করা যাই হোক না কেন ব্যবহার করে সরাসরি প্রদর্শিত হবে।

2

একটি পরিষ্কার LCP জন্য পুনরায় লোড

LCP শুধুমাত্র একটি পৃষ্ঠা লোডের শুরু থেকে অর্থপূর্ণ, তাই আপনি যখন বিশ্বাস করতে পারেন এমন একটি পাঠ চান তখন প্যানেল খুলে দিয়ে পুনরায় লোড করুন।

3

পৃষ্ঠাটি স্বাভাবিকভাবে ব্যবহার করুন

CLS অনুশীলন করতে পুরো পৃষ্ঠাটি স্ক্রোল করুন এবং INP পরিমাপ তৈরি করতে ক্লিক করুন, আলতো চাপুন এবং টাইপ করুন। আপনি যেতে টাইলস আপডেট.

4

অপরাধী খুঁজে বের করুন

LCP উপাদান, একটি লেআউট-শিফ্ট সোর্স বা একটি ধীর মিথস্ক্রিয়া এর পাশে শো টিপুন। পৃষ্ঠাটি এটিতে স্ক্রোল করে এবং এটিকে রূপরেখা দেয় যাতে কোন উপাদানটি দায়ী তা নিয়ে কোন অস্পষ্টতা থাকে না।

5

প্রতিবেদনটি কপি করুন

প্রতিটি মেট্রিক, রেটিং এবং নির্বাচকের একটি প্লেইন-টেক্সট সারাংশের জন্য রিপোর্ট অনুলিপি করুন ক্লিক করুন। স্ক্র্যাচ থেকে আবার CLS এবং INP শুরু করতে রিসেট টিপুন।

চেষ্টা করতে প্রস্তুত?

বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।

Chrome-এ যোগ করুন Edge এ যোগ করুন FireFox-এ যোগ করুন