Autoptimize Not working with Avada Theme

Ouch … Did avada get updated recently as well (as in around the same time as AO)? or did avada 3.8.3 work ok with AO 1.9.2 but not 1.9.4?

I can test tomorrow, but I only have an old copy of Avada (3.4.2), so that might not be entirely represenative.

frank

Yes, just today avada got another update.

Then there really is no use me testing against an old version. What you could do, is go back to AO 1.9.2 (you can download that here) an see to what extent that is the reason for the problems?

frank

I tried with AO 1.9.2 and the same problem. It most be the changes to the Avada Theme.

This is what support wrote to me about the changes (I don’t know if that helps):

“Continued Refactoring / CSS Class Name Changes

Part of our code refactoring involved our CSS. We have renamed CSS selectors and updated HTML structure for headers, footers, blog, portfolio and few other areas to follow consistent naming conventions. This was a necessity that allows us to optimise and organize our code and reduces conflicts with other plugins.
For the areas mentioned above, also the core template files have been adjusted to make them consistent and easier to maintain. If you changed template files, please keep that in mind.”

well, we’ve at least established this is not an AO-regression, so we can now revert to “classic” AO (re-)configuration and troubleshooting.

concerning the slider; most sliders require jquery (and sometimes the slider JS and some inline slider JS) to be excluded from JS optimization.

concerning the site being stripped of styles; is the page completely style-less or did you lose part of the look&feel? can you have a look at the source of the autoptimized CSS-files; do they give a 404 (not found) or are they empty or is there CSS in there but it’s broken?

frank

I excluded the following:

wp-includes/js/jquery/jquery.js
wp-includes/js/jquery/jquery-migrate.min.js

for optimization and still the slider did not work.

The style of the page is not completely stripped.

How do I look at the source of the autoptimized CSS-files?

jquery-migrate is most probably not needed, but isn’t there a slider-specific JS to exclude? also have a look at the HTML source, there could be slider-specific JS in there you’d want to exclude too.

regarding CSS: in most browsers (will, in FF at least) you can view source your HTML and then in there click on the link to your CSS-file to see that source.

(if you want, you can post your URL here and I can have a look, might be more efficient)

frank

regenesisonline.com, I’ll activate the plugin for you to see what I am seen.

can’t access the site; I just see a white page?

oops not good! All I did was activate the Autoptimize and enable all its settings. I’m using safari, but when I went to google chrome to check it out, is a white page.

Ah, but I see you’re also using W3TC minification? Combining minifiers can lead to (very) unexpected results. If you want to use/ test autoptimize, you’ll have to disable W3TC HTML, CSS & JS minification first.

frank

Hello,

I am also experiencing these problems of CSS not working right with the Avada 3.8 update. I know is not your job to make it compatible with every theme out there but I was wondering if anyone figured out a fix for it.

It works alright with CSS disabled and only JS enabled, but obviously the idea is to have it all working.

I believe in Avada 3.8 they are trying to minimize the code also with LESS CSS but that is an advanced feature in the theme and is disabled by default.

The theme has a W3TC comment at the footer for hooks purposes I believe.

Some of my sites are stuck in 3.7 until I can figure out a way to make it work, because Autoptimize is too awesome to ditch it for an update.

I have a site for testing purposes with the problem.

Frank, let me know if you would like to access the backend if you would like to take a look at it with the new version.

sure, I’ll have a look! you can provide me with the URL & credentials in a mail to futtta-at-gmail-dot-com.

frank

I sent you the email with the URL and credentials.

Thanks again for the help Frank.

OK, had a look and the problem was with the inline CSS; by default inline CSS takes precedence, but when AO aggregates that it loses that priority and (part of) it is not applied any more. The solution; excluding that big chunk of CSS from being aggregated (in this case by adding “.Avada_384{color:green;}” to the CSS-exclusion input form).

In the future (AO 2.0) there will be an option to enable/ disable the aggregation of inline CSS and JS (replacing the rather useless “look only in head”), so things will get simpler (and this will also help people with exploding caches due to page- or request-specific JS/CSS).

In the mean time you can also disable inline CSS or JS aggregation using the API (there’s two filters for that; autoptimize_js_include_inline and autoptimize_css_include_inline), there’s example code in autoptimize_helper.php_example.

have fun guys!
frank