Tagged: javascript, jQuery
-
AuthorPosts
-
September 30, 2016 at 1:56 pm #693733
Hi there,
I am moving theme’s scripts to the footer or deferring them (to solve PageSpeed Insights above-the-fold problem). Both of these actions bring some issues: see this page. It’s top banner is a visual builder’s Color Section, javascript is used to output the headline (h1 inside of the “div class=”…avia-builder-el-no-sibling…”). I can see this class initiation in shortcodes.js…
So h1 becomes invisible (transparent?) when I defer (async) /wp-includes/js/jquery/jquery.js
How to make inscriptions visible while deferring or outputting jQuery library in the footer?
Regards.October 1, 2016 at 12:37 am #694092Hey,
I’d suggest skipping jQuery from your deferring script:
add_filter('clean_url','async_js',11); function async_js($url) { if ( false !== strpos( $url, 'jquery.js' ) || false === strpos( $url, '.js' )) { return $url; } return "$url' defer='defer"; }
Although it’s possible to make it work it’s a little bit too complicated and not something we can assist.
Best regards,
JosueOctober 1, 2016 at 11:18 am #694199Josue, when I put this code to functions.php, the site goes down.
I used thisif ( !is_admin() ) { remove_action('wp_head','wp_print_scripts'); remove_action('wp_head','wp_print_head_scripts',9); remove_action('wp_head','wp_enqueue_scripts',1); add_action('wp_footer','wp_print_scripts',5); add_action('wp_footer','wp_enqueue_scripts',5); add_action('wp_footer','wp_print_head_scripts',5); wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"), false, '1.12.4', true); wp_enqueue_script('jquery'); }
but somehow it makes .css go to footer as well. Then I just commented this chunk in functions.php (and set up new minimized .css in header.php)
//wp_register_style( 'avia-custom', $template_url."/css/custom.css", array(), '2', 'all' ); //wp_enqueue_style( 'avia-grid' , $template_url."/css/grid.css", array(), '2', 'all' ); //wp_enqueue_style( 'avia-base' , $template_url."/css/base.css", array(), '2', 'all' ); //wp_enqueue_style( 'avia-layout', $template_url."/css/layout.css", array(), '2', 'all' ); //wp_enqueue_style( 'avia-scs', $template_url."/css/shortcodes.css", array(), '2', 'all' ); //wp_enqueue_style( 'avia-popup-css', $template_url."/js/aviapopup/magnific-popup.css", array(), '1', 'screen' ); //wp_enqueue_style( 'avia-media' , $template_url."/js/mediaelement/skin-1/mediaelementplayer.css", array(), '1', 'screen' ); //wp_enqueue_style( 'avia-print' , $template_url."/css/print.css", array(), '1', 'print' );
…and it helped. Now I’ve got scripts in my >footer>, styles in my >head> and normal headers without js.
October 5, 2016 at 4:36 pm #695603Hi,
glad that it seems to work for you now. Let us know if you still need help with this or if we can close this thread.
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.