TTFB on whatwg-fetch request from NodeJS app is over 15 seconds every time. What am I doing wrong?

Question

I am making a whatwg-fetch request from my React application served up at 111.111.111.111 like so:

    fetch('http://222.222.222.222/search.php', {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        SearchValue: this.props.SearchValue,
        SearchOption: this.props.SearchOption,
      })
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })

On the other end (at 222.222.222.222) I have this:


<?php 
require_once('initialize.php');
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://111.111.111.111");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: content-type");
header("Access-Control-Max-Age: 86400");

/* Prepared Statement (not very complicated, returns 5 results) */

For some reason the server takes 15 seconds to respond to my fetch request. It takes 15 seconds (most of the time) just to get the first byte back from the responding server. What am I doing wrong? How do I use fetch to get data from my database in JSON format?

KFSys · Answer

Hi @donaldwaynemoorejr , Please make sure you are not making any external requests which might be slowing down the application. One other suggestion I have after some research and it seems the problem is related with the way Chrome uses connections, if you are checking this with a Chrome browser that might be reason behind it.

KFSys · Answer

When dealing with a Time To First Byte (TTFB) as high as 15 seconds consistently, the issue often lies in server-side processing, network delays, or configuration issues rather than the fetch request itself. Here’s a step-by-step approach to troubleshoot and potentially resolve the high TTFB issue:

1. Server-Side Investigation

The first step is to check the server-side script handling the request. Since you’re using PHP and making database queries:

Debug the PHP Script:
- Temporarily add timing logs to your PHP script to determine how long different sections of your script are taking. For example:

$time_start = microtime(true);

// Your database query
$result = $db->query('SELECT * FROM table WHERE condition');

$time_end = microtime(true);
$execution_time = ($time_end - $time_start);
error_log('Query Time: ' . $execution_time);

Optimize Database Interaction:
- Review and optimize your database query. Long query times could be due to a lack of indexes, large datasets, inefficient queries, or database configuration issues.
- Check the database server load and performance metrics.

2. Network Issues

Check Network Latency: Use tools like ping or traceroute from the server to the database if they are separate, and from your client to the server to check for any network delays.

3. Fetch Configuration and CORS

Your fetch setup and CORS headers appear correct, but make sure the server isn’t spending time on preflight requests:
- Preflight requests (sent automatically by browsers for cross-origin POST requests) might add overhead if not handled efficiently on the server.
Simplify CORS for Testing:\

header("Access-Control-Allow-Origin: *");

4. PHP Environment

Check PHP Runtime Configuration:
- Ensure your PHP environment is optimized for performance. Check memory limits, execution time, and look into your PHP-FPM or Apache/Nginx settings if applicable.
Server Load:
- Review the server load. High CPU usage, memory usage, or disk I/O can cause slow response times.

5. Inspecting Front-End Fetch Call

Check Browser Network Panel:
- Use the browser’s developer tools (Network tab) to inspect the fetch request and response time details. It might give you clues whether the delay is before the request is sent, or after the request is made.
JavaScript Execution Delays:
- Ensure there are no client-side delays in processing or sending the fetch request. This can be particularly important if your React application is doing heavy computations or updates before initiating the fetch call.

6. External Factors

Check for External Resource Dependencies:
- If your PHP script depends on external services (like third-party APIs), these can significantly impact your TTFB. Test these external endpoints independently.

7. Testing Isolated Changes

Isolate Changes: Make one change at a time and test the effect on TTFB to identify what impacts the latency the most.

8. Logs and Monitoring

Server Logs: Check server logs for any errors or warnings that might indicate what is causing the delay.
Profiling Tools: Use profiling tools or APM (Application Performance Monitoring) solutions to get detailed insights into what happens when the request is processed.

By methodically checking these areas, you should be able to pinpoint the cause of the high TTFB and address it accordingly. If after these checks the issue persists, consider reaching out to your hosting provider or a network expert for further analysis.