LiteSpeed cache does not lazy-load image from srcset in above-fold swiper slider

  • Resolved Nazrinn

    (@nazrinn)


    2 years, 2 months ago

    This is pretty distressing because it impacts my mobile users specifically.

    The image code for the slider image was handwritten by me in PHP. Here is an example:

    <img data-lazyloaded="1" src="https://ml275xldtxd5.i.optimole.com/cb:kOd-.2762d/w:auto/h:auto/q:85/f:avif/id:223019019907216071f7e9371ce7e7c3/https://barbandcarole.ca/signal-2022-10-14-110446_002.jpeg" width="1920" height="877" decoding="async" id="slider-picture-generalities-1" data-property-section="generalities" srcset=" w,
https://ml275xldtxd5.i.optimole.com/cb:kOd-.2762d/w:300/h:225/q:85/f:avif/id:223019019907216071f7e9371ce7e7c3/https://barbandcarole.ca/signal-2022-10-14-110446_002.jpeg 300w,
https://ml275xldtxd5.i.optimole.com/cb:kOd-.2762d/w:768/h:576/q:85/f:avif/id:223019019907216071f7e9371ce7e7c3/https://barbandcarole.ca/signal-2022-10-14-110446_002.jpeg 768w,
https://ml275xldtxd5.i.optimole.com/cb:kOd-.2762d/w:1024/h:768/q:85/f:avif/id:223019019907216071f7e9371ce7e7c3/https://barbandcarole.ca/signal-2022-10-14-110446_002.jpeg 1024w,
https://ml275xldtxd5.i.optimole.com/cb:kOd-.2762d/w:auto/h:auto/q:85/f:avif/id:223019019907216071f7e9371ce7e7c3/https://barbandcarole.ca/signal-2022-10-14-110446_002.jpeg 1170w" sizes="(max-width: 768px) 100vw, 768px" data-src="https://ml275xldtxd5.i.optimole.com/cb:kOd-.2762d/w:auto/h:auto/q:85/f:avif/id:223019019907216071f7e9371ce7e7c3/https://barbandcarole.ca/signal-2022-10-14-110446_002.jpeg" data-ll-status="loaded" class="entered litespeed-loaded">

    To reproduce the bug, create a Swiper Slider with images containing srcset and size attributes and run a Google LiteSpeed test while VPI settings are on.

    Anything I can do to fix this? Thanks!

    Report number: PJQAWJWW

    • This topic was modified 2 years, 2 months ago by Nazrinn.
    • This topic was modified 2 years, 2 months ago by Nazrinn.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • If you are able to write your own code, better use loading=”lazy” in img tag. This attribute doesn’t need Javascript and is embedded in most browsers instead of data-lazyloaded=”1″

    https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

    https://www.w3schools.com/tags/att_img_loading.asp

    Plugin Support qtwrk

    (@qtwrk)

    please try remove data-lazyloaded="1"

    Thread Starter Nazrinn

    (@nazrinn)

    Hey there,

    I did as suggested. Seems like it solved the issue. Here is the code I wrote:

    $picture_browser_lazyload = 'loading="lazy" data-no-lazy="1"';
$picture_html = '
    	id="slider-picture-'.$id_html.'-'.$picture_id.'" 
	data-property-section="'.$id_html.'" 
	'.$picture_browser_lazyload.'
	srcset="'.$picture['sizes']['thumbnail'].'                            
    	'.$picture['sizes']['thumbnail-width'].'w,
	'.$picture['sizes']['medium'].'
    	'.$picture['sizes']['medium-width'].'w,						
    	'.$picture['sizes']['medium_large'].' 
    	'.$picture['sizes']['medium_large-width'].'w,
    	'.$picture['sizes']['large'].' 
    	'.$picture['sizes']['large-width'].'w,			
    	<span style="font-family: inherit; font-size: inherit;">'.$picture['url'].' 1170w"</span>
    	sizes="(max-width: 768px) 98vw, 768px" 
	src="'.$picture['url'].'" 
	width="1170">';

    I hope LiteSpeed can make slider lazy loading native still. This method doesn’t work on mobile Safari for quite a lot of people.

    • This reply was modified 2 years, 2 months ago by Nazrinn.
    • This reply was modified 2 years, 2 months ago by Nazrinn.

    FYI: Native support for loading=”lazy” is limited.

    https://caniuse.com/?search=loading%3Dlazy

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘LiteSpeed cache does not lazy-load image from srcset in above-fold swiper slider’ is closed to new replies.