0

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

Maurice
  • 6,698
  • 9
  • 47
  • 104
  • 1
    I'd make separate request for each 'set' of data. That way you can see some of the components/data and it won't look like the screen is frozen until it all comes back. Using some sort of loading icon would be good too for each area that will show data. I prefer ngx-loading module, but there are many out there – Kevin Aug 27 '18 at 19:09

1 Answers1

2

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.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • what do you mean with siblings, the PlantDataComponent is the parent component and the other 2 are nested inside this component/page. – Maurice Aug 27 '18 at 19:19
  • By sibling, I mean if both the components load next to each other in a template. – SiddAjmera Aug 27 '18 at 19:20
  • ok, and should i use `async` in the html for the components i want to load in parallel? Not using async means that the other child component well not be loaded until the current component is finished loading right? So if affiliatelinkcomponent tag is above the tag of comments, then comments and everything below affiliatelinkComponent will not continue to load until the affiliateLinkComponent is finished loading, unless i use the async attribute on affiliateLinkComponent, is this how it works? – Maurice Aug 27 '18 at 19:23
  • async as in what? Are you talking about the async pipe or the async keyword that was recently introduced in ES2017? – SiddAjmera Aug 27 '18 at 19:25
  • – Maurice Aug 27 '18 at 19:26
  • This looks new. Can you please share an article link that you're following that might have a reference to this? – SiddAjmera Aug 27 '18 at 19:28
  • it looks im mixing different things here.. The async attribute is actually an html attribute that you use when loading scripts. https://www.w3schools.com/tags/att_script_async.asp I guess this won't have any effect on an angular component then. – Maurice Aug 27 '18 at 19:32
  • Exactly. `async` is also a pipe in Angular that unwraps an Observable/Promise value. I got confused for that reason. – SiddAjmera Aug 27 '18 at 19:34