Time to First Byte (TTFB) | Blue Frog Docs

Time to First Byte (TTFB)

Diagnose and fix slow server response times to improve all performance metrics and user experience

Time to First Byte (TTFB)

What This Means

Time to First Byte (TTFB) measures the time between a browser requesting a page and receiving the first byte of information from the server. TTFB is the foundation for all other performance metrics - if your server responds slowly, everything else will be slow.

TTFB Thresholds

  • Good: < 800ms (green)
  • Needs Improvement: 800ms - 1800ms (yellow)
  • Poor: > 1800ms (red)

Impact on Your Business

Foundation for All Metrics:

  • No other metric can be fast if TTFB is slow
  • TTFB directly affects LCP, FCP, and Speed Index
  • Poor TTFB makes good Core Web Vitals impossible

User Experience:

  • Slow TTFB creates "blank page" experience
  • Users see nothing while waiting for server response
  • Increases perceived loading time significantly

SEO Impact:

  • Google uses TTFB as a ranking signal
  • Slow TTFB indicates poor server quality
  • Affects crawl budget and indexing speed

Global Reach:

  • TTFB varies by user location
  • Users far from server experience worse TTFB
  • CDN critical for global audiences

TTFB Components

TTFB includes three phases:

  1. Redirect time - Following redirects (if any)
  2. Service worker startup - Service worker boot time (if applicable)
  3. Server response time - Backend processing and network latency
    • DNS lookup
    • TCP connection
    • TLS negotiation (HTTPS)
    • Request processing
    • Response generation

How to Diagnose

Method 1: PageSpeed Insights

  1. Navigate to PageSpeed Insights
  2. Enter your website URL
  3. Click "Analyze"
  4. Scroll to "Diagnostics" section
  5. Look for "Server response times are low (TTFB)"
  6. Review server response time breakdown

What to Look For:

  • Total TTFB duration
  • Whether it's flagged as an issue
  • Server response time warnings
  • Redirect chains

Method 2: Chrome DevTools (Detailed Analysis)

  1. Open your website in Chrome
  2. Press F12 to open DevTools
  3. Navigate to "Network" tab
  4. Refresh the page (Cmd+R or Ctrl+R)
  5. Click the first HTML document request
  6. View "Timing" tab
  7. Review the timing breakdown:
    • Queueing - Browser queue time
    • Stalled - Waiting for connection
    • DNS Lookup - Domain resolution
    • Initial connection - TCP handshake
    • SSL - TLS negotiation
    • Waiting (TTFB) - Server processing time
    • Content Download - Transfer time

What to Look For:

  • High "Waiting (TTFB)" time (should be < 800ms)
  • DNS lookup delays
  • SSL negotiation time
  • Multiple redirects

Method 3: WebPageTest

  1. Navigate to WebPageTest
  2. Enter your website URL
  3. Select test location close to your users
  4. Click "Start Test"
  5. Review the waterfall chart
  6. Check "First Byte" timing
  7. Test from multiple locations globally

What to Look For:

  • TTFB from different geographic locations
  • Variations between locations
  • DNS, Connect, and SSL times
  • Server processing time

Method 4: Command Line Tools

Using curl:

curl -o /dev/null -s -w '\nTiming Breakdown:\n\nDNS Lookup: %{time_namelookup}s\nTCP Connection: %{time_connect}s\nTLS Handshake: %{time_appconnect}s\nTTFB: %{time_starttransfer}s\nTotal Time: %{time_total}s\n' https://yoursite.com

What to Look For:

  • time_starttransfer = TTFB
  • High DNS or connection times
  • Slow server response
  • Compare from different servers/locations

Method 5: Server Logs

Review server logs to identify:

  • Slow database queries
  • Long-running scripts
  • Resource-intensive operations
  • Server errors or warnings

General Fixes

Fix 1: Use a Content Delivery Network (CDN)

CDNs dramatically reduce TTFB for global users:

  1. Choose a CDN provider:

    • Cloudflare (recommended for ease)
    • Fastly
    • AWS CloudFront
    • Bunny CDN
    • KeyCDN
  2. Configure CDN properly:

    • Enable automatic caching
    • Set appropriate cache rules
    • Enable HTTP/2 or HTTP/3
    • Configure origin shield if available
  3. Verify CDN is working:

    curl -I https://yoursite.com | grep -i "cf-ray\|x-cache\|server"
    
  4. Benefits:

    • Serves content from edge locations near users
    • Reduces network latency by 50-80%
    • Handles TLS termination at edge
    • Provides DDoS protection

Fix 2: Enable Server-Side Caching

Cache rendered HTML to avoid regenerating pages:

  1. Page caching (full HTML caching):

    • Cache entire rendered pages
    • Serve cached version for repeated requests
    • Invalidate cache when content changes
  2. Object caching:

    • Cache database query results
    • Use Redis or Memcached
    • Cache API responses
  3. Opcode caching (PHP):

    • Use OPcache for PHP
    • Caches compiled PHP code
    • Reduces parsing overhead
  4. Configuration example (WordPress):

    // wp-config.php
    define('WP_CACHE', true);
    
    // Install caching plugin:
    // - WP Rocket (premium)
    // - W3 Total Cache (free)
    // - WP Super Cache (free)
    

Fix 3: Optimize Database Performance

Database queries are often the primary TTFB bottleneck:

  1. Add database indexes:

    -- Identify slow queries
    SHOW FULL PROCESSLIST;
    
    -- Add indexes to frequently queried columns
    CREATE INDEX idx_user_email ON users(email);
    CREATE INDEX idx_post_date ON posts(created_at);
    
  2. Optimize slow queries:

    • Use EXPLAIN to analyze queries
    • Avoid SELECT *
    • Use JOINs efficiently
    • Limit result sets
  3. Enable query caching:

    -- MySQL query cache
    SET GLOBAL query_cache_size = 67108864;
    SET GLOBAL query_cache_type = 1;
    
  4. Use connection pooling:

    • Reuse database connections
    • Reduces connection overhead
    • Particularly important for high-traffic sites

Fix 4: Upgrade Hosting Infrastructure

Inadequate hosting is a common TTFB cause:

  1. Assess current hosting:

    • Shared hosting: Often causes slow TTFB
    • VPS: Better performance and control
    • Dedicated: Best for high-traffic sites
    • Managed hosting: Optimized for platform
  2. Recommended hosting by platform:

    • Shopify: Hosting included (optimized)
    • WordPress: WP Engine, Kinsta, Cloudways
    • General: DigitalOcean, Linode, Vultr
  3. Server requirements:

    • Adequate CPU (2+ cores minimum)
    • Sufficient RAM (2GB+ minimum)
    • SSD storage (not HDD)
    • Modern PHP version (8.0+)
  4. Server location:

    • Choose region closest to target audience
    • Use CDN for global reach
    • Consider multi-region deployment

Fix 5: Optimize Server Configuration

Server configuration directly impacts TTFB:

  1. Enable compression:

    # Nginx
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript
               application/javascript application/xml+rss
               application/json image/svg+xml;
    
    # Brotli (better compression)
    brotli on;
    brotli_types text/css application/javascript image/svg+xml;
    
  2. Enable HTTP/2 or HTTP/3:

    # Nginx
    listen 443 ssl http2;
    # Or HTTP/3
    listen 443 quic reuseport;
    
  3. Optimize worker processes:

    # Nginx
    worker_processes auto;
    worker_connections 1024;
    
  4. Configure caching headers:

    # Nginx
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    

Fix 6: Reduce Redirects

Each redirect adds round-trip delay:

  1. Audit redirect chains:

    curl -I -L https://yoursite.com
    
  2. Common redirect issues:

    • HTTP → HTTPS → WWW (two redirects)
    • Should be: HTTP → HTTPS+WWW (one redirect)
  3. Fix redirect chains:

    # Bad - multiple redirects
    # HTTP → HTTPS, then HTTPS → HTTPS+WWW
    
    # Good - single redirect
    server {
        listen 80;
        listen 443 ssl;
        server_name example.com;
        return 301 https://www.example.com$request_uri;
    }
    
  4. Avoid unnecessary redirects:

    • Update internal links to final URL
    • Use canonical URLs in links
    • Remove redirect-based routing

Fix 7: Optimize Application Code

Backend code efficiency affects TTFB:

  1. Profile application performance:

    • Use APM tools (New Relic, Datadog)
    • Identify slow functions/methods
    • Optimize bottlenecks
  2. Reduce external API calls:

    • Cache API responses
    • Use async requests when possible
    • Implement timeouts
  3. Lazy load non-critical data:

  4. Optimize asset generation:

    • Pre-compile templates
    • Cache rendered components
    • Use asset pipeline optimization

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify TTFB Optimization
WordPress WordPress TTFB Optimization
Wix Wix TTFB Optimization
Squarespace Squarespace TTFB Optimization
Webflow Webflow TTFB Optimization

Verification

After implementing fixes:

  1. Test with Chrome DevTools:

    • Clear cache
    • Hard refresh (Cmd+Shift+R or Ctrl+Shift+R)
    • Check Network tab → Timing → Waiting (TTFB)
    • Verify < 800ms
  2. Test from multiple locations:

    • Use WebPageTest from 3+ locations
    • Verify TTFB improvements globally
    • Ensure CDN is serving correctly
  3. Run PageSpeed Insights:

    • Test multiple times
    • Verify no TTFB warnings
    • Confirm improved metrics
  4. Monitor continuously:

    • Set up server monitoring
    • Track TTFB over time
    • Alert on regressions

Common Mistakes

  1. Ignoring TTFB - It's the foundation for all other metrics
  2. No CDN for global audience - Users far from server suffer
  3. Inadequate hosting - Shared hosting often too slow
  4. No server-side caching - Regenerating pages every request
  5. Unoptimized database - Slow queries kill TTFB
  6. Multiple redirects - Each adds latency
  7. Heavy server-side processing - Move work to client or cache
  8. Old PHP/software versions - Newer versions often faster

TTFB Impact on Other Metrics

TTFB → FCP

  • FCP cannot occur before TTFB
  • Slow TTFB delays all visual feedback
  • Optimize TTFB first

TTFB → LCP

  • LCP depends on content loading
  • Content loading starts after TTFB
  • Fast TTFB enables fast LCP

TTFB → TBT

  • JavaScript execution starts after TTFB
  • Slow TTFB delays script execution
  • May cascade to TBT issues

Additional Resources

// SYS.FOOTER