<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Kelvin I.</title>
    <description>The latest articles on Forem by Kelvin I. (@kl3va).</description>
    <link>https://forem.com/kl3va</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3537824%2F432e72c5-6284-4e0f-9b8b-cd55e3e3df3d.jpg</url>
      <title>Forem: Kelvin I.</title>
      <link>https://forem.com/kl3va</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/kl3va"/>
    <language>en</language>
    <item>
      <title>Understanding TTFB: How to Spot It on Your Site.</title>
      <dc:creator>Kelvin I.</dc:creator>
      <pubDate>Thu, 02 Oct 2025 09:32:52 +0000</pubDate>
      <link>https://forem.com/kl3va/understanding-ttfb-how-to-spot-it-on-your-site-496n</link>
      <guid>https://forem.com/kl3va/understanding-ttfb-how-to-spot-it-on-your-site-496n</guid>
      <description>&lt;p&gt;Few days ago, I came across a tweet that talked about performance and how poor performance can often be due to poor API design. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjqvoa4heepulppmjbf8d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjqvoa4heepulppmjbf8d.png" alt="Tweet by EO" width="800" height="342"&gt;&lt;/a&gt;&lt;br&gt;
He basically said that performance issues are not usually caused by the frontend, but by the backend. I agreed, and I replied that one way to track and confirm this is by looking at a metric called TTFB (Time to First Byte). That reply quickly gained traction with a good number of bookmarks, and I saw the need to write this short article. &lt;/p&gt;

&lt;p&gt;In this article, I’ll cover the WHAT, WHY, and HOW of TTFB.&lt;/p&gt;

&lt;h2&gt;
  
  
  WHAT
&lt;/h2&gt;

&lt;p&gt;Time to First Byte (TTFB) is the time it takes for a browser to receive the first byte of response from the server after making a request.&lt;/p&gt;

&lt;p&gt;A common misconception is that TTFB is just “server response time.” In reality, it’s more than that. It includes several steps that happen before the browser sees the first byte:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;DNS Lookup&lt;/strong&gt; – If DNS resolution is slow, it adds delay.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TCP Connection&lt;/strong&gt; – Establishing the connection takes time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TLS/SSL Negotiation&lt;/strong&gt; – Secure connections add extra handshakes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Server Processing&lt;/strong&gt; – If the backend or database is slow, response is delayed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;First Byte Sent&lt;/strong&gt; – Only after all the above does the browser get the first byte.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftems06ajpj6dy2nrypiw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftems06ajpj6dy2nrypiw.png" alt="Web request flow with TTFB" width="800" height="533"&gt;&lt;/a&gt;This is why slowdowns can come from many places and not just the server itself. A slow DNS, network latency, redirects, or heavy server processing all add up and increase &lt;strong&gt;TTFB&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu3aolrjwi4m3gi1hux56.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu3aolrjwi4m3gi1hux56.png" alt="TTFB in action" width="800" height="428"&gt;&lt;/a&gt; &lt;br&gt;
In the image above, the green bar represents TTFB, while the blue bar shows the time it took for the browser to download the contents.&lt;/p&gt;

&lt;h2&gt;
  
  
  WHY
&lt;/h2&gt;

&lt;p&gt;Why measure TTFB?&lt;/p&gt;

&lt;p&gt;As we mentioned, server response time only measures how quickly the server processes and responds to a request. TTFB, on the other hand, captures the entire journey, from DNS lookup to response.&lt;/p&gt;

&lt;p&gt;This matters because TTFB varies for every user, depending on their network conditions, location, and the server setup. It’s a very handy metric for understanding how users actually perceive the speed of your site.&lt;/p&gt;

&lt;p&gt;By analyzing TTFB, you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Identify where delays occur (DNS, network, server, etc.).&lt;/li&gt;
&lt;li&gt;Optimize accordingly to deliver faster web pages.&lt;/li&gt;
&lt;li&gt;Improve user satisfaction and reduce bounce rates.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s also worth noting that &lt;strong&gt;slow TTFB negatively affects SEO rankings&lt;/strong&gt;. For those who prioritize discoverability, this makes TTFB even more important.&lt;/p&gt;

&lt;h2&gt;
  
  
  HOW
&lt;/h2&gt;

&lt;p&gt;Using Chrome DevTools&lt;/p&gt;

&lt;p&gt;You can easily measure TTFB with Chrome DevTools.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Visit the site.&lt;/li&gt;
&lt;li&gt;Right-click and select Inspect.&lt;/li&gt;
&lt;li&gt;Navigate to the &lt;strong&gt;Network&lt;/strong&gt; tab.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh5k9vix3fmybu9s5t3e5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh5k9vix3fmybu9s5t3e5.png" alt="network tab" width="800" height="330"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on any file to see it's TTFB(shown as (waiting for server response))&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffq0gdmmcc3i322kvz9ii.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffq0gdmmcc3i322kvz9ii.png" alt="TTFB of the selected file" width="800" height="320"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;⚠️ Note: Chrome DevTools results depend on your local network conditions and location. So, while useful, they don’t fully reflect the experience of all your users.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using WebPageTest&lt;/strong&gt;&lt;br&gt;
For a broader, location-based perspective, tools like &lt;a href="https://www.webpagetest.org/" rel="noopener noreferrer"&gt;WebPageTest&lt;/a&gt; are more reliable.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Go to the site and enter your URL.&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff12959xtsligpfrvo1lx.png" alt="webpagetest home page" width="800" height="417"&gt;
&lt;/li&gt;
&lt;li&gt;Once the test resolves, you can view the TTFB from the results:&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwqjuc7w91qn4a35m9atq.png" alt="Test result" width="800" height="435"&gt;
&lt;/li&gt;
&lt;li&gt;For deeper insights, click on the waterfall chart.&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw7uk5op4tvhk2ioc7grn.png" alt="Waterfall chart" width="800" height="445"&gt;
&lt;/li&gt;
&lt;li&gt;This gives you a detailed breakdown of TTFB for individual files.&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpdjw7etdiy9cshw7ynyn.png" alt="Individual file result" width="800" height="443"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  CONCLUSION
&lt;/h2&gt;

&lt;p&gt;According to Google, websites should aim for a TTFB of 800ms or less.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;0–800ms → Good&lt;/li&gt;
&lt;li&gt;800–1800ms → Fair (needs improvement)&lt;/li&gt;
&lt;li&gt;1800ms+ → Poor (users are likely to bounce)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There’s much more to say about how to improve TTFB (like caching, CDNs, server optimization, etc.), but since this is an introduction, we’ll keep it simple for now.&lt;/p&gt;

&lt;p&gt;The key takeaway: TTFB is critical for site performance, and it directly affects metrics like &lt;strong&gt;LCP (Largest Contentful Paint) and FCP (First Contentful Paint)&lt;/strong&gt;, which we’ll cover in a future article.&lt;/p&gt;

</description>
      <category>webvitals</category>
      <category>webperf</category>
      <category>frontend</category>
      <category>devtools</category>
    </item>
  </channel>
</rss>
