Printable View
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?
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.
@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:P) 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.
@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