সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)

ফিলিপ ওয়ালটন
ব্যারি পোলার্ড

ব্রাউজার সমর্থন

  • 77
  • 79
  • 122
  • এক্স

উৎস

সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) হল একটি স্থিতিশীল কোর ওয়েব ভাইটাল মেট্রিক যা অনুভূত লোডের গতি পরিমাপের জন্য। এটি পৃষ্ঠা লোড টাইমলাইনে বিন্দু চিহ্নিত করে যখন পৃষ্ঠার প্রধান বিষয়বস্তু সম্ভবত লোড হয়। একটি দ্রুত LCP ব্যবহারকারীকে আশ্বস্ত করতে সাহায্য করে যে পৃষ্ঠাটি দরকারী ৷

ঐতিহাসিকভাবে, ওয়েব পৃষ্ঠার মূল বিষয়বস্তু কত দ্রুত লোড হয় এবং ব্যবহারকারীদের কাছে দৃশ্যমান হয় তা পরিমাপ করা ওয়েব বিকাশকারীদের জন্য একটি চ্যালেঞ্জ। লোড বা DOMContentLoaded এর মতো পুরানো মেট্রিকগুলি ভালভাবে কাজ করে না কারণ ব্যবহারকারীরা তাদের স্ক্রিনে যা দেখেন তার সাথে সেগুলি অগত্যা সঙ্গতিপূর্ণ নয়৷ এবং নতুন, ব্যবহারকারী-কেন্দ্রিক পারফরম্যান্স মেট্রিক্স যেমন ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) শুধুমাত্র লোডিং অভিজ্ঞতার একেবারে শুরুতে ক্যাপচার করে। যদি একটি পৃষ্ঠা একটি স্প্ল্যাশ স্ক্রীন দেখায় বা একটি লোডিং সূচক প্রদর্শন করে, এই মুহূর্তটি ব্যবহারকারীর জন্য খুব বেশি প্রাসঙ্গিক নয়৷

অতীতে আমরা প্রথম অর্থপূর্ণ পেইন্ট (এফএমপি) এবং স্পিড ইনডেক্স (এসআই) (উভয়টি লাইটহাউসে উপলব্ধ) এর মতো কার্যকারিতা মেট্রিক্সের সুপারিশ করেছি যাতে প্রাথমিক পেইন্টের পরে আরও বেশি লোডিং অভিজ্ঞতা ক্যাপচার করা যায়, কিন্তু এই মেট্রিকগুলি জটিল, ব্যাখ্যা করা কঠিন , এবং প্রায়ই ভুল, যার অর্থ তারা এখনও সনাক্ত করতে পারে না কখন পৃষ্ঠার মূল বিষয়বস্তু লোড হয়েছে৷

W3C ওয়েব পারফরম্যান্স ওয়ার্কিং গ্রুপে আলোচনা এবং Google-এ করা গবেষণার উপর ভিত্তি করে, আমরা খুঁজে পেয়েছি যে একটি পৃষ্ঠার মূল বিষয়বস্তু কখন লোড করা হয় তা পরিমাপ করার আরও সঠিক উপায় হল সবচেয়ে বড় উপাদানটি কখন রেন্ডার করা হয় তা দেখা।

LCP কি?

LCP ভিউপোর্টে দৃশ্যমান সবচেয়ে বড় ইমেজ বা টেক্সট ব্লকের রেন্ডার টাইম রিপোর্ট করে, যখন ব্যবহারকারী প্রথম পৃষ্ঠায় নেভিগেট করেন তার সাথে সম্পর্কিত।

একটি ভাল LCP স্কোর কি?

একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, সাইটগুলিকে 2.5 সেকেন্ড বা তার কম সময়ের LCP পাওয়ার চেষ্টা করা উচিত৷ আপনি আপনার বেশিরভাগ ব্যবহারকারীর জন্য এই লক্ষ্যে পৌঁছেছেন তা নিশ্চিত করার জন্য, পরিমাপের একটি ভাল থ্রেশহোল্ড হল পৃষ্ঠা লোডের 75 তম শতাংশ , যা মোবাইল এবং ডেস্কটপ ডিভাইস জুড়ে বিভক্ত।

ভালো এলসিপি মান 2.5 সেকেন্ড বা তার কম, খারাপ মান 4.0 সেকেন্ডের বেশি এবং এর মধ্যে যেকোনো কিছুর উন্নতি প্রয়োজন
একটি ভাল LCP মান হল 2.5 সেকেন্ড বা তার কম।

কি উপাদান বিবেচনা করা হয়?

Largest Contentful Paint API- তে উল্লেখ করা হয়েছে, Largest Contentful Paint-এর জন্য বিবেচিত উপাদানগুলির প্রকারগুলি হল:

এই সীমিত সেটে উপাদান সীমাবদ্ধ করা জটিলতা কমাতে ইচ্ছাকৃত ছিল। অতিরিক্ত উপাদানগুলি (যেমন সম্পূর্ণ <svg> সমর্থন) ভবিষ্যতে যোগ করা হতে পারে কারণ আরও গবেষণা পরিচালিত হবে।

শুধুমাত্র কিছু উপাদান বিবেচনা করার পাশাপাশি, LCP পরিমাপ কিছু উপাদান বাদ দিতে হিউরিস্টিক ব্যবহার করে যা ব্যবহারকারীরা "অ-সামগ্রী" হিসাবে দেখতে পারে। Chromium-ভিত্তিক ব্রাউজারগুলির জন্য, এর মধ্যে রয়েছে:

  • 0 এর অস্বচ্ছতা সহ উপাদান, ব্যবহারকারীর কাছে অদৃশ্য করে তোলে।
  • যে উপাদানগুলি সম্পূর্ণ ভিউপোর্টকে কভার করে, যেগুলি পটভূমি উপাদান হতে পারে৷
  • কম এনট্রপি সহ প্লেসহোল্ডার ছবি বা অন্যান্য ছবি, যা সম্ভবত পৃষ্ঠার প্রকৃত বিষয়বস্তুকে প্রতিফলিত করে না।

সবচেয়ে বড় বিষয়বস্তু উপাদান কী তা আমরা ব্যবহারকারীর প্রত্যাশার সাথে মেলে তা নিশ্চিত করতে ব্রাউজারগুলি এই হিউরিস্টিকগুলিকে আরও উন্নত করতে পারে।

এই "সামগ্রীপূর্ণ" হিউরিস্টিকগুলি FCP দ্বারা ব্যবহৃত হওয়া থেকে পৃথক, যা এই উপাদানগুলির মধ্যে কিছু বিবেচনা করতে পারে, যেমন স্থানধারক চিত্র বা সম্পূর্ণ ভিউপোর্ট চিত্র, এমনকি যদি তারা LCP প্রার্থী হওয়ার অযোগ্য হয়। উভয়ই তাদের নামে "কন্টেন্টফুল" ব্যবহার করলেও, এই মেট্রিক্সের উদ্দেশ্য ভিন্ন। FCP পরিমাপ করে যখন কোনো বিষয়বস্তু স্ক্রীনে আঁকা হয়, যেখানে LCP পরিমাপ করে যখন মূল বিষয়বস্তু আঁকা হয়।

কিভাবে একটি উপাদানের আকার নির্ধারণ করা হয়?

LCP-এর জন্য রিপোর্ট করা উপাদানের আকার সাধারণত ভিউপোর্টের মধ্যে ব্যবহারকারীর কাছে দৃশ্যমান। যদি উপাদানটি ভিউপোর্টের বাইরে প্রসারিত হয়, বা যদি কোনও উপাদান ক্লিপ করা হয় বা অদৃশ্যমান ওভারফ্লো থাকে তবে সেই অংশগুলি উপাদানটির আকারের দিকে গণনা করা হয় না৷

চিত্র উপাদানগুলির জন্য যেগুলিকে তাদের অন্তর্নিহিত আকার থেকে পুনরায় আকার দেওয়া হয়েছে, যে আকারটি রিপোর্ট করা হয় তা হয় দৃশ্যমান আকার বা অন্তর্নিহিত আকার, যেটি ছোট।

পাঠ্য উপাদানগুলির জন্য, LCP শুধুমাত্র ক্ষুদ্রতম আয়তক্ষেত্র বিবেচনা করে যাতে সমস্ত পাঠ্য নোড থাকতে পারে।

সমস্ত উপাদানের জন্য, LCP সিএসএস ব্যবহার করে প্রয়োগ করা মার্জিন, প্যাডিং বা সীমানা বিবেচনা করে না।

এলসিপি কখন রিপোর্ট করা হয়?

ওয়েব পৃষ্ঠাগুলি প্রায়শই পর্যায়ক্রমে লোড হয় এবং ফলস্বরূপ, লোড হওয়ার সময় পৃষ্ঠার বৃহত্তম উপাদানটি পরিবর্তিত হতে পারে।

পরিবর্তনের এই সম্ভাবনাকে সামলানোর জন্য, ব্রাউজার প্রথম ফ্রেম আঁকার সাথে সাথেই largest-contentful-paint ধরনের একটি PerformanceEntry পাঠায়। পরবর্তী ফ্রেমগুলি রেন্ডার করার পরে, এটি যে কোনো সময় সবচেয়ে বড় বিষয়বস্তুপূর্ণ উপাদানের পরিবর্তন হলে অন্য একটি PerformanceEntry পাঠায়।

উদাহরণস্বরূপ, টেক্সট এবং একটি হিরো ইমেজ সহ একটি পৃষ্ঠায়, ব্রাউজারটি প্রাথমিকভাবে শুধুমাত্র পাঠ্য রেন্ডার করতে পারে এবং ব্রাউজারটি একটি largest-contentful-paint এন্ট্রি পাঠাবে যার element বৈশিষ্ট্য একটি <p> বা <h1> উল্লেখ করে। হিরো ইমেজ লোডিং শেষ হওয়ার পরে, একটি দ্বিতীয় largest-contentful-paint এন্ট্রি পাঠানো হয়, একটি element সম্পত্তি <img> উল্লেখ করে।

একটি উপাদান রেন্ডার হওয়ার পরে এবং ব্যবহারকারীর কাছে দৃশ্যমান হওয়ার পরেই এটিকে সবচেয়ে বড় বিষয়বস্তু উপাদান হিসাবে বিবেচনা করা যেতে পারে। যে ছবিগুলি এখনও লোড হয়নি সেগুলিকে "রেন্ডার করা" হিসাবে বিবেচনা করা হয় না৷ ফন্ট ব্লক সময়কালে ওয়েব ফন্ট ব্যবহার করে টেক্সট নোডও নয়। এই ধরনের ক্ষেত্রে, একটি ছোট উপাদান সবচেয়ে বড় বিষয়বস্তু উপাদান হিসাবে রিপোর্ট করা যেতে পারে, কিন্তু যত তাড়াতাড়ি বড় উপাদান রেন্ডারিং শেষ হয়, অন্য একটি PerformanceEntry তৈরি করা হয়।

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

যদি ভিউপোর্ট থেকে বা এমনকি DOM থেকে সবচেয়ে বড় বিষয়বস্তু উপাদানটি সরানো হয়, তবে একটি বড় উপাদান রেন্ডার না করা পর্যন্ত এটি সবচেয়ে বড় সামগ্রীপূর্ণ উপাদান থেকে যায়।

ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার সাথে সাথে ব্রাউজারটি নতুন এন্ট্রি রিপোর্ট করা বন্ধ করে দেয় (একটি ট্যাপ, স্ক্রোল বা কীপ্রেসের মাধ্যমে), কারণ ব্যবহারকারীর ইন্টারঅ্যাকশন প্রায়শই ব্যবহারকারীর কাছে যা দৃশ্যমান হয় তা পরিবর্তন করে (বিশেষত স্ক্রল করার সময়)।

বিশ্লেষণের উদ্দেশ্যে, আপনার বিশ্লেষণ পরিষেবাতে শুধুমাত্র অতি সম্প্রতি প্রেরিত PerformanceEntry রিপোর্ট করুন।

লোড সময় বনাম রেন্ডার সময়

নিরাপত্তার কারণে, ছবিগুলির রেন্ডার টাইমস্ট্যাম্পটি ক্রস-অরিজিন ইমেজগুলির জন্য উন্মুক্ত করা হয় না যেখানে Timing-Allow-Origin হেডার নেই। পরিবর্তে, শুধুমাত্র তাদের লোড সময়, যা অন্যান্য API ইতিমধ্যে প্রকাশ করে, উপলব্ধ।

এটি আপাতদৃষ্টিতে অসম্ভব পরিস্থিতির দিকে নিয়ে যেতে পারে যেখানে ওয়েব API দ্বারা LCP FCP-এর চেয়ে আগে রিপোর্ট করা হয়। এটি শুধুমাত্র এই নিরাপত্তা বিধিনিষেধের কারণে, এবং এটি আসলে কী ঘটছে তা উপস্থাপন করে না।

যখন সম্ভব, আপনার মেট্রিক্সকে আরও নির্ভুল করতে আমরা সবসময় Timing-Allow-Origin হেডার সেট করার পরামর্শ দিই।

কিভাবে উপাদান বিন্যাস এবং আকার পরিবর্তন পরিচালনা করা হয়?

নতুন পারফরম্যান্স এন্ট্রি গণনা এবং প্রেরণের কর্মক্ষমতা ওভারহেড কম রাখতে, একটি উপাদানের আকার বা অবস্থানের পরিবর্তন নতুন LCP প্রার্থী তৈরি করে না। ভিউপোর্টে শুধুমাত্র উপাদানটির প্রাথমিক আকার এবং অবস্থান বিবেচনা করা হয়।

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

উদাহরণ

কয়েকটি জনপ্রিয় ওয়েবসাইটে যখন সবচেয়ে বড় কন্টেন্টফুল পেইন্ট ঘটে তার কিছু উদাহরণ এখানে দেওয়া হল:

cnn.com থেকে সবচেয়ে বড় কনটেন্টফুল পেইন্ট টাইমলাইন
cnn.com থেকে একটি LCP টাইমলাইন।
techcrunch.com থেকে সবচেয়ে বড় কনটেন্টফুল পেইন্ট টাইমলাইন
techcrunch.com থেকে একটি LCP টাইমলাইন।

এই দুটি টাইমলাইনে, কন্টেন্ট লোড হওয়ার সাথে সাথে সবচেয়ে বড় উপাদান (সবুজ রঙে হাইলাইট করা) পরিবর্তিত হয়। প্রথম উদাহরণে, DOM-এ নতুন কন্টেন্ট যোগ করা হয়, কোন উপাদানটি সবচেয়ে বড় তা পরিবর্তন করে। দ্বিতীয় উদাহরণে, লেআউট পরিবর্তন হয়, ভিউপোর্ট থেকে একটি পূর্ববর্তী বৃহত্তম বিষয়বস্তু উপাদানকে সরিয়ে দেয়।

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

instagram.com থেকে সবচেয়ে বড় কন্টেন্টফুল পেইন্ট টাইমলাইন
instagram.com থেকে একটি LCP টাইমলাইন।
google.com থেকে সবচেয়ে বড় কনটেন্টফুল পেইন্ট টাইমলাইন
google.com থেকে একটি LCP টাইমলাইন।

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

কিভাবে LCP পরিমাপ করা যায়

LCP ল্যাবে বা ক্ষেত্রে পরিমাপ করা যেতে পারে, এবং এটি নিম্নলিখিত সরঞ্জামগুলিতে উপলব্ধ:

ক্ষেত্র সরঞ্জাম

ল্যাব সরঞ্জাম

জাভাস্ক্রিপ্টে LCP পরিমাপ করুন

JavaScript-এ LCP পরিমাপ করতে, Largest Contentful Paint API ব্যবহার করুন। নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি PerformanceObserver তৈরি করতে হয় যা largest-contentful-paint এন্ট্রি শোনে এবং কনসোলে লগ করে।

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

পূর্ববর্তী উদাহরণে, প্রতিটি লগ করা largest-contentful-paint এন্ট্রি বর্তমান LCP প্রার্থীর প্রতিনিধিত্ব করে। সাধারণভাবে, নির্গত শেষ এন্ট্রির startTime মান হল LCP মান। যাইহোক, LCP পরিমাপের জন্য সব largest-contentful-paint এন্ট্রি বৈধ নয়।

নিম্নলিখিত বিভাগে এপিআই রিপোর্ট এবং কিভাবে মেট্রিক গণনা করা হয় তার মধ্যে পার্থক্যগুলি তালিকাভুক্ত করে৷

মেট্রিক এবং API-এর মধ্যে পার্থক্য

  • API একটি ব্যাকগ্রাউন্ড ট্যাবে লোড করা পৃষ্ঠাগুলির জন্য largest-contentful-paint এন্ট্রি পাঠায়, কিন্তু LCP গণনা করার সময় সেই পৃষ্ঠাগুলিকে উপেক্ষা করা উচিত।
  • একটি পৃষ্ঠার ব্যাকগ্রাউন্ড করার পরে API largest-contentful-paint এন্ট্রি পাঠাতে থাকে, কিন্তু LCP গণনা করার সময় সেই এন্ট্রিগুলিকে উপেক্ষা করা উচিত। পৃষ্ঠাটি পুরো সময় অগ্রভাগে থাকলেই উপাদানগুলি বিবেচনা করা যেতে পারে।
  • যখন পৃষ্ঠাটি পিছনে/ফরোয়ার্ড ক্যাশে থেকে পুনরুদ্ধার করা হয় তখন API largest-contentful-paint এন্ট্রি রিপোর্ট করে না, তবে LCP এই ক্ষেত্রে পরিমাপ করা উচিত কারণ ব্যবহারকারীরা তাদের আলাদা পৃষ্ঠা ভিজিট হিসাবে অনুভব করেন।
  • API আইফ্রেমের মধ্যে উপাদানগুলি বিবেচনা করে না, তবে মেট্রিক করে কারণ সেগুলি পৃষ্ঠার ব্যবহারকারীর অভিজ্ঞতার অংশ। একটি আইফ্রেমের মধ্যে একটি LCP সহ পৃষ্ঠাগুলিতে-উদাহরণস্বরূপ একটি এমবেড করা ভিডিওতে একটি পোস্টার চিত্র-এটি CrUX এবং RUM এর মধ্যে পার্থক্য হিসাবে দেখাবে ৷ LCP সঠিকভাবে পরিমাপ করতে, আপনাকে অবশ্যই iframes অন্তর্ভুক্ত করতে হবে। সাব-ফ্রেমগুলি এগ্রিগ্রেশনের জন্য প্যারেন্ট ফ্রেমে তাদের largest-contentful-paint এন্ট্রি রিপোর্ট করতে API ব্যবহার করতে পারে।
  • API নেভিগেশন শুরু থেকে LCP পরিমাপ করে। প্রি-রেন্ডার করা পৃষ্ঠাগুলির জন্য, পরিবর্তে activationStart থেকে LCP পরিমাপ করুন, কারণ এটি ব্যবহারকারীর অভিজ্ঞতা অনুযায়ী LCP সময়ের সাথে মিলে যায়।

এই সমস্ত সূক্ষ্ম পার্থক্যগুলি মনে রাখার পরিবর্তে, আমরা পরামর্শ দিই যে বিকাশকারীরা web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে LCP পরিমাপ করুন, যা আপনার জন্য এই পার্থক্যগুলির বেশিরভাগ পরিচালনা করে। (এটি iframe সমস্যা কভার করে না।)

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

কিভাবে জাভাস্ক্রিপ্টে LCP পরিমাপ করা যায় তার সম্পূর্ণ উদাহরণের জন্য onLCP() এর সোর্স কোড পড়ুন।

যদি সবচেয়ে বড় উপাদানটি সবচেয়ে গুরুত্বপূর্ণ না হয়?

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

কিভাবে LCP উন্নত করা যায়

LCP অপ্টিমাইজ করার একটি সম্পূর্ণ নির্দেশিকা আপনাকে ক্ষেত্রের মধ্যে LCP সময় সনাক্ত করার প্রক্রিয়া এবং ড্রিল ডাউন এবং অপ্টিমাইজ করার জন্য ল্যাব ডেটা ব্যবহার করার মাধ্যমে আপনাকে গাইড করতে উপলব্ধ।

অতিরিক্ত সম্পদ

চেঞ্জলগ

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

এটি পরিচালনা করতে আপনাকে সাহায্য করার জন্য, এই মেট্রিক্সের বাস্তবায়ন বা সংজ্ঞার সমস্ত পরিবর্তন এই চেঞ্জলগে প্রদর্শিত হয়েছে।

আপনার যদি এই মেট্রিক্সের জন্য প্রতিক্রিয়া থাকে, তাহলে ওয়েব-ভিটালস-ফিডব্যাক Google গ্রুপে তা প্রদান করুন।