TTFB defined
Time to First Byte (TTFB) is a metric that measures the time taken to establish a connection to your server and then receive the first byte of page data back (source).
- In terms of load order/timing, TTFB is the first thing that happens when you load a site. It takes place before anything is visually painted on a page. It’s also frequently referred to as “server response time.”
- This is classified as a notable metric. It’s not an official Core Web Vitals metric. Only LCP, INP, and CLS are official metrics that you must pass or fail.
- Why is it important? Because TTFB has a huge impact (more than users think) on metrics like FCP, LCP, and perceived performance (how fast a site feels – it’s not all about scores). Which we’ll dive into.
What is good TTFB?
According to Google, they want you to have your TTFB under 800 ms. However, this can vary slightly between different tools.
For example, if you’re using Lighthouse in Chrome DevTools, they are looking for 600 ms based on how they measure. The official recommended metric for Core Web Vitals is under 800 ms.
I personally recommend that you aim for under 300 ms. The reason is that you can always expect spikes with TTFB due to a variety of factors, as well as the big impact on FCP/LCP, which we’ll dive into. So this metric is incredibly important.
What makes up TTFB
TTFB can be broken up into different parts, but here are the main things you want to worry about, or at least have some control over:
- Redirects
- DNS lookup
- Connection/TLS
- Cache
How to measure TTFB
There are many different tools you can use to measure TTFB. A few of my favorites that I use on a regular basis are PageSpeed Insights (PSI), GTmetrix, SpeedVitals, and DebugBear.
When testing, I always recommend testing at least three times before looking at the data. This is due to any factors that might influence your first test. And this goes for any metric, TTFB, FCP, LCP. Things like cache, network latency, etc., can all influence things. Never just rely on one data point.
In PSI, you’re looking for both the TTFB metric and the warning regarding “Reduce initial server response time.”
PSI and real-user data
It’s important to understand the difference between lab data and real-user data. Lab data is at the bottom of the report under the “Diagnose performance issues” section. This top section is real-user data. It’s collected over an average of 28 days as users hit your site and are recorded for Core Web Vitals. Or rather, they are the only metrics that really matter. But remember, it’s always delayed.
Also, pay attention to this tab to see if there is enough data for your individual URL. Otherwise, the origin (average) of your site is shown.
Beware of Redirects, DNS, and TLS
When testing TTFB, it’s important to consider not just server response time, but also those different parts that I mentioned earlier, such as redirects, DNS, and TLS.
For example, in GTmetrix, you can hover over the HTML doc request and see DNS lookup time, connection, SSL/TLS, waiting, etc. This is essentially all going to contribute to your TTFB.
Beware of Redirects, DNS, and TLS
Let’s say you add a redirect into the mix. In this test, we are speed testing the HTTP version of the URL instead of the HTTPS version. Now theoretically, Google shouldn’t be indexing this version, but it’s good to understand how things like 301 redirects can influence TTFB. That’s why you might have heard in the past that redirects are bad for performance.
We can see that the first request to the HTTP version has its own performance cost, before then going to the HTTPS version. It doesn’t double the time, but it adds quite a bit.
Improving TTFB: hosting
One of the most important factors in determining your TTFB will be your hosting provider. Even Google says the best way to improve TTFB is “hosting, hosting, hosting.”
Higher-quality hosting providers will simply have faster/newer servers, more resources, better uptime, etc. I recommend one of the five providers:
- Kinsta (managed hosting)
- BigScoots (managed hosting)
- Rocket.net (managed hosting)
- InstaWP Live (managed hosting)
- Cloudways (hybrid approach, but more complex/work)
Another reason this can be important is due to some of those factors that aren’t as easy to control, such as DNS/TLS, etc. Many of the hosting providers above are already using fast DNS servers, CDN providers like Cloudflare, etc.
You’ll almost always end up saving money and time by investing in a higher-quality hosting provider from the start. If you’re buying Starbucks every week, you can probably afford a managed host. Then focus all your time and energy on growing your business.
Improving TTFB: cache
After hosting, the most important thing you can do to improve TTFB is to utilize caching. Those managed hosting providers I mentioned provide cache for you, so it’s one less thing you have to worry about. If needed, you can use a cache plugin like WP Fastest Cache, WP Rocket, or Super Page Cache for Cloudflare.
If your hosting provider already has a cache solution (Breeze at Cloudways, LiteSpeed cache, etc.), its usually better to use it over something as, as their developers know their environment better than anyone, and integrations are usually more stable.
- TTFB decrease of 57.64%
- FCP decrease of 43.09%
- LCP decrease of 20.67%
- Load time decrease of 20.67%
Improving TTFB: distance problem
Now that we know how much TTFB impacts FCP and LCP, what happens if we increase the distance? For example, say you have clients all over the globe. The problem is your WordPress site is in one physical location.
Improving TTFB: fix distance with edge cache
The way to fix the distance problem is to utilize edge cache. Unlike a traditional CDN, which speeds up CSS, JS, and images, edge cache serves your entire site (HTML, CSS, JS, and images) from the edge (multiple locations around the globe). Think of it like a CDN on steroids. When someone hits edge cache, there is no request back to the origin server.
The hosting providers I mentioned earlier all have edge cache integrations, either with Cloudflare or through Automattic’s cloud. This problem has already been handled for you.
If you’re using a host without this feature, you can achieve the same thing with your own free Cloudflare account and a plugin. I recommend one of the following combinations:
- Cloudflare with APO add-on ($5/month). Also recommended to install the free Cloudflare plugin.
- Cloudflare with the free Super Page Cache for Cloudflare plugin.
It’s also important to point out that I don’t usually recommend using Cloudflare without edge cache, as you will actually have worse TTFB from the overhead of their WAF. Only use Cloudflare if you’re using edge cache. Otherwise, it would be better to use a traditional CDN. However, sometimes there are security benefits from Cloudflare too, but we’re only concerned with the performance impact right now.
Just how much does edge cache impact TTFB across the globe? Here is a great example using the SpeedVitals TTFB tool.
We can see running a test in America and Europe. Check out the slow degradation in TTFB as we get further away from the host location.
And the TTFB only gets worse as the distance increases.
Here we can see a site running Cloudflare APO (edge cache). You can see that the TTFB is pretty much green across the board, regardless of the location, and a lot more consistent.
Caching at the edge is pretty incredible! Honestly, it’s one of the best performance optimizations I’ve seen in the last decade.
Improving TTFB: Reduce HTML doc size (DOM)
TTFB is primarily about the backend, server resources, cache, distance, etc. However, a larger HTML page size (DOM) means more data that needs to be transferred from the server to the browser. This can potentially slow down server processing time, which can indirectly increase TTFB. You’re probably familiar with that “Avoid an excessive DOM size” warning in PageSpeed Insights.
For example, here I have two sites. Site one is simply a fresh WordPress install. On site two, I added 600 comments, which gives us a way to easily see the impact of having more DOM elements and larger HTML page size. These are uncached.
Here we can see the difference in the total page size.
Now let’s look at the difference in TTFB. It increased by a whopping 162.7% when the HTML page size and number of DOM elements increased.
What can you do to decrease the HTML doc size and reduce the number of DOM elements? Here are afew quick pointers.
- Use lightweight themes and solutions coded with performance in mind. This will automatically result in lower DOM elements/depth, not to mention all the other benefits.
- I recommend GeneratePress (One), Kadence and Kadence Blocks, or Bricks. I can’t stress this enough. I think Kyle will agree. Once you move to these solutions, you’ll never go back.
- Don’t just inline everything possible. I see a lot of tendency to just inline all the CSS, and this can easily lead to a really large HTML doc. Using external stylesheets allows them to be cached separately. The same goes for inline SVG code. Remember, with SVGs as an image, you can lazy load them.
- You can utilize the Script Manager in Perfmatters to disable scripts, stylesheets, or entire plugins where they might not be needed or shouldn’t be loaded. MU mode includes inline CSS/JS.
- Pay attention to the number of HTML elements on your pages or posts. For example, I was working with a client who didn’t realize they had thousands of spam comments. This quickly added up to over60,000 DOM elements on a single post and page size of over 700 KB.
Improving TTFB: increase cache length
How can we keep TTFB low? One thing is to increase your cache length. Most hosts and cache plugins have this set incredibly low out of the box. For example, if your cache expires every 24 hours, it’s most likely that visitors are going to hit your site uncached, and we went over how much the TTFB increases when uncached. By increasing your cache length, you can keep visitors hitting cache longer.
Most hosting providers and plugins now have options where you can change the cache length (also referred to as “time to live (TTL).” We recommend 30 days for most. If it’s a blog or a more static site, you could even increase this to a year.
Also, remember that almost every cache solution has a feature that will automatically purge updated content, refresh the homepage, etc. So you don’t necessarily need to worry about increasing the cache length and visitors seeing something out of date for a long time.
Improving TTFB: preload cache
Another thing you can do to improve TTFB is to preload your cache, also referred to as “warm up.” For example, say you do an entire site cache purge. The site starts rebuilding cache as visitors hit those pages again. However, those first visits are uncached, resulting in higher TTFB.
Preloading cache essentially means that once the cache is purge, there is an automated process to build back the cache without requiring a visitor. This can be done in a few different ways, such as a process that scans your WordPress sitemap file and rebuilds the cache from that.
The one downfall to preloading cache is that it obviously will have additional server overhead, as it’s one more process running.
Cache plugins like WP Fastest Cache, WP Rocket, and the Super Page Cache for Cloudflare plugin all have preload options.
Also, one cool thing about using edge cache with a service like Cloudflare APO is that it instantly pushes cache to all edge locations on the first visit from any location. It doesn’t require someone to hit each separate edge location. Although this is just at the edge layer.
Improving TTFB: clear cache less often
Another simple tip to improve TTFB over time is to simply clear cache less often. Be more careful about simply hitting the clear cache button all the time. Obviously, this might be needed if you’re in the middle of optimizing or troubleshooting. However, many cache solutions also allow you to purge cache on a single URL. So if you’re trying to fix an issue in one area, that might be a better route to go.
It can be good to set a maintenance schedule for plugin and theme updates. Let’s say you update everything once a month, and then do a full purge of all cache layers (due to changes in code). That gives your 30-day cache length (TTL), as I talked about earlier, time to take full effect.
And remember, if you have edge cache with say Cloudflare, and page cache with your hosting provider or a plugin, you might have two different layers of cache.
Quick summary of TTFB
- TTFB has a huge impact on FCP, LCP, and perceived performance.
- Get TTFB under 800 ms, but aim for under 300 ms.
- Hosting, hosting, hosting.
- Server or page cache is a must.
- Don’t forget about redirects, DNS, TLS.
- Edge cache fixes the distance problem.
- Reduce the HTML doc size and number of DOM elements.
- Increase cache length time.
- Preload cache.
- Clear cache less often.
- TTFB isn’t actually an official Core Web Vitals metric, but you can probably see now how it plays into it.
It’s also important to remember that not everything has to be perfect. For example, you might have certain areas of your site that need to bypass cache due to functional reasons (I sure do). And if you’re serving clients all over the globe, those areas very well could have much higher TTFB.
As with everything in PageSpeed Insights, it’s sometimes a waste of time trying to aim for perfection. Instead, focus on constant improvements over time and whatever works best for your individual site. That’s the beauty of WordPress: There are a lot of different ways to optimize it.
Trying to Improve Your Core Web Vitals?
This article is part of a larger series, called Vitality, where we tackle notable metrics and Core Web Vitals!
Frequently Asked Questions
Improving Time to First Byte (TTFB) is crucial for enhancing your website’s performance. Here are the five most impactful actions you can take, based on recommendations from the presentation:
- Optimize Your Hosting
- Why: The quality of your hosting provider has a significant impact on TTFB. Higher-quality hosts have faster servers, better resources, and more efficient handling of traffic.
- Recommendation: Invest in managed WordPress hosting providers such as Kinsta, BigScoots, Rocket.net, InstaWP Live, or Cloudways. These providers offer optimized environments that improve server response times.
- Implement Caching
- Why: Caching reduces the time required to serve content by storing frequently accessed data. This can dramatically lower TTFB by avoiding repeated processing for each request.
- Recommendation: Utilize caching plugins like WP Fastest Cache, WP Rocket, or Super Page Cache for Cloudflare. If your hosting provider includes built-in caching (like Breeze at Cloudways), use it to benefit from environment-specific optimizations.
- Utilize Edge Caching
- Why: Edge caching serves content from servers located closer to your users, reducing latency and improving TTFB for geographically dispersed audiences.
- Recommendation: Use edge caching services provided by your host or set up Cloudflare’s Automatic Platform Optimization (APO) for WordPress. For a free alternative, use the Super Page Cache for Cloudflare plugin.
- Reduce HTML Document Size (DOM)
- Why: A large HTML document with many DOM elements increases processing time, indirectly affecting TTFB.
- Recommendation: Simplify your pages by reducing the number of elements. Use lightweight themes and performance-focused page builders like GeneratePress, Kadence, or Bricks. Avoid inlining all CSS and SVG code, and keep your HTML clean and minimal.
- Manage Cache Length and Preload Cache
- Why: Setting an appropriate cache length ensures that users hit cached content more often, reducing server load and improving TTFB.
- Recommendation: Increase cache duration to at least 30 days for most sites, and consider longer periods for static or less frequently updated sites. Implement cache preloading to rebuild cache proactively, ensuring quick response times even after cache purges.
By focusing on these five areas, you can make substantial improvements to your TTFB, leading to a faster, more responsive website that enhances user experience and performs better in search engine rankings.
Time to First Byte (TTFB) is a performance metric that measures the time it takes for a user’s browser to receive the first byte of data from your server after a request is made. It includes the time taken for:
- DNS Lookup: Resolving the domain name to an IP address.
- Connection: Establishing a connection, including SSL/TLS handshake.
- Waiting: Waiting for the server to respond and send the first byte.
TTFB is critical because it impacts how quickly the rest of your page begins to load, influencing other metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP), as well as overall user experience.
A good TTFB score is generally considered to be under 800 milliseconds. However, for optimal performance, aiming for a TTFB under 300 milliseconds is recommended. This allows for occasional spikes and ensures consistently fast server response times, contributing to better user experience and improved performance metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
TTFB is composed of three main phases:
- DNS Lookup: The time it takes to resolve the domain name into an IP address.
- Connection/TLS: The time required to establish a connection, including the SSL/TLS handshake.
- Waiting: The time spent waiting for the server to process the request and send the first byte of data back to the browser.
These phases collectively determine how quickly your server responds to a user’s request, impacting overall page load time and user experience.
You can measure TTFB using various web performance tools. Here are some popular options:
- PageSpeed Insights: Provides detailed performance metrics, including TTFB, and recommendations for improvement.
- GTmetrix: Offers a visual breakdown of loading times, including TTFB, and other key performance metrics.
- SpeedVitals: A specialized tool that measures TTFB across different geographic locations.
- DebugBear: Provides in-depth performance analysis, including TTFB, and tracks changes over time.
- Chrome DevTools: Built into the Chrome browser, it allows you to measure TTFB by analyzing network requests.
When testing, it’s recommended to run multiple tests to account for variations in network conditions and caching.
Hosting significantly impacts TTFB because the quality and performance of your hosting provider determine how quickly your server can respond to requests. Here’s how:
- Server Speed: Higher-quality hosting providers use faster and more powerful servers, which can process requests more quickly.
- Resources: Managed hosting providers often allocate more resources (CPU, RAM) to each site, reducing latency.
- Uptime and Reliability: Premium hosts have better uptime and reliability, ensuring consistent performance.
- Optimized Environments: Managed hosts often provide optimized environments specifically for WordPress, including built-in caching and performance enhancements.
- Geographic Proximity: Hosting providers with data centers closer to your users can reduce the physical distance data must travel, improving TTFB.
Investing in a high-quality, managed hosting provider can significantly lower your TTFB and enhance overall site performance.
Caching significantly improves TTFB by storing frequently accessed data closer to the user, reducing the time needed to generate a response from the server. Here’s how it works:
- Reduced Server Load: Cached data means the server doesn’t have to process the same requests repeatedly, which speeds up the response time.
- Faster Data Retrieval: Cached content is delivered directly from a cache storage, bypassing the need for server-side processing.
- Edge Caching: By using edge caching (e.g., via a CDN), content is served from locations closer to the user, reducing latency and improving TTFB.
- Preloaded Cache: Preloading cache ensures that content is ready to be served without delay, maintaining low TTFB even after cache purges.
Implementing caching strategies, such as server-side caching, page caching, and using a CDN with edge caching, can drastically lower TTFB and enhance overall website performance.
The “Avoid Excessive DOM size” warning indicates that your HTML document has too many DOM elements, which can slow down your site and increase TTFB. Here are some steps to address this:
- Simplify Your Layout: Reduce the number of HTML elements by streamlining your page design. Remove unnecessary elements and sections.
- Use Lightweight Themes: Choose themes designed with performance in mind, such as GeneratePress, Kadence, or Bricks, which generate less HTML bloat.
- Optimize Page Builders: If using page builders, avoid excessive nesting of elements. Inspect your pages to ensure they aren’t adding unnecessary wrappers and containers.
- Limit Inline Elements: Avoid inlining all CSS and SVG code, as this can increase the size of your HTML document. Use external stylesheets and images where possible.
- Reduce Comments and Widgets: Manage and limit the number of comments and widgets on your pages, especially if they generate a large number of DOM elements.
By reducing the number of DOM elements, you can improve your site’s performance, lower TTFB, and enhance the user experience.
The optimal TTL (Time to Live) for your cache depends on the nature of your website, but here are some general guidelines:
- Standard Websites: For most websites, a TTL of 30 days is recommended. This balances the need for updated content with the benefits of having cached data.
- Blogs or Static Sites: For blogs or sites that don’t update frequently, a TTL of up to one year can be appropriate. This ensures content is served quickly from the cache.
- Dynamic or E-commerce Sites: For sites with frequently changing content, such as e-commerce sites, you might set a shorter TTL (e.g., 1 day to 1 week) to ensure users see the most up-to-date information.
Most modern caching solutions will automatically purge and refresh the cache when content updates are detected, so you can set a longer TTL without worrying about stale content.
TTFB (Time to First Byte) and Core Web Vitals are both crucial for website performance, but they measure different aspects of it. Here’s how they relate:
- Impact on Core Web Vitals Metrics:
- First Contentful Paint (FCP): TTFB directly affects FCP, which measures the time it takes for the first piece of content to appear on the screen. A slower TTFB delays the start of content rendering, resulting in a higher FCP.
- Largest Contentful Paint (LCP): TTFB also impacts LCP, which measures the time it takes for the largest content element to load. A higher TTFB means that the largest element, such as a banner image or a large block of text, will take longer to appear.
- Interaction to Next Paint (INP): Although not directly measured by TTFB, a slow TTFB can contribute to a slower overall experience, affecting how quickly users can interact with your site.
- Perceived Performance:
- TTFB plays a significant role in perceived performance, which is how fast users feel your website loads. Even if your Core Web Vitals scores are good, a high TTFB can make your site feel sluggish, leading to a poor user experience.
- Optimization Efforts:
- While TTFB is not an official Core Web Vitals metric, optimizing it can lead to improvements in the Core Web Vitals metrics. Faster server response times set a strong foundation for quicker overall load times and better performance.
Although TTFB is not a Core Web Vitals metric, it has a significant impact on FCP, LCP, and the overall user experience. Improving TTFB can help enhance your Core Web Vitals scores and ensure a faster, more responsive website.
Edge caching is a performance optimization technique that stores cached content on servers located at the “edge” of a network, which are closer to the end users. This technique is primarily implemented through Content Delivery Networks (CDNs) that have multiple data centers around the world.
How Edge Caching Works:
- Content Distribution: When a user requests content from your website, the request is routed to the nearest CDN server (edge server) rather than your origin server.
- Local Storage: The edge server delivers cached content directly to the user if it has the requested data stored locally. This reduces the distance data has to travel.
- Origin Fetch: If the edge server does not have the requested content, it fetches it from the origin server, caches it locally, and then serves it to the user.
How Edge Caching Improves TTFB:
- Reduced Latency: By serving content from a server geographically closer to the user, edge caching minimizes the distance data must travel, significantly reducing latency and TTFB.
- Decreased Server Load: Edge servers handle a significant portion of the traffic, reducing the load on your origin server. This allows the origin server to respond faster to requests that do need to go through it.
- Faster Response Times: With cached content readily available at edge servers, the time to deliver the first byte of data (TTFB) is minimized, leading to quicker overall load times.
Implementing Edge Caching:
- CDN Services: Use CDN services like Cloudflare, which offers Automatic Platform Optimization (APO) for WordPress, or other CDN providers integrated by managed hosts.
- Plugins: Utilize plugins such as Super Page Cache for Cloudflare, which can help manage edge caching effectively.
By leveraging edge caching, you can significantly improve TTFB, enhance user experience, and ensure faster and more reliable content delivery across the globe.