Forum Replies Created
-
Posts
-
“Delay JavaScript Execution” will likely become a common feature across the various caching plugins just like combining, minifying and deferring. The Enfold team should be working to insure compatibility.
One other thing I should point out to clarify, the animations work fine with all of the WP-Rocket minifying, combining and deferring options on, in fact they always have. It’s the new “Delay JavaScript Execution” that causes some problems with the Avia before|after animations, while the sliders are unaffected. Clearly this is something that can be fixed without excluding all of the Avia animations.
Hi Mike, I’m still tinkering with this. My pages have a combination of Enfold Icon, List Icon and Fullscreen Slider on a single page. When “Delay JavaScript Execution” is enabled the animations work with the exception of the icons, which appear to run in reverse.
I was able to modify this line but then none of the animations run until I mouse over the page. I added ([css]+)(.*)
(?:/wp-content/|/wp-includes/)(.*)([css]+)(.*)
“Delay JavaScript Execution” does improve the page speed, so fixing this is worth pursuing in coming updates. I haven’t tried your suggestion yet, but excluding almost all of the Avia JS elements seems to defeat the purpose, when only a few seem to be affect. So far it only seems to affect the (before|after) icon animations.
I want to follow up on this. The Icon animation don’t work when “Delay JavaScript Execution” is enabled in WP Rocket.
WP-rocket provides and option to “Exclude JavaScript Files” it says, “Specify URLs or keywords that can identify inline or JavaScript files to be excluded from delaying execution (one per line) and this it the default entry:
(?:/wp-content/|/wp-includes/)(.*)
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
js-(before|after)What would we have to exclude so that the Icon animations work? I think this is the CLASS that is affected:
avia-icon-list avia-icon-list-left av-iconlist-big avia_animate_when_almost_visible avia-iconlist-animate avia_start_animation
This is what I’ve come up with…
The conflict caused by CF7 v5.4 is two fold.
One, if your caching plugin is deferring JavaScript then it breaks CF7. If you have WP-Rocket they have issued a fix for the conflict. The WP-Rocket fix can be replicated in other caching plugins by excluding the deferral of this JavaScript script. Note, you can Minify Javascript but combing or deferring it will break CF7 and your layer sliders.
/wp-includes/js/dist/(.*).js
But even with this fix in WP-Rocket or another caching program, CF7 forms will fail after 24 hours due to the author’s use of nonces (security tokens). The only way to workaround the problem is to refresh your page cache every 24-hours or uncache the page.
Note, if you’re logged in as Admin you won’t notice there is a problem because logged in users automatically bypass caching. Always test the form in Private mode or in another browser.
I don’t consider this a solution, it just a workaround. Both fixes will degrade performance and hurt SEO, which is why I rolled back to the previous version 5.3.2.
It’s a JavaScript conflict caused by combining and deferring JavaScript. The best option is to rollback to the last version, until it’s fixed by the plugin’s author.
Any chance you’re using the newest version of “Contact Form 7” version v5.4? That plugin caused my WP Layerslider and Enfold Layerslider to disappear. If you’re using that plugin try disabling it to see if the slider reappears.
I’ve been on the WordPress CF7 support page talking about all of this for a week. The developer made significant changes that broke the form for almost everyone. Caching javascript and nonces are causing forms to fail. I think almost 100% of the users were impacted.
According to this post by the Autoptimize author, you need to add wp-includes/js/dist and possibly wp-includes/js to the excluded js list.
Are those files specific to CF7? They look like general JavaScript files.
I had a problem with the MailChimp shortcode too. I had to go into my MailChip account and resave the form (toggle all of the visibility buttons for each field), then go to the Enfold panel and resave it, then delete the shortcode of the form page and then put it back again and save.
RESOLVED?
I believe I’ve now identified the issue. Caching CF7 JavaScript can break the functionality of the form, animations and other things site wide. I’m using Enfold v5.8 and CF7 5.4 and WP-Rocket v3.8.5. – all the latest versions.
In WP-Rocket under FILE OPTIMIZATIONS I had to disable the following options:
1. Combine JavaScript files
2. Load JavaScript deferredI assume similar settings in other caching programs will resolve the issue.
I can exclude CF7 files from being combined or deferred but I don’t know which files those are. Could anyone tell me what CF7 JavaSCript files to exclude?
NOTE: In a CF7 forum I read about the forms breaking after so many hours due to “nonce” issues. I will have to followup on that.
I spoke too soon. Disabling WP-Rocket the option “Combine JavaScript files” fixed my sliders but the form is now broken. Disabling WP-Rocket entirely fixes the forms but that’s obviously not a solution. CF7 clearly has an issue with being cached. Now I’ll need to figure out how to exclude it from the cache in way that doesn’t kill performance.
I’ve discovered the issue in my case. WP-Rocket breaks the website when the option “Combine JavaScript files” is enabled. Considering how many different caching programs and themes there are, this may explain why CF7 is breaking so many different things. Clearly a JS conflict issue.
Offhand does any know which CF7 JS files to exclude from combining?
I updated to Enfold v4.8 with no issues. Then I updated CF7 and it again breaks all of my Enfold Sliders and the WP Layerslider on every page across the entire website with no exceptions.
I have already updated and rolled back several times, maybe a half-dozen times. When I update to CF7 to version 5.4 it breaks my website animations and sliders. When I rollback to CF7 version 5.3.2 everything works fine. I think it’s a JS issue. It seems to affect both the Enfold layerslider and the WP Layerslider. It must be some kind of conflict. My forms still work which is odd when others have reported their forms don’t work. I can only assume a conflict which seems to affect multiple themes and functions.
The CF7 plug-in breaks my Enfold slider and WP LayerSlider too. Seems like some kind of JS conflict.
For anyone else reading this the “font-family” will be the name of the font .zip file you upload NOT the actual name of the FONT.
Google Font: karla
Zip uploaded: “karla.zip”
font-family: karla
In LayerSlider for the Font setting in each layer you just use “karla”OR
Zip uploaded: “karla-whatever-its-called.zip”
font-family: karla-whatever-its-called
In LayerSlider for the Font setting in each later you just use “karla-whatever-its-called”This is better than using the font-family in CSS because you can switch back to calling the font from Google at anytime without changing anything in LayerSlider.
Ok, I seemed to figure this out. Just a not to anyone who transfers or restores your Enfold website.
The problem was with the website database encoding. Not sure how the problem cropped up. Maybe from the CPanel reset or after I transferred to a new hosting provider. In any case it completely broke my website. Here’s what I did…
1. Upload you public HTML folder.
2. Edit you WP_Config file (see below) BEFORE uploading your DB file.
3. Upload DB with matchingDB name / DB users account that is in your WP_Config file.That’s it. don’t ask me how this happened. I’m using the latest WP, ENFOLD, PLUGINS 100% updated and PHP 7.4..9.
Just do the procedure over again if you need to revert to UTF-8.
* Please note, I posted this to help the community. I see way to many inquiries about problems that get solved but then the “solution” is never posted. I have been trying to resolve this for a week before I came to the Enfold forum for help, so I did my homework before asking for help.
/** Database Charset to use in creating database tables. */ //define('DB_CHARSET', 'utf8'); /** The Database Collate type. Don't change this if in doubt. */ //define('DB_COLLATE', '');It seems that the Google Lighthouse adjustments just happened to coincide with your latest update. False alarm.
Thanks for the response.
When someone sees a 40-50 point drop on PageSpeed is it wrong to ask a question or to inquire about a potential problem? Real world speed is the most important but on the other hand Google keeps a tight grip on how it rates for SEO. No impressions, no traffic. Tell me I’m wrong.
I’m still evaluating what is happening but it appears that Google has made some adjustments to Lighthouse. I’m seeing very different reports in the results now, like pre-load. Obviously someone else saw this PageSpeed issue before me. Eventually other people will notice and inquire about a potential Enfold performance issue. Maybe I just saved you some time and effort.
Either way, thanks for the response. This is an awesome theme.
fixed: ADA compliance aria-hidden for social icons and social share buttons
Did you forget to update the MOBILE Hamburger menu. Google reports it as not being ADA (Accessibility) compliant “Links do not have a discernible name”.
a <a href="#"> <span class="av-hamburger av-hamburger--spin av-js-hamburger"> <span class="av-hamburger-box"> <span class="av-hamburger-inner"></span> <strong>Menu</strong> </span> </span> </a>*** If you’ve updated to v4.7.3 check your mobile score on Google PageSpeed Insights ***
Hi,
I’m having the same problem with the mobile speed. I’m seeing a 40-50 MOBLIE point drop on google PageSpeed. After rolling the installation back several times I’ve narrowed it down to the Enfold v4.7.3 update. No amount of cache clearing makes any difference but it’s always fixed when I roll back to v4.7.2 all else being EXACTLY the same. The desktop is also slightly slower.
Update: The page taking the biggest hit is my homepage which is the only page that has LayerSlider WP. I’m still testing other pages that use different features. Note: My website and CDN is re-caching at the moment but under normal circumstances that only drops the PageSpeed score maybe 10 points or temporary timeouts in PageSpeed until the process is complete. I have a fairly robust VPS with far more resources than I need; I usually consume 5% of my resources during a cache rebuild and nothing is running on the VPS other than one WP installation.
2nd Update: I manually updated Enfold via FTP. Check for errors in the CPanel log and the WP logs, nothing. Checked phpAdmin not seeing anything abnormal so far.
Thanks for the tip! I’ve made the changes.
The Hamburger Menu has a lot of classes and elements. Is this code applied to the correct class and element?
#top .av-burger-menu-main a:before { content: "Menu"; visability: hidden; front-size: 0px } #top .av-burger-menu-main a:after { content: "Menu"; visability: hidden; front-size: 0px }Ok!
One last question the same topic.
I tried using this CSS code to add the “content:” value to the burger menu but it did not seem to work. Is my class wrong or did I miss something?
#top .av-burger-menu-main a:before { content: "Menu"; display: none; } #top .av-burger-menu-main a:after { content: "Menu"; display: none; }Hi,
Do I add it in the ‘functions.php’ file with the function enclosed in php tags like this? <?php FUNCTION HERE ?>
<?php function custom_aria_label(){ ?> <script> (function($){ $(document).ready(function(){ $('.av-burger-menu-main a').attr("aria-label","Menu"); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_aria_label'); ?>
