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

Jeremy Wagner

Barry Pollard

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

• 43
• 12
• 31
• 11

উৎস

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

নেটওয়ার্ক অনুরোধের পর্যায়গুলির একটি চিত্র এবং তাদের সম্পর্কিত সময়। TTFB startTime এবং responseStart মধ্যে অতিবাহিত সময় পরিমাপ করে।

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

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

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

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

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

ভাল TTFB মানগুলি 0.8 সেকেন্ড বা তার কম এবং খারাপ মানগুলি 1.8 সেকেন্ডের বেশি।

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

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

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

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

• ক্রোম ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন
• web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি

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

• Chrome এর DevTools এর নেটওয়ার্ক প্যানেলে
• ওয়েবপেজ টেস্ট

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

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

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

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

সতর্কতা: সমস্ত ব্রাউজার PerformanceObserver বা এর buffered পতাকা সমর্থন করে না। সম্ভাব্য বিস্তৃত ব্রাউজার সমর্থন পেতে, web-vitals প্যাকেজ গ্রহণ করার কথা বিবেচনা করুন, যা এই পৃষ্ঠায় পরে আলোচনা করা হয়েছে।

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 ক্ষেত্রে পরিমাপযোগ্য হবে না যদি ক্রস-অরিজিন সার্ভার একটি Timing-Allow-Origin হেডার সেট করতে ব্যর্থ হয়।

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

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