Improve the Largest Contentful Paint (LCP) Image Metric - Shopify Speed Optimization

Ғылым және технология

This video shows how to improve the LCP metric for a Shopify store.
Fiverr gig: www.fiverr.com/s/6oRdeB
Donations: www.paypal.com/donate/?hosted...
Follow me on Twitter: / @johne104
KZread Channel: / @bluesphere7930
Email: bluesphere40@gmail.com
Timecodes
0:00 - Intro
0:53 - Reminder to Not Lazy-Load LCP Image
1:30 - Check DevTools Performance Tab
3:52 - Make LCP Load Faster
4:22 - Theme Code Edit
5:26 - Check Results in Performance Tab
5:54 - Fetch Priority
6:55 - Outro

Пікірлер: 9

  • @AFC1886_
    @AFC1886_15 күн бұрын

    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.

  • @iearthgirl
    @iearthgirl2 ай бұрын

    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?

  • @bluesphere7930

    @bluesphere7930

    2 ай бұрын

    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.

  • @sai3321
    @sai33213 ай бұрын

    its working fine in desktop, but in mobile its not working as expected. is there any solution for this?

  • @mrhammad3533
    @mrhammad35335 ай бұрын

    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...

  • @bluesphere7930

    @bluesphere7930

    5 ай бұрын

    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.

  • @mrhammad3533

    @mrhammad3533

    5 ай бұрын

    @@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?

  • @EverHappyPaws
    @EverHappyPawsАй бұрын

    I need my store speed up. Help me please?🙏🏻

  • @farukweb

    @farukweb

    5 күн бұрын

    contact me. can you show me your store please?

Келесі