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

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ต.ค. 2024

ความคิดเห็น • 15

  • @arnoldjuma5136
    @arnoldjuma5136 3 หลายเดือนก่อน +1

    Heyy John, the tutorial is really helpful, you should do more like these

  • @rsdingoa
    @rsdingoa 12 วันที่ผ่านมา +1

    Do you primarily do Shopify or WordPress as well??
    Amazing content mate

  • @ecom916
    @ecom916 4 หลายเดือนก่อน +1

    mate ur a legend thank u🙏

  • @AFC1886_
    @AFC1886_ 5 หลายเดือนก่อน +1

    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.

  • @魏东旭-w3i
    @魏东旭-w3i หลายเดือนก่อน +1

    really help me

  • @mrhammad3533
    @mrhammad3533 10 หลายเดือนก่อน +1

    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  10 หลายเดือนก่อน

      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 10 หลายเดือนก่อน

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

  • @sai3321
    @sai3321 8 หลายเดือนก่อน

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

  • @iearthgirl
    @iearthgirl 7 หลายเดือนก่อน

    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  7 หลายเดือนก่อน

      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.

  • @EverHappyPaws
    @EverHappyPaws 6 หลายเดือนก่อน +1

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

    • @farukweb
      @farukweb 5 หลายเดือนก่อน

      contact me. can you show me your store please?