Lazy loading images & WebP Express

  • Resolved ecronik

    (@ecronik)


    2 years, 4 months ago

    Hi there,

    and thanks for this wonderful plugin! I’ve stumbled across an issue with lazy loading in conjunction with using WebP Express:

    When I use the “from nth image” option and skip the first 5 to not have the featured image on top lazy loaded, it doesn’t show the .webp version anymore. If I reduce it to 4, or 1, it shows again. The source code around the featured still shows the .webp code, but I can’t figure out what’s wrong here. Unfortunately, I can’t work with excluding classes, etc. to prevent this (doesn’t work with my theme as the extra class is applied to a parent div rather than the image itself).

    Oddly, when browsing the site logged in (at least as an admin), it shows the .webp versions. Using the incognito mode or another browser without logging in, it only shows .jpg versions. This worked when I was still using W3TC for lazy loading though (disabled now).

    Thanks for your help and best regards,
    eC

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    can you try if this code-snippet helps?

    
add_filter( 'autoptimize_filter_imgopt_dopicture', '__return_false' );
    Thread Starter ecronik

    (@ecronik)

    That fixed it, thanks a bunch!! ??

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    so the above the fold images don’t lazyload and are webp and the below the fold images now lazyload as webp?

    Thread Starter ecronik

    (@ecronik)

    The first 5 don’t lazy load now, as I didn’t have another working option I know of to address the lazy-load-exclusion of the featured image. The logo is still showing as .png, but that’s on purpose.

    The other used images in the article lazy load as .webp, and the dynamically loaded images of other articles that are displayed lazy load too but are not .webp, as I didn’t find a way to accomplish that (but that’s probably because of how the images are set with the theme and/or how WebP Express works/is configured).

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    not entirely sure I understand (friday, tired brain); does this mean all is well with the current setup (webp express + ao lazyload + filter to disable <picturelazyload? )

    Thread Starter ecronik

    (@ecronik)

    Yep, seems to be working fine now. ??

    Thanks!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome, feel free to leave a review of the plugin and support here! ??

    have a nice day!
    frank

    Thread Starter ecronik

    (@ecronik)

    Sure thing, wrote a short review. ??

    One additional question popped up: I need to exclude a js file for my front end (as ajax-loading stuff otherwise won’t work anymore after a while – “js_files_for_front.min.js”).

    In conjunction with Rocket Loader (CF), would you recommend to defer or aggregate JS? In my case, it’s then a difference between having three or two local JS files loaded.

    Thanks again,
    eC

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    the “won’t work any more after a while” hints at a nonce mismatch, which typically is caused by page caching actually eC, review your page caching settings, taking typical WordPress nonce timeouts into account?

    Thread Starter ecronik

    (@ecronik)

    I’ve never heard of this before, and it seems a bit too complex for the time I have to make technical tweaks to the site.

    But since excluding the JS file via AO fixes the problem (I haven’t changed anything related to W3TC page caching, and it’s still in place), I think it’s not the cause of this issue.

    Do you maybe have another idea? Also in general: Would you recommend reducing the amount of JS files, so aggregating or deferring? What’s faster in a setup with CF Rocket Loader?

    Thanks,
    eC

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    changing AO’s settings and clicking on “save changes and clear cache” will normally also clear W3TC’s cache, so I still think it is very likely a nonce caching issue (i.e. W3TC) ??

    re. JS opt. settings; typically I advice “don’t aggregate but defer” + “also defer inline JS”, but I’m not sure if/ how rocketloader changes that as typically rocketloader also aims to defer JS.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Lazy loading images & WebP Express’ is closed to new replies.