[SalesForce] Multiple http callout lightning components on one page loading synchronously

Bottom line I want multiple lightning components on a single page to load asynchronously, and it appears they are not, described in detail below

Ok so heres the situation, I have a page that has multiple lightning components, each of which makes a separate http callout to an api , each getting different data, displayed in graphs or tables for a dashboard look. The http callout class is reused by all of the lightning components.

I was testing the speed of the page load, and it seemed slow, and i noticed all of the lightning components were loading their data at once, which points to synchronous rather than asynchronous. Some queries the lightning controllers execute to the http callout a faster than others, so I would like the faster queries to render and not wait for the entire page to load

I also expected each lightning controller to make its own call , it appears in the network tab in chrome tools that all of the lightning components are lumped into one distinct call for 5 separate components, the response for all components are aggregated in the one network call response

/aura?r=37&ax_dv_httpcallout.getCalloutResponseContents=6&BaseListView.getRecordLayoutComponent=2

Here is an example of the lightning component, the only difference is the iteration code field values or display

<aura:component controller="ax_dv_httpcallout" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

<aura:attribute name="response" type="Map"/>
<aura:attribute name="recordId" type="Id" />

<aura:handler name="init" value="{!this}" action="{!c.getResponse}"/>
            <aura:iteration items="{!v.response.data}" var="data">
                <tr scope="row"> 
                    <td>{!data.stage_desc}</td>       
                    <td>{!data.proposal_amount}</td>
                </tr>
            </aura:iteration>
</aura:component>

Heres an example of my lightning component js controllers, for my multiple components, theyre exactly the same except for a param passed for which method to use

Component js

({

    getResponse : function(component) {
        // call webservice class, using parameters to get results
        var action = component.get("c.getCalloutResponseContents");

        action.setParams({
            recordId: component.get("v.recordId")
          , methodURL: "url_part_for_method" //different for each component
        });

        action.setCallback(this, function(response) { 
              var state = response.getState();
           if (state === "SUCCESS") {
               var returnValue =response.getReturnValue();
                component.set("v.response", returnValue );
               console.log(returnValue);
           }

        });

        $A.enqueueAction(action);
    }
})

and my single http callout class is generic, if it needs to be posted let me know

am i running into some weirdness as far as the variable names? or that I'm using the same callout class? or that ive specified that the components are global?

any information or discussion is welcome