Results 1 to 4 of 4
  1. #1
    Join Date
    Jan 2015
    Posts
    462
    Plugin Contributions
    0

    Default LCP issue with product image

    Zencart 1.5.8
    php 8.1.2

    Need someone opinion. My site runs well. But my LCP time from the product image is causing my site to run slow. They recommend adding a rel link preload. But the problem is the product images are dynamic so how could I preload.
    <link rel="preload" as”image” href="image/test.jpg" />

    I also tried setting a set timeout function on the JavaScript for the main product images but I get the same result.

    Does anyone have any recommendations?

  2. #2
    Join Date
    Feb 2009
    Location
    atlanta GA
    Posts
    282
    Plugin Contributions
    0

    Default Re: LCP issue with product image

    Legit got a warning in my core vitals about this in google search console on November 16. Not sure what to change and fix it.

    Its the same for even my newer installs with the current zencart and php.
    Zencart 1.5.6c PHP 7.2 Order Replacement AC Adapters and Power Cords Online www.missingcord.com

  3. #3
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,378
    Plugin Contributions
    11

    Default Re: LCP issue with product image

    @chadlly2003. Sorry I missed this post. With a link to your site (use yoursiteDOTcom if you don't won't the world rushing to your door just yet) we can give a better answer.. As with Jasonshnaks, image problems are often the problem when we over-accept responsiveness. "The template will resize the image for me" is a big killer if you block off an area and then present the browser with an image that is not the size of the area blocked off.

    Whether the browser has to "grow" the image or shrink it, having to do either takes time. With lots of images, tenths of a second soon become seconds and your site is slow.

    Testing the site properly can give you a lot of good information. I always use the chrome browser to test but, even then, you should test with the site open in an incognito window. That way, any extensions you have loaded will not effect the outcome.

    Open your site in a Chrome incognito window. Right-cliick somewhere in the site and select inspect. I use multiple monitors so it's easy for me to see. You may have to make the DevTools window full scree to see it but, there's a selection called Lighthouse. Click on it an run it for desktop. Fixing the errors pointed out by Lighthouse in Desktop will get you on the road to fixing the mobile problems. Once you've got Desktop handled, move on to the mobile test. This is where images really come into play. An image taken on one of today's mobile phones is going to be HUGE. Not only that, the DPI (dots per inch) is 300. Anything over 72 DPI is wasted in a browser.

    An image that is 500px x 500px might be a good choice for a product image. BUT, if the image is 300 dpi, we're talking in the area of THIRTEEN MEG of image. I don't care how fast your server or internet are, you may be twiddling your finges for a bit before you see that image especially on a mobile device as their connections speeds are normally one-fourth the speed most folks have at home.

    Take the same image and drop its DPI to 72? Now we're talking. The image is now just a little over 90KB. That's a greater than 90% savings in time and space!

    If your host provides you with cPanel, there is an option under the Files folder called Images. This function takes existing images on your site and allows you to create thumbnails, scale the image, and convert the image (i.e., jpg to png). Great tool when you've loaded "roadside billboard" images onto your site.

    @jasonshanks, If you do the same testing as above with the Chrome browser in incognito and clicking on Lighthouse, you'll find that your problem is with the slider.

    Not only are the images for the slider not the same size as the slider frame, some of the portions of the slider itself violate both SEO and accessibility.

    SEO, while touted by many, is normally back to 100 when mistakes in Performance and Accessibility are fixed.

    I think you would be best served using bootstrap as your template (Install it and clone it before using). Then, add the bootstrap slider. The bootstrap version (seen at test.topkayakerDOTcom while we still testing) is SEO ready and, with images preset to the right size and dpi, the main page of the kayak site scores all 100's in Lighthouse Desktop and Performance drops to 96, 100, 100, 100 on mobile devices. Still fully loaded at around two seconds. Your current site does at the bottom of the green at 90 and takes roughly three and one-half seconds to load. One could assume (I know) that fixing the slider and images would result in a nearly 50% in load speed.

    Right now, your SEO scores are 82/79 for Desktop/Mobile and an Accessibility score 79 for both. Either one can be costly.

    Fix the accessibility problems and the SEO will fall into place.

  4. #4
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,378
    Plugin Contributions
    11

    Default Re: LCP issue with product image

    @jasonshanks,

    Red and white are often used regardless of the difficulty in getting the correct contrast. You need a minimum of 7:1 and your headers, column headings, etc. that use #c42828 only provide a contrast of 5.7:1 This would suffice if these were h1 or h2 tags but, they need to be at least 7:1 for the size of the text. #b11515 will provide the proper contrast for you.

    Unfortunately, you have the color for Log In and other links that are hoverable set to change to #000000 when hovered over. It's often a simple solution to just reverse the standard colors when hovering but, you will need to work that out to where it suits your design.

    There's a great Color Analyser at https://github.com/ThePacielloGroup/CCAe

    HTH

 

 

Similar Threads

  1. v154 Issue with adding multiple product image
    By carlman in forum Setting Up Categories, Products, Attributes
    Replies: 4
    Last Post: 17 Mar 2016, 02:22 PM
  2. issue with enlarge image link
    By aravindk in forum Setting Up Categories, Products, Attributes
    Replies: 1
    Last Post: 14 Feb 2011, 09:25 AM
  3. issue with scrolling image gallery
    By customk1 in forum General Questions
    Replies: 5
    Last Post: 2 Aug 2010, 03:26 PM
  4. Image display issue for preview with image handler, please help
    By bengalliboy in forum All Other Contributions/Addons
    Replies: 1
    Last Post: 16 May 2010, 06:34 PM
  5. Image Management Issue: Need Gif Preview With JPG Larger Image
    By dontknowwhatimdoing in forum General Questions
    Replies: 11
    Last Post: 14 Aug 2008, 05:14 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR