Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I use Lighthouse to check my website and it said some images are not lazy load, so I check the HTML source code and found that every first image of “SiteOrigin Image Grid” Widget does not use
loading="lazy".
I tried to fresh install new WP with SiteOrigin, the problem still there. Here is the testing page. You can see those 3 images are below the fold, so they should be lazy load. May I know if this is a bug of “SiteOrigin Image Grid”?
Below are the related codes
<div class="sow-image-grid-image"> <img width="680" height="340" src="http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/leaves-6975462__340.webp" class="sow-image-grid-image_html" alt="" decoding="async" title="" srcset="http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/leaves-6975462__340.webp 680w, http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/leaves-6975462__340-300x150.webp 300w" sizes="(max-width: 680px) 100vw, 680px" style="width:100%;height:50%;max-width:680px;" /> </div> <div class="sow-image-grid-image"> <img width="510" height="340" src="http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/blood-test-5601437__340.jpg" class="sow-image-grid-image_html" alt="" decoding="async" loading="lazy" title="" srcset="http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/blood-test-5601437__340.jpg 510w, http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/blood-test-5601437__340-300x200.jpg 300w, http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/blood-test-5601437__340-272x182.jpg 272w" sizes="(max-width: 510px) 100vw, 510px" style="width:100%;height:66.67%;max-width:510px;" /> </div> <div class="sow-image-grid-image"> <img width="510" height="340" src="http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/surface-4373559__340.jpg" class="sow-image-grid-image_html" alt="" decoding="async" loading="lazy" title="" srcset="http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/surface-4373559__340.jpg 510w, http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/surface-4373559__340-300x200.jpg 300w, http://wp.vo-plesk.demo360.net/wp-content/uploads/2023/03/surface-4373559__340-272x182.jpg 272w" sizes="(max-width: 510px) 100vw, 510px" style="width:100%;height:66.67%;max-width:510px;" /> </div>
Hi, thanks for getting in touch.
If you have a moment, please, head over to https://github.com/siteorigin/so-widgets-bundle/pull/1492. Alex explains the reasoning behind the setup. To find out more about the filter Alex mentions in the pull request, please, see https://siteorigin.com/widgets-bundle/image-widget-documentation/#heading-advanced-customizations.
Thank you Andrew :)
My pleasure. Hopefully, you’ve been making progress :)