Theme loading weird file called "lazy.png"

Dear,

I notice that my waterfall chart in GTmetrix is loading a theme file called “lazy.png”

What is this? When I open it, the file seems empty.

Can you tell me what functionality of the theme is using this feature? And how to get rid of it?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

This is an image which does not relate to our theme. Find it in Media library and delete if you do not need it.

Best Regards

Hi,

Sorry but yes this file is related to the theme. If you check my attachments well, you will clearly see the path of the file : wp-content/themes/woodmart/images/lazy.png

So no you cannot say that this image is not related to the theme…

Thanks

Hello,

Perhaps I am mistaken. It means that this image could be uploaded as a demo, please delete it from the folder. All image destination is just to demonstrate.

Best Regards

Dear,

I tried deleting this image but then in GTmetrix waterfall, this image was still being requested as an HTTP call flagged as “failed”

so this file must be a leftover from a demo imported long time in the past, when I started using Woodmart but I can’t find where it is located. I searched everywhere and I can’t locate it.

I see the file loading in F12 Console > Network > lazy.png but can you help me find out where exactly on the page it’s located? I want to remove the call itself to the picture.

Also, I don’t know if it’s any relevant but I noticed in PSI on Desktop version that PSI assigns this lazy.png to all my product categories images of the mega menu. Can you help understand this?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

This image is a default placeholder when you use our Lazy Loading option. You can replace it in Theme Settings -> Performance -> Lazy loading.

Kind Regards

Hi Artem,

Alright so I understand that this lazy.png is the Woodmart’s default placeholder for the lazyloading. However, there are two problems here :

1) By definition, a placeholder should be able to “hold the place” (width and height) of the original image, so it should adapt accordingly. This is not the case here, and PSI considers this a problem (even though it’s not impacting “directly” the score) but it’s still an issue for PSI. How can your theme ensure that placeholers loaded when lazyloading adapts itself to the width and height => critical for ensuring low CLS

2) In the other post mentioned below, you kindly provided me a way to lazyload images included in mega menu when they are within the viewport. In GTmetrix and in real naviguation, I’m correctly seeing that images are lazyloaded. So if those images are not loadedon pageload and not visible on screen (because hidden in a mega menu), why do we need to assign a placeholder which cause the PSI width/height issue?

https://xtemos.com/forums/topic/lazyload-images-from-mega-menu-2/

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

1. Width and height attributes are not changed when you use lazy loading. You can check any image and see that it has the same size set even when our placeholder is shown https://prnt.sc/10v3fjy

2. Because you can’t display HTML <img> tag without src attribute. That is why our placeholder is used there. If you don’t want to display <img> at all, you can use our AJAX dropdowns functionality.

Kind Regards

Alright I’ve decided to use the AJAX alternative. However, I still have a question about that. When ajax loads, the dropdown ajax placeholder is fully white. I tried changing the color on the following css class but it seems it’s not correct. Can you help me know which css class to use for changing the background color of the ajax placeholder? Thanks

Attachments:

You must be logged in to view attached files.

No worries, found it!

.dropdown-html-placeholder {
	background-color: #ebebeb;
}

We are glad that you sorted it out. Let me know if you need anything else.

You can close this ticket, thanks

[Author]

Posts