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

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

  • 43
  • 12
  • 31
  • 11

উৎস

টাইম টু ফার্স্ট বাইট (TTFB) হল ল্যাব এবং ফিল্ড উভয় ক্ষেত্রে সংযোগ সেটআপের সময় এবং ওয়েব সার্ভারের প্রতিক্রিয়া পরিমাপের জন্য একটি মৌলিক মেট্রিক। এটি একটি সম্পদের জন্য অনুরোধ এবং যখন একটি প্রতিক্রিয়ার প্রথম বাইট পৌঁছানো শুরু হয় তার মধ্যে সময় পরিমাপ করে। এটি যখন একটি ওয়েব সার্ভার অনুরোধের প্রতিক্রিয়া জানাতে খুব ধীর হয় তা সনাক্ত করতে এটি সহায়ক করে তোলে। নেভিগেশন অনুরোধের ক্ষেত্রে-অর্থাৎ, একটি HTML নথির জন্য অনুরোধ-এটি প্রতিটি অর্থপূর্ণ লোডিং কর্মক্ষমতা মেট্রিকের আগে।

নেটওয়ার্ক অনুরোধের সময়গুলির একটি চিত্র। বাম থেকে ডানে পর্যায়গুলি হল পুনঃনির্দেশ (যা আনলোডের জন্য প্রম্পটের সাথে ওভারল্যাপ করে), ক্যাশে, ডিএনএস, টিসিপি, অনুরোধ, প্রতিক্রিয়া, প্রক্রিয়াকরণ এবং লোড। সংশ্লিষ্ট সময়গুলি হল রিডাইরেক্ট স্টার্ট এবং রিডাইরেক্টএন্ড (যা আনলোডের আনলোড ইভেন্টস্টার্ট এবং আনলোড ইভেন্টএন্ডের জন্য প্রম্পটের সাথে ওভারল্যাপ করে), fetchStart, domainLookupStart, domainLookupEnd, connectStart, safeConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInterventedCountedConted nd, domComplete, loadEventStart, এবং loadEventEnd .
নেটওয়ার্ক অনুরোধের পর্যায়গুলির একটি চিত্র এবং তাদের সম্পর্কিত সময়। TTFB startTime এবং responseStart এর মধ্যে অতিবাহিত সময় পরিমাপ করে।

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

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

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

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

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

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

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

কিভাবে 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 might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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 অপ্টিমাইজ করার জন্য আমাদের গভীর নির্দেশিকা দেখুন।