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

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

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

  • ক্রোম: ৬০।
  • প্রান্ত: 79।
  • ফায়ারফক্স: 84।
  • সাফারি: 14.1।

উৎস

FCP কি?

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

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

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

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

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

একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, সাইটগুলিকে 1.8 সেকেন্ড বা তার কম সময়ের একটি প্রথম বিষয়বস্তুযুক্ত পেইন্ট রাখার চেষ্টা করা উচিত৷ আপনি আপনার বেশিরভাগ ব্যবহারকারীর জন্য এই লক্ষ্যে পৌঁছেছেন তা নিশ্চিত করার জন্য, পরিমাপ করার জন্য একটি ভাল থ্রেশহোল্ড হল পৃষ্ঠা লোডের 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-এর মধ্যে পার্থক্য

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

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

import {onFCP} from 'web-vitals';

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

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

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

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

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

চেঞ্জলগ

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

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

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