[SOLVED] How can I get in header.twig (Opencart 3.0.3.6) the product's images urls in order to add rel="preload" ?

Hi,

Because of the Google Core Web Vitals low LCP data, I need to find a way to do this:
All in header.twig file:
1. Only if it is a product page, for the product page, to get all the product's images and display in header.twig of my theme something like:
<link rel="preload" as="image" href="hero-image1.jpg">
<link rel="preload" as="image" href="hero-image2.jpg"> and so on

2. Only if it is a category page, for any given category, how can I get the first of all of the products' images url and display in the header.twig the same code:
<link rel="preload" as="image" href="hero-image1.jpg">
<link rel="preload" as="image" href="hero-image1.2pg">

By preloading images, at least the first that shows up on screen, especially on mobile view, this seems to improve the LCP score...

Can anyone help? Thank you!

ovidiusss wrote: ↑

Wed Mar 09, 2022 9:52 pm

Hi,

Because of the Google Core Web Vitals low LCP data, I need to find a way to do this:
All in header.twig file:
1. Only if it is a product page, for the product page, to get all the product's images and display in header.twig of my theme something like:
<link rel="preload" as="image" href="hero-image1.jpg">
<link rel="preload" as="image" href="hero-image2.jpg"> and so on

2. Only if it is a category page, for any given category, how can I get the first of all of the products' images url and display in the header.twig the same code:
<link rel="preload" as="image" href="hero-image1.jpg">
<link rel="preload" as="image" href="hero-image1.2pg">

By preloading images, at least the first that shows up on screen, especially on mobile view, this seems to improve the LCP score...

Can anyone help? Thank you!

URL or contact the extension theme developer to resolve this issue. Alternatively, you can also create a new service request in the Commercial Support section of the forum if the URL cannot be addressed nor posted.

Thank you for answering. I wanted to know if this is even possible in opencart and adapt it to my theme... I mean a general code to get what I needed... Couldn't find anywhere information about this and this is why I asked on this forum.

I found only this valuable information: https://addyosmani.com/blog/preload-hero-images/ and I am surprised nobody addressed this issue regarding opencart anywhere on the internet... This would really help opencart to load faster.

Thank you very much

ovidiusss wrote: ↑

Wed Mar 09, 2022 11:09 pm

I wanted to know if this is even possible in opencart and adapt it to my theme

Yes - most things are possible.
Are you a developer or are you hoping someone will do this for you.

Hi.

You can get a list of product images that are at the top of the page, in the product and category controllers, then save them to the registry ($this->registry->set('key', $value)). After that, in the site header controller, you need to get this list of images from the registry ($this->registry->has('key'), $this->registry->get('key')), store them in data and use them in header.twig.

To all other images of the category, I recommend adding <img src="..." loading="lazy">. I also recommend using http2.

Here I made an OCMod that will do that for you.
.

mikeinterserv wrote: ↑

Thu Mar 10, 2022 1:50 am

Here I made an OCMod that will do that for you.
.

Where?

Hi everybody and thank you all so much for your answers, I really appreciate it!

I am not a developer. If I were, I would have already solved the issue, but, unfortunately I am not. I know a bit of this and that but not enough to get this issue to the end.

I wanted to know if this is even possible, in the first place, and in order to do it I need, if possible, step by step instructions so that I wouldn't break my website.

I know everybody is busy and I am not asking anyone to do it for me, it was just a question I thought that perhaps somebody went through this issue before and could help me do it too. Unfortunately I can't disclose my website, for confidentiality contract reasons, but it runs on opencart 3.0.3.6 and on the Emarket Opencart theme from smartaddons.com

The theme itself is awesome but unfortunately the speed is not that great, mainly because it doesn't work if I async or defer the javascripts from the header or if I put them in the footer... So, I had to find other ways to improve the Core Web Vitals scores somehow and this image preload matter is one of them.

I really really thank you all for trying to help and I wish you all a good, productive day!

The obvious way to do that is via an event handler, e.g. for the triggers catalog/view/product/product/before and catalog/view/product/category/before. Within these event handlers you'd have to modify the $data['header'], to add all your <link rel="preload" as="image" href="....> tags.

Thank you so much for taking the time to answer to me but, unfortunately, I really don't know the exact steps to do what you say

Another thing I don't know, regarding the preload images from a category, is how to limit it to the first X number of products, the first that show up from the top to the bottom... If there are 200 products inside a category, is not ok to preload 200 images...

Thank you so much!

If you are not a developer, you should re-post on the commercial support section of this OpenCart forum, to find a professional developer who can do this as a paid job.

Thank you very much!

Best regards,

I don't know what happened to the MOD, maybe I didn't attach it :-)
Try this - It is for you to TEST your concept. If you think it works as required then It can be refined further.

A possible problem could be your theme. I do not know if your THEME has made any changes that will affect how the mod works or whether it will install. Try it and let me know.

It ONLY does the PRODUCTS PAGES currently - nothing else. As I say it is to TEST the concept.
Don't use on a live site. It throws notices on all pages except product.

In this XML, the preload and as attribute will look the same inside the for loop from view source ..

straightlight wrote: ↑

Thu Mar 10, 2022 10:57 pm

In this XML, the preload and as attribute will look the same inside the for loop from view source ..

No it doesn't - or I misunderstand what your saying

JNeuhoff wrote: ↑

Thu Mar 10, 2022 6:27 pm

The obvious way to do that is via an event handler, e.g. for the triggers catalog/view/product/product/before and catalog/view/product/category/before. Within these event handlers you'd have to modify the $data['header'], to add all your <link rel="preload" as="image" href="....> tags.

I agree and think this is the way to go. I never even looked at events before so I will do that now.
The other way is to create a copy header twig and php for the required pages but with OCMod you run into the not allowed to write to this directory for catalog/controller/common.

mikeinterserv wrote: ↑

Thu Mar 10, 2022 11:31 pm

straightlight wrote: ↑

Thu Mar 10, 2022 10:57 pm

In this XML, the preload and as attribute will look the same inside the for loop from view source ..

No it doesn't - or I misunderstand what your saying

Then, yes, you misunderstood the code you have already coded in there regarding the header.twig file from your XML file.

straightlight wrote: ↑

Fri Mar 11, 2022 12:37 am

mikeinterserv wrote: ↑

Thu Mar 10, 2022 11:31 pm

straightlight wrote: ↑

Thu Mar 10, 2022 10:57 pm

In this XML, the preload and as attribute will look the same inside the for loop from view source ..

No it doesn't - or I misunderstand what your saying

Then, yes, you misunderstood the code you have already coded in there regarding the header.twig file from your XML file.

I have no clue what you are on about.
To be honest its not a good MOD it just enables to TEST the concept on a product page ONLY - he can run his analyzer to see if it has the desired effect on his load times.

Hi,

Thank you very much mikeinterserv for helping me. I really really appreciate the fact that you wrote that code for me, in fact, it doesn't even matter if it works or not, for me it is important that you took from your time in order to help me, that is so nice of you and I am really grateful.

I will give it a try and see if it works.

Thank you all of you for answering and trying to help me! You are awesome and this makes me think that good people still exist!

Best regards to all of you!

Hi again,

I have just tested the ocmod, I didn't install it the normal way, I just hand edited every of the files: header.php and header.twig and IT WORKS PERFECTLY!

After this, on Desktop, from 80 pagespeed score it went to 94 so it really helps.

I know I may be asking too much, but can this be done in the category as well? Something like getting the first X (10 or 15) number of products that show up on the category page, from top to bottom, and get the product image as preload?

Thank you very much!