Hi John, unfortunately I can only find the div tags in an index JSON file so it won't work :( I looked further and the tags are in dynamic-content that has all the sections on the JSON file, not sure how to grab them from there.
Thankyou for Amazing content but I am preloading LCP image but the LCP score is still high and the cause is render delay. From performance tab of dev tools, I can say image is pre loading correctly but still the LCP occurs 3 seconds later than loading. So, I think there are java files which block the image from rendering even if it's preloaded. Can you please share a solution for this...
Hi, check that your LCP is not lazy loading, if it is, remove the lazy loading for the LCP, but keep the lazy loading for all image below the fold. Also, try setting the fetchpriority on the LCP to high as shown in the video starting around the 5:55 mark. Hope that helps.
@@bluesphere7930 I have already. It pre loading with high fetch priority. LCP image file being loaded at 1 sec mark just after document in network tab but in timings tab the lcp occurs at 4 sec. So what will be the reason that if source is downloaded but still page has no paints. There is a rendering delay. Do you think it can be a java file which triggers painting and lcp depends on that and when it fires then browser start painting.? And how to check which jave is responsible for painting/rendering lcp this if it's so?
I have been trying to figure this out with the Expanse theme we are using. It’s a slide show for our hero image. Even though we don’t use it as such. I have found the Div for our hero image, but there isn’t any lazy loading in the coding for it. Any thoughts?
It's better that there isn't any lazy loading for the hero image. If there is no loading attribute at all in the hero image element, then that means that the browser will prioritize loading the image as soon as possible, which is what you want. However, it's best to explicitly communicate your intention to the browser by adding the loading attribute and setting it equal to "eager", as shown in the video.
Heyy John, the tutorial is really helpful, you should do more like these
Do you primarily do Shopify or WordPress as well??
Amazing content mate
Glad you liked it.
mate ur a legend thank u🙏
Happy to help.
Hi John, unfortunately I can only find the div tags in an index JSON file so it won't work :(
I looked further and the tags are in dynamic-content that has all the sections on the JSON file, not sure how to grab them from there.
really help me
Thankyou for Amazing content but I am preloading LCP image but the LCP score is still high and the cause is render delay. From performance tab of dev tools, I can say image is pre loading correctly but still the LCP occurs 3 seconds later than loading. So, I think there are java files which block the image from rendering even if it's preloaded. Can you please share a solution for this...
Hi, check that your LCP is not lazy loading, if it is, remove the lazy loading for the LCP, but keep the lazy loading for all image below the fold.
Also, try setting the fetchpriority on the LCP to high as shown in the video starting around the 5:55 mark.
Hope that helps.
@@bluesphere7930 I have already. It pre loading with high fetch priority. LCP image file being loaded at 1 sec mark just after document in network tab but in timings tab the lcp occurs at 4 sec. So what will be the reason that if source is downloaded but still page has no paints. There is a rendering delay. Do you think it can be a java file which triggers painting and lcp depends on that and when it fires then browser start painting.? And how to check which jave is responsible for painting/rendering lcp this if it's so?
its working fine in desktop, but in mobile its not working as expected. is there any solution for this?
I have been trying to figure this out with the Expanse theme we are using. It’s a slide show for our hero image. Even though we don’t use it as such. I have found the Div for our hero image, but there isn’t any lazy loading in the coding for it. Any thoughts?
It's better that there isn't any lazy loading for the hero image.
If there is no loading attribute at all in the hero image element, then that means that the browser will prioritize loading the image as soon as possible, which is what you want.
However, it's best to explicitly communicate your intention to the browser by adding the loading attribute and setting it equal to "eager", as shown in the video.
I need my store speed up. Help me please?🙏🏻
contact me. can you show me your store please?