No Images

First and foremost try to identify what is breaking things by just disabling CSS or JS or HTML or Image optimization (incl. lazyload). Based on that we can see what the next steps need to be ??

frank

Hi Frank,

Thanks for replying.

I reactivated your plugin, and turned all options off except ‘Optimize JavaScript Code‘ This still causes the images to not load.

There is a sub-option “Aggregate all linked JS-files to have them loaded non-render blocking?” If I toggle this option ON/OFF then the images Don’t Load/ Do Load accordingly.

Aggregate On – Images Don’t Load

Aggregate Off – Images Load

OK so if “Optimize JavaScript Code” is ON and “Aggregate all linked JS-files to have them loaded non-render blocking? is OFF then the images load successfully, but the problem is the site’s performance drops down to 29 according to https://pagespeed.web.dev/

Thanks.

OK, so it looks like you have something (theme or plugin) that lazyloads your images which uses javascript and that breaks when optimizing. Do you know what is doing so and can you try adding that to the JS opt. exclusion list (e.g. wp-content/theme/whatever or wp-content/plugins/laziestload ) ?

Frank

Thanks again, its appreciated.

OK that seems to be a partial solution.

You correctly anticipated that my theme “Avada” was lazy loading images. I’ve turned this option off.

Avada – Image Lazy Loading

I say a partial solution because although Avada Lazy Loading is OFF if I turn your Aggregate option to ON, all the images on the site load except for the images inside LayerSlider.

Layerslider has some Lazy Load Options. All of them seem to be turned off, Do you happen to know if your plugin is able to optimise LayerSlider?

LayerSlider > Performance Mode

LayerSlider > Enhanced Lazy Load

I dont see any obvious options within LayerSlider to turn ON/OFF.

If LayerSlider is the issue then I am happy to drop it and use another Slider instead as I value your plugin more.

Thanks again.

• This reply was modified 1 year, 6 months ago by LordLiverpool.

OK, can you try excluding layerslider from JS optimization?

I’m not sure if I’ve done this correctly. LayerSlider seems to have three JS scripts:

,wp-content/plugins/LayerSlider/assets/static/layerslider/js/layerslider.kreaturamedia.jquery.js
,wp-content/plugins/LayerSlider/assets/static/layerslider/js/layerslider.transitions.js
,wp-content/plugins/LayerSlider/assets/static/layerslider/js/layerslider.utils.js

I added them to your “Exclude scripts from Autoptimize” option

See Here:

LayerSlider > JS Files

The upshot is with this option enables LayerSlider doesn’t load its images.

Thanks.

can you try switching to “don’t aggregate but defer” + “also defer inline JS”?

Morning Frank

OK, these are my current settings, I think this is what you wanted. But I’m not sure if I’m still meant to exclude those LayerSlider JS scripts or not?
They were absent from the form today. browser cache? or not persisted in the database? I don’t know?!? But let me know and I will quickly change them to the way you want:

Autoptimize > JS Options

I tried deleting LayerSlider from the homepage to see if it effected performance. Strangely the site was slower with LayerSlider removed.

#1 LayerSlider with the new JS options:

LayerSlider + New JS Settings

#2 LayerSlider deleted from the site:

LayerSlider Deleted from Website

#3 Layerslider reinstated:

LayerSlider Reinstated.

Is LayerSlider a false positive? And the problem actually lies elsewhere???

Thanks.

well, first of all; does everything -including layerslider- work with these settings?

OK, just to be clear, as I know from experience that “the thread” is easily lost on support forums, here are my current Autoptimize settings:

Current Settings

To answer your question, yes the website works just fine, LayerSlider and all.

However the performance score is still low at 32. See Opportunities here:

Opportunities

Can any of these issues be resolved using your plugin?

Thanks very much.

well, I would have a look at the “images” tab; lazyloading & image optimization (through Shortpixel, free tier but paying after that) can help with some of the most important ones yes ??

re. render-blocking CSS; for that have a look at the “eliminate render-blocking CSS” option, but do take into account you’ll have to either;

a) generate & copy/paste the “above the fold CSS” in the field below (more info in the AO FAQ, look for “inline & defer CSS”) OR
b) create manual rules on the “critical CSS” tab (generating critical css for each rule) OR
c) take a subscription over at criticalcss and paste your API in the field on the critical CSS tab

hope this helps,
frank

Cheers, Frank,

I appreciate the help!

I will investigate all those options you’ve listed.

Thanks very much ??