I have a plant details page that consists of plant data, an affiliatelink component that displays a carousel of affiliatelink product descriptions and a component that displays the comments of the details page.
I want such a page to load fast because this might improve my website ranking on google. With that in mind i was thinking about making multiple get requests for the 3 components, doing the get request for the plant data first, then the affiliatelink data and lastly the comments.
Would this cause the page to load faster? I am asking this because in this stackoverflow thread Very large HTTP request vs many small requests it is mentioned that using multiple small get requests as opposed to one big one can cause allot of overhead and thus make the loading go slower in total.
I also have a small question on the side: If i want the different components to load in parallel, should i use the async keyword in the html template page for the affiliatelink and comments components in the page? What about the different get requests, can they be sent in parallel or can only one be sent at a time?
Thank you
HTTP Requests are generally async. Which means, they don't block your browsers execution thread(browsers are single-threaded) to wait for data to be received. That being said. it's ideal to make them parallel.
But it completely depends on the how you're making these requests and whether a later request is dependent on the former.
If your PlantDataComponent, AffiliateLinkComponent, and DetailsPageCommentsComponent are siblings, then it's fine to load all of them together. For that, you'll have to make parallel API calls to their respective services.
But if one of the components is going to get displayed after a user interaction on the previous component, then you should wait for that user interaction and thus load the data lazily. Hope that makes sense.