টাইম টু ফার্স্ট বাইট (TTFB)

ব্যারি পোলার্ড
জেরেমি ওয়াগনার

Browser Support

  • ক্রোম: 43।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35.
  • সাফারি: 11।

Source

TTFB কি?

TTFB হল একটি মেট্রিক যা একটি রিসোর্সের জন্য অনুরোধ এবং যখন একটি প্রতিক্রিয়ার প্রথম বাইট আসতে শুরু করে তার মধ্যে সময় পরিমাপ করে।

নেটওয়ার্ক অনুরোধের সময়গুলির একটি ভিজ্যুয়ালাইজেশন। বাম থেকে ডানে সময়গুলি হল রিডাইরেক্ট, সার্ভিস ওয়ার্কার ইনিট, সার্ভিস ওয়ার্কার ফেচ ইভেন্ট, HTTP ক্যাশে, ডিএনএস, টিসিপি, রিকোয়েস্ট, আর্লি হিন্টস (103), রেসপন্স (যা আনলোডের জন্য প্রম্পটের সাথে ওভারল্যাপ করে), প্রসেসিং এবং লোড। সংশ্লিষ্ট সময়গুলি হল রিডাইরেক্টস্টার্ট এবং রিডাইরেক্টএন্ড, ফেচস্টার্ট, ডোমেইনলুকআপস্টার্ট, ডোমেনলুকআপএন্ড, কানেক্টস্টার্ট, সিকিউর কানেকশনস্টার্ট, কানেক্টএন্ড, রিকোয়েস্টস্টার্ট, ইন্টারিম রেসপন্সস্টার্ট, রেসপন্সস্টার্ট, আনলোড ইভেন্ট স্টার্ট, আনলোড ইভেন্টএন্ড, রেসপন্সএন্ড, domInteractive, domEventStart domContentLoadedEventEnd, domComplete, loadEventStart এবং loadEventEnd।
নেটওয়ার্ক অনুরোধের পর্যায়গুলির একটি চিত্র এবং তাদের সম্পর্কিত সময়। TTFB startTime এবং responseStart মধ্যে অতিবাহিত সময় পরিমাপ করে।

TTFB হল নিম্নলিখিত অনুরোধের ধাপগুলির সমষ্টি:

  • সময় পুনঃনির্দেশ করুন
  • পরিষেবা কর্মী শুরুর সময় (যদি প্রযোজ্য হয়)
  • DNS সন্ধান
  • সংযোগ এবং TLS আলোচনা
  • অনুরোধ, প্রতিক্রিয়ার প্রথম বাইটটি আসার আগে পর্যন্ত

সংযোগ সেটআপের সময় এবং ব্যাকএন্ডে লেটেন্সি হ্রাস করা আপনার TTFB কমিয়ে দিতে পারে।

TTFB এবং প্রারম্ভিক ইঙ্গিত

103 প্রারম্ভিক ইঙ্গিতের প্রবর্তন "প্রথম বাইট" টিটিএফবি কি পরিমাপ করে তা নিয়ে কিছু বিভ্রান্তির সৃষ্টি করে। 103 প্রারম্ভিক ইঙ্গিত "প্রথম বাইট" হিসাবে গণনা করা হয়. finalResponseHeadersStart হল responseStart এর একটি অতিরিক্ত টাইমিং এন্ট্রি যা পরিমাপ করা চূড়ান্ত নথির প্রতিক্রিয়া (সাধারণত একটি HTTP 200 প্রতিক্রিয়া) শুরু করার পরিমাপ করে।

প্রারম্ভিক ইঙ্গিতগুলি প্রথম দিকে সাড়া দেওয়ার একটি নতুন উদাহরণ। কিছু সার্ভার মূল অংশটি উপলব্ধ হওয়ার আগে নথির প্রতিক্রিয়ার প্রাথমিক ফ্লাশিং ঘটতে দেয়—হয় শুধুমাত্র HTTP শিরোনাম দিয়ে, অথবা <head> উপাদানের সাথে, উভয়কেই প্রাথমিক ইঙ্গিতের সাথে একই রকম বিবেচনা করা যেতে পারে। এই সব reponseStart এবং তাই TTFB হিসাবে পরিমাপ কেন এই অন্য কারণ.

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

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

যেহেতু TTFB ব্যবহারকারী-কেন্দ্রিক মেট্রিক্সের আগে যেমন ফার্স্ট কন্টেন্টফুল পেইন্ট (FCP) এবং সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP) এর আগে, তাই এটি সুপারিশ করা হয় যে আপনার সার্ভার নেভিগেশন অনুরোধে দ্রুত প্রতিক্রিয়া জানায় যাতে ব্যবহারকারীদের 75 তম শতাংশ "ভাল" থ্রেশহোল্ডের মধ্যে একটি FCP অনুভব করে । একটি মোটামুটি নির্দেশিকা হিসাবে, বেশিরভাগ সাইটের 0.8 সেকেন্ড বা তার কম TTFB থাকার চেষ্টা করা উচিত।

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

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

TTFB নিম্নলিখিত উপায়ে ল্যাবে বা ক্ষেত্রে পরিমাপ করা যেতে পারে।

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

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

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

আপনি নেভিগেশন টাইমিং API এর মাধ্যমে ব্রাউজারে নেভিগেশন অনুরোধের TTFB পরিমাপ করতে পারেন। নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি PerformanceObserver তৈরি করতে হয় যা একটি navigation এন্ট্রি শোনে এবং এটি কনসোলে লগ করে:

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ব্রাউজারে আরও সংক্ষিপ্তভাবে TTFB পরিমাপ করতে পারে:

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

সম্পদ অনুরোধ পরিমাপ

TTFB সমস্ত অনুরোধের ক্ষেত্রে প্রযোজ্য, শুধু নেভিগেশন অনুরোধ নয়। বিশেষ করে, ক্রস-অরিজিন সার্ভারগুলিতে হোস্ট করা সংস্থানগুলি সেই সার্ভারগুলিতে সংযোগ স্থাপন করার প্রয়োজনের কারণে বিলম্বিত হতে পারে। ক্ষেত্রের সংস্থানগুলির জন্য TTFB পরিমাপ করতে, একটি PerformanceObserver মধ্যে রিসোর্স টাইমিং API ব্যবহার করুন:

new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  for (const entry of entries) {
    // Some resources may have a responseStart value of 0, due
    // to the resource being cached, or a cross-origin resource
    // being served without a Timing-Allow-Origin header set.
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

পূর্ববর্তী কোড স্নিপেটটি একটি নেভিগেশন অনুরোধের জন্য TTFB পরিমাপ করতে ব্যবহৃত কোডের মতো, 'navigation' এন্ট্রিগুলির জন্য অনুসন্ধানের পরিবর্তে, আপনি পরিবর্তে 'resource' এন্ট্রিগুলির জন্য অনুসন্ধান করুন৷ এটি এই সত্যটির জন্যও দায়ী যে প্রাথমিক উত্স থেকে লোড করা কিছু সংস্থান 0 এর একটি মান ফেরত দিতে পারে, যেহেতু সংযোগটি ইতিমধ্যেই খোলা আছে, বা একটি সম্পদ তাত্ক্ষণিকভাবে একটি ক্যাশে থেকে পুনরুদ্ধার করা হয়েছে।

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

আপনার সাইটের TTFB উন্নত করার বিষয়ে নির্দেশনার জন্য, TTFB অপ্টিমাইজ করার জন্য আমাদের গভীর নির্দেশিকা দেখুন।