ফার্স্ট কনটেন্টফুল পেইন্ট (FCP)

ফিলিপ ওয়ালটন

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

  • 60
  • 79
  • 84
  • 14.1

উৎস

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

FCP সেই সময় পরিমাপ করে যখন ব্যবহারকারী প্রথম পৃষ্ঠায় নেভিগেট করেন থেকে যখন পৃষ্ঠার বিষয়বস্তুর কোনো অংশ স্ক্রিনে রেন্ডার করা হয়। এই মেট্রিকের জন্য, "সামগ্রী" বলতে পাঠ্য, ছবি (পটভূমির ছবি সহ), <svg> উপাদান বা সাদা নয় এমন <canvas> উপাদান বোঝায়।

google.com থেকে FCP টাইমলাইন
এই লোড টাইমলাইনে, এফসিপি দ্বিতীয় ফ্রেমে ঘটে, কারণ তখনই প্রথম পাঠ্য এবং চিত্র উপাদানগুলি স্ক্রিনে রেন্ডার করা হয়।

যখন প্রথম বিষয়বস্তু উপাদান রেন্ডার হয় তখন সমস্ত বিষয়বস্তু রেন্ডার হয় না। FCP এবং Largest Contentful Paint (LCP) এর মধ্যে এটি একটি গুরুত্বপূর্ণ পার্থক্য, যা পৃষ্ঠার প্রধান বিষয়বস্তু লোড হওয়া শেষ হলে পরিমাপ করে।

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

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

ভাল FCP মানগুলি 1.8 সেকেন্ড বা তার কম, খারাপ মানগুলি 3.0 সেকেন্ডের বেশি এবং এর মধ্যে যে কোনও কিছুর উন্নতি প্রয়োজন
ভাল FCP মান 1.8 সেকেন্ড বা তার কম। খারাপ মান 3.0 সেকেন্ডের বেশি।

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

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

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

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

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

জাভাস্ক্রিপ্টে FCP পরিমাপ করতে, পেইন্ট টাইমিং API ব্যবহার করুন। নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি PerformanceObserver তৈরি করতে হয় যেটি first-contentful-paint নামের একটি paint এন্ট্রি শোনে এবং কনসোলে লগ করে।

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

এই উদাহরণে, লগ করা first-contentful-paint এন্ট্রি আপনাকে বলে যে প্রথম সামগ্রীপূর্ণ উপাদানটি কখন আঁকা হয়েছিল। যাইহোক, কিছু ক্ষেত্রে এই এন্ট্রি FCP পরিমাপের জন্য বৈধ নয়।

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

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

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

এই সমস্ত সূক্ষ্ম পার্থক্যগুলি মনে রাখার পরিবর্তে, বিকাশকারীরা FCP পরিমাপ করতে web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে পারেন, যা আপনার জন্য এই পার্থক্যগুলিকে যেখানে সম্ভব পরিচালনা করে (iframes ছাড়া):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

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

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

একটি নির্দিষ্ট সাইটের জন্য FCP উন্নত করতে শেখার জন্য, আপনি একটি Lighthouse কর্মক্ষমতা অডিট চালাতে পারেন এবং অডিটের প্রস্তাবিত কোনো নির্দিষ্ট সুযোগ বা ডায়াগনস্টিকসের দিকে মনোযোগ দিতে পারেন।

সাধারণভাবে (যেকোনো সাইটের জন্য) কীভাবে FCP উন্নত করা যায় তা শিখতে, নিম্নলিখিত কর্মক্ষমতা নির্দেশিকা পড়ুন:

চেঞ্জলগ

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

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

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