Plugin doesnt seem to be lazy loading images

Some errors in console that seem to be related to a3 lazy load code:

file.jpg
Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID

/path/to/font.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

The errors seem to be triggered by these lines in my page source:

<link rel="preload" href="https://url.to/file.jpg" as="image" crossorigin><link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2"><link rel="preload" href="https://url.to/file.jpg" as="image" crossorigin><link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2">

Nvm those error were caused by my http2 push performance optimization plugins adding those preload lines to nonexistent files.

Not sure why the lazy load isn’t working, but for now I just switched to a separate plugin.

@sunnycmui

Yes correct – we are working on a new feature version 1.9.0 which will be released soon. Was only looking at your site this morning. The errors you report above are nothing to do with a3 lazy Load – my guess was that you where using some third party push for your sites assets and you confirm that in your reply http2 push performance. I think if you read the documentation for that you will see that your server needs to support CORS – that is why the fonts cannot load – they are being blocked by the server.

I ran a pingdom test that show you that there are 5 connection errors when your site loads
https://tools.pingdom.com/#!/dymKoE/https://destroythecomics.com/

What that test does show is that a lot of the images are being lazy loaded – but there are a number that are not – example

wp-content/uploads/2018/03/148-ougFRresultscover-248×138.jpg
wp-content/uploads/2018/03/blackpanther-248×138.jpg

I think if you look you will see that the theme or a plugin is adding those images by a custom function. a3 Lazy Lad cannot know what function that a developer writes to add images and hence cannot apply find the image to apply lazy load.

If you look at the pingdom test you will be able to identify what part of the page those images are and what is loading them there – an option from the theme or a plugin.

Once you have found that could you let me know please and then we can approach the developer about adding a small filter to their custom function to allow that to work.

Like this ticket we raised on a theme developer for a user this morning

Regards
Steve

Okay, just to confirm, the way you can tell if an image is lazy loaded or not is if the image shows as loaded in that pingdom test. So I’m assuming all those lines starting with data:image... are the lazy loaded image assets.

I looked into where those images are coming from and they are generated by the Content Views plugin.

• Their plugin homepage
• Their support page

I think I was thrown off because I just did a visual check that things were being lazy loaded. Every time I scrolled down the page, it seemed like all the images were already loaded.

@sunnycmui

Thank for the link to that plugin. The content that it creates on your site which is not being lazy Loaded is added by shortcode – not a function. We have downloaded that plugin and run some tests on a local.

From those test we have seen where we can tweak the lazy load filters to be able to apply to the content loaded by shortcode from that plugin. The tweaks should apply to if not all – them most content loaded by third party plugin do_shortcode functions.

We have made those tweaks and tested with that plugin and anything else we could get our hands on and it all seems fine.

Can you please upgrade Lazy Load to the latest version , then clear all caching. Then test again on Pingdom Tools

https://tools.pingdom.com/

The things to look for when you run the tests on Pingdom are

Look through the waterfall for image icons and when you put your mouse over the image you see the image URL -those images are not being lazy loaded – see screenshot of example of that

https://i.gyazo.com/4926d080c51d325b8992683cd60d6858.png

Please let me know how you go.

Regards
Steve

I updated and cleared all caches in between testing.

So what you’re saying is to find all the non-lazy loaded images on the Pingdom test results:

1. Find rows with image files
2. Check if the image URL is present when mousing over the file name

Does it matter if the waterfall chart only shows a Send and Wait phase but not a Receive phase?

—————
Pingdom Results
—————

I’m looking at all the Pingdom results and it seems like pretty much all the images have urls. Just to double check that it’s not just the theme loading content for the front page interfering, I also went to a blog post and it seems like all the images in the post also have their URLs showing. I know almost all of the images shouldn’t be loading since they wouldn’t be visible in the viewport on a long blog post.

Screenshots

Homepage results: https://snag.gy/xT9UYo.jpg
Blog post results: https://snag.gy/5elcjo.jpg

Pingdom Results URLs

Homepage: https://tools.pingdom.com/#!/ehELaP/https://destroythecomics.com/
Blog Post: https://tools.pingdom.com/#!/cMhr5j/https://destroythecomics.com/movies/a-black-panther-review-the-diaspora-black-history-and-power/

I also tried testing my page speeds with the a3 plugin deactivated in the plugins page, then reactivating it and checking pingdom. I don’t seem to get any different page scores and the page load times seem fairly identical. I’m not sure why.

Does that mean none of them are being lazy loaded?