Defer parsing of JavaScript

Hey there,
As you can see from the image below, I have a low score on “Defer parsing of JavaScript.” Well that’s an over-exaggeration. It’s zero. Lol.

I’d love some help on how to get this score up, as it’s rated as high priority.

While you’re at it, if you know how I can better “Inline small CSS,” “Leverage browser caching,” and “Inline small JavaScript,” I’d be super appreciative to gain some know-how on how I can correct wherever I went wrong before! I’ve tried Googling this kind of stuff but I’m not sure how these might have X-specific fixes. So I figured I’d go to the best and ask for your help!

I’m a HUGE X theme fan. I’m about to purchase two more licenses :stuck_out_tongue_closed_eyes:
Thanks for being so awesome you guys!!

Hello @LTWWordpress,

Thanks for writing in!

Please refer our performance optimization guide to optimize your website that will help you to score on GTmetrix:

Thanks.

That’s not really what I asked about and half doesn’t apply to our site since it’s on a Wordpress optimized hosting plan that comes with caching.

Thanks for getting back with me though. I was just looking for something more specific.

Hi there,

But you still need to use cache plugins that offer minification with the option for defer parsing. You may try the Autoptimize plugin, https://wordpress.org/plugins/autoptimize/ (please check the description or their documentation). Or any plugins that will help you achieve your Pagespeed’s preferred result.

Thanks!

Thank you so much! That actually helped a lot. :grinning:

Great! You’re welcome :slight_smile:

Hi!

I have the same problem, but Autoptimaze doesn’t work for me. If i turn “javascript minimaze” on, all the javascript functions stop - blog page became blank, accordion, menu doesn’t open etc.

(it was the same result with ‘APH merge scripts’ and ‘wp fastest cahe’, w3 etc)

The 2 site:

and https://www.drvargazsombor-plasztika.hu/

Please help! Thank you!
barb

Hi Barb,

No need to minify xtheme and x extensions js code as they are are already minified.

Doing it twice will cause a lot of issues like you have experience.

Thanks

Hi Paul!

On every page test (page insight, pingdom, gtmetrix) it was one of the most important problem about the site.
https://gtmetrix.com/reports/maglod-falvi.hu/xMdYjW8F

I know that the page speed is a komplex problem, I read this site too

Is there any possibility the do something? perhaps minimaze only the javascripts not from X (I have the subtitle shown with js too)

Not only defer parsing of js, but too many external js was a problem too.
(This page has 36 external Javascript scripts. Try combining them into one. This page has 5 external stylesheets. Try combining them into one.)

Can you help me to solve this?

Thank you so much,
Barbara

Hi there,

You can’t control the external javascript, that’s where the limit where some analysis tools fail to recognize. It’s either ignore them or don’t use them at all (the plugins or embed codes that use external scripts).

Unless, you can hire developers that can duplicate those scripts and host on your site, but it’s like redoing what’s already been there and will be a lot of work.

Thanks!

I’m having the same issue of Pingom, GTmetrix and Google PageSpeed all telling me I need to Defer parsing of JavaScript.

I’ve installed Autopitmize, am running CloudFlare and a caching application on my server (SiteGround). They only way I can clear the reports from the optimization sites it to install the plugin “WP deferred javaScript” https://wordpress.org/plugins/wp-deferred-javascripts/

However, when I activate it, I’m no longer able to launch X from the dashboard.

Hi there,

That’s because any optimization could kill scripts, deferring javascript will affect the load order of the scripts. Which of course affect dependencies like libraries, some scripts are loaded first before the needed library. And it fails, hence, too much optimization is overkill too.

What javascripts are needed to be deferred?

Thanks.

1 Like

@Rad ad I used WP Rocket in order to defer all js except one

https://www.tucasasegura.co/wp-content/cache/busting/1/wp-includes-js-jquery-jquery-1.12.4.js

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.tucasasegura.co&tab=mobile

any ideas to defer this one manually?

Please contact WP Rocket support to learn how to deal with that file moreover it’s part of the WordPress core and not X. Any optimization questions should be directed to the optimization plugin developer or a third party developer. This is because this is beyond the function of the theme and even the bundled plugins.

Thanks.

@christian_y yes I know that is related with WP Rocket, but I´m asking for a manual solution to defer a single js from your theme so is a theme pro modification not WP Rocket´s

Hi there,

You said that you applied or defer all JS except one https://www.tucasasegura.co/wp-content/cache/busting/1/wp-includes-js-jquery-jquery-1.12.4.js. It’s not from our theme, it’s from Wordpress core.

But I think I know why WP Rocket excluded it, it’s because it’s a core library. Deferring any javascript will affect the loading order of the scripts, sometimes, the dependencies or libraries are loaded late than the script requiring it, hence, all scripts fail. That’s the same reason why other plugins such as W3 Total Cache causes issues when the setting is overkill. You must contact WP Rocket about that too, I maybe wrong.

Thanks!

1 Like

ok thank you

You’re welcome.

Hi. I am using Auto Optimize with my pro theme and am having the same type of issues listed in this article as I have many js scripts listed that need the defer js capability of Auto Optimize - which does a great job on deferring theses many files.

I have tried excluding the following xtheme js files and attached a screenshot of my Auto Optimize settings where I add the following xheme js files attributed to xtheme (all that were identified by GTMetrix).


Also, I do have the following js added to the customizer - custom js for tab navigation - that does not function when having Auto Optimize js activated with the xtheme js file exclusions added (listed above)

jQuery(document).ready(function($){

setTimeout(function(){

var tab_id = parseInt( window.location.hash.split(’#tab-’)[1] );
if ( tab_id > 0 ) {

$(’.x-nav.x-nav-tabs .x-nav-tabs-item:nth-child(’ + tab_id + ‘) a’).trigger(‘click’);
setTimeout( function() {

$(‘html,body’).stop().animate({ scrollTop: $(’.x-tab-content > .x-tab-pane:nth-child(’ + tab_id + ‘)’).offset().top - ( $(’#my-navbar’).height() + 45 ) },700 ,‘swing’);

}, 300 );

}
},500);
} );

Not sure where xtheme stores the customizer adds like this or how I would add them to the Auto Optimizer js exclusion list?

Are there any other xtheme js files that I should add to the Auto Optimize exclusion list?

Thanks

Hi there,

May I know what issues you’re getting when you enable the defer/optimization feature? There is a chance the issue on your site is the load order of the scripts. Even if you exclude them correctly and it’s loaded with the optimized javascript then it will not work.

The theme and cornerstone js files are located at \x\framework\js\dist, \cornerstone\assets\dist\js, \cornerstone\assets\dist-app\js (you must check the sub-folders to find all the scripts). And you may exclude them :slight_smile:

Thanks!