Static load on products rendering

Tomas Gomez

Posted on 28/09/2021 13:38:57

Hi,

We changed the rendering of the products in the templates. The reason is a SEO recommendation because indexing issues of the pages in Google. They say we had to render the products while the page is loading, that is a static load. This way, in the templates we removed the original dynamic load by handlebars and replace it for a static load by callings to TemplateTags.

After the change, the Google PageSpeed of the pages has been downgraded almost 10 points (from 90 to 80). There should be a little decrease because now the loading of the page has to wait for the rendering of the products, but the current decrease is too big.

Do you know any way to speed up a statiic load of the products? Does anybody faced a similar issue?

Regards,
Tomas

Replies

Nuno Aguiar

Posted on 28/09/2021 14:08:47

Hi Tomas,

You problably need to consider some other things that might be at play:

Are you loading "sub-loops" such as Prices, Variants, Units and Locations that might cause the server-side TTFB to be bigger?
Is CLS worse?
Is there any render-blocking code?
Could the changes you have made, be re-writing the DOM unnecessarily that could hinder the initial page load results?

There's a lot to consider, but maybe these initial questions may help you look at some culprits.

Best Regards,

Nuno Aguiar

Jose Caudevilla

Posted on 01/10/2021 15:05:40

Hi Nuno,

Thanks for your answer.

i have been checking the code of the static load.

Checking our RenderProduct() Function i found that the pagespeed doesnt down go much.

what takes the most longest to load is this function

        var producObject = productService.GetByProductIDs(productIds.ToArray(),true,"LANG1",true,true);
 

we iterate over this loop to render the custom products

On the other side, our CLS is worst but is not relate with the products

About the render-block resources we have this:

I dont know how can avoid it because are css and js rapido necesary files.

Do you know any trick to avoid this render resource files?

Regards,

Jose.

Nuno Aguiar

Posted on 01/10/2021 18:56:06

Hi Jose,

Can you share the URL to that page?

what takes the most longest to load is this function

        var producObject = productService.GetByProductIDs(productIds.ToArray(),true,"LANG1",true,true);
 

we iterate over this loop to render the custom products

I'd have to see the surronding code where this is being applied. Also if you're fetching related data within a list, you're bound to notice some performance issues, which are likely exponentional when you add even a single field to it. Even if DW performs within acceptable, rate, it's more Kb downstream and more markup for the browser and more elements for the browser to paint (css to process) - so if you're running into performance issues, consider if you're trying to simply do too much in the product list.

On the other side, our CLS is worst but is not relate with the products

You can problably fix this with css. It looks like the data you're getting back is taking up more real-estate than the css reserved. Check the rendered area and compare with the css styles. If you make the css take up the necessary space, CLS will drop to 0

About the render-block resources we have this:

Yeah, this is tricky, but you have some options:

Add "&display=swap" to the google fonts request
Check if you need the flag icons and fontawesome
Try to defer all JS - may not work, but it's worth a shot
Consider deferring some css - a trick is to change href to data-href and then have a deffered js that looks for <link> elements with data-href attributes and replaces them with href

These are just some quick notes on stuff you can do, but there's no magic solution for this in Rapido. We've done this for some customers and it does require some time and investigation. Hope it's enough to get you going.

Best Regards,

Nuno Aguiar

You must be logged in to post in the forum

Developer forum

Static load on products rendering

Replies