Tracking Client-Side Requests

Having a large number of client-side requests can result in longer load times, and decreased site performance. In most cases client-side requests can be refactored to occur during a site's build/deployment phase. However, before you can start this process, it is helpful to know exactly how many client-side requests are being made. 

Identifying Client-Side Requests

1. Navigate to your site's homepage. 

2. Right click anywhere on the page, and select "Inspect." 

3. The Developer Tools window should appear. From this window select the Network tab. 

4. Refresh the page to populate the Network tab with the requests being made. 

5. Search for "graphql."

Reading Client-Side Requests

If you've followed the steps above, you should now have a list of client-side requests being made by your site. With these requests in-hand you can select any of them to get more info, including the endpoint, status codes, and the raw response data. 

Let's start by determining if a client-side call is being made to Nacelle. First select any of the requests. Next, select the Headers tab, and look at "Request URL." This is the endpoint data is being requested from.

Next to determine what data is being requested, we can select the Payload tab. Under "Request Payload" you should the the GraphQL query, including any filter parameters. 

Finally, let's take a look at the raw data being returned by Nacelle. By selecting the Preview tab we can the data returned by the GraphQL query.