Topic: How Async & Defer java script

Author

Posts

March 15, 2017 at 4:06 am #1407729

Participant

I have a little problem on my site (Eurosud Cataldi srl).
Google PageSpeed Insights tell me that I have to “Delete JavaScript and CSS that block the view in above-the-fold content”. But they are very much! How I can resolve this problem? Can I delete unnecessary things? What are they?

JAVASCRIPT

https://www.eurosudsrl.com/wp-content/cache/minify/df983.js
https://www.eurosudsrl.com/ext/r3/assets/js/ion.sound.min.js
https://www.eurosudsrl.com/ext/r3/assets/js/jquery.doubletap.js
https://www.eurosudsrl.com/…assets/js/jquery.themepunch.tools.min.js
https://www.eurosudsrl.com/…s/js/jquery.themepunch.revolution.min.js
https://www.eurosudsrl.com/…ate/framework/js/dist/site/x-head.min.js
https://www.eurosudsrl.com/…xt/c3/assets/dist/js/site/cs-head.min.js
https://www.eurosudsrl.com/…uery.themepunch.tools.min.js?rev=5.3.1.5
https://www.eurosudsrl.com/…themepunch.revolution.min.js?rev=5.3.1.5
https://www.eurosudsrl.com/ext/c1/includes/js/jquery.form.min.js
https://www.eurosudsrl.com/ext/c1/includes/js/scripts.js
https://www.eurosudsrl.com/…/js/jquery-blockui/jquery.blockUI.min.js
https://www.eurosudsrl.com/…w2/assets/js/frontend/woocommerce.min.js
https://www.eurosudsrl.com/…ate/framework/js/dist/site/x-body.min.js
https://www.eurosudsrl.com/…ate/framework/js/dist/site/x-icon.min.js
https://www.eurosudsrl.com/wp-content/cache/minify/69faf.js
https://www.eurosudsrl.com/…xt/c3/assets/dist/js/site/cs-body.min.js
https://www.eurosudsrl.com/ext/x6/js/site/nicescroll.js
https://www.eurosudsrl.com/ext/m2/js/main.js
https://www.eurosudsrl.com/wp-content/cache/minify/13d7d.js
https://www.eurosudsrl.com/wp-content/cache/minify/da060.js

CSS

https://www.eurosudsrl.com/ext/r3/assets/fonts/font-awesome.css
https://www.eurosudsrl.com/ext/r3/assets/fonts/et-icons.css
https://www.eurosudsrl.com/ext/r3/assets/fonts/et-line.css
https://www.eurosudsrl.com/ext/r3/assets/css/style.min.css
https://www.eurosudsrl.com/ext/r1/public/assets/css/settings.css
https://www.eurosudsrl.com/…3/assets/fonts/retinaicon-font/style.css
https://www.eurosudsrl.com/ext/y3/assets/css/font-awesome.min.css
https://www.eurosudsrl.com/…/framework/css/dist/site/stacks/icon.css
https://www.eurosudsrl.com/css/style.css
https://www.eurosudsrl.com/…ework/css/dist/site/woocommerce/icon.css
https://fonts.googleapis.com/…talic&subset=latin%2Clatin-ext&ver=4.6.4
https://www.eurosudsrl.com/ext/m2/css/style.css
https://fonts.googleapis.com/…amily=Open+Sans:800|Lato:400|Raleway:900

March 15, 2017 at 6:12 am #1407830

Thai

Moderator

Hi There,

Please add the following code under functions.php file locates in your child theme:

if (!(is_admin() )) {
	function defer_parsing_of_js ( $url ) {
		if ( FALSE === strpos( $url, '.js' ) ) return $url;
		if ( strpos( $url, 'jquery.js' ) ) return $url;
		if ( strpos( $url, 'x-head.min.js' ) ) return $url;
		return "$url' defer='defer";
	}
	add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Hope it helps 🙂

March 16, 2017 at 10:40 am #1409760

Eurosud Cataldi

Participant

Thanks a lot! Your code are very good.
I’ve make good result and now it only show this:

JAVASCRIPT

https://www.eurosudsrl.com/wp-content/cache/minify/df983.js
https://www.eurosudsrl.com/…ate/framework/js/dist/site/x-head.min.js
https://www.eurosudsrl.com/…uery.themepunch.tools.min.js?rev=5.3.1.5
https://www.eurosudsrl.com/…themepunch.revolution.min.js?rev=5.3.1.5
https://www.eurosudsrl.com/wp-content/cache/minify/69faf.js
https://www.eurosudsrl.com/wp-content/cache/minify/13d7d.js
https://www.eurosudsrl.com/wp-content/cache/minify/da060.js

CSS

https://www.eurosudsrl.com/ext/r3/assets/fonts/font-awesome.css
https://www.eurosudsrl.com/ext/r3/assets/fonts/et-icons.css
https://www.eurosudsrl.com/ext/r3/assets/fonts/et-line.css
https://www.eurosudsrl.com/ext/r3/assets/css/style.min.css
https://www.eurosudsrl.com/ext/r1/public/assets/css/settings.css
https://www.eurosudsrl.com/…3/assets/fonts/retinaicon-font/style.css
https://www.eurosudsrl.com/ext/y3/assets/css/font-awesome.min.css
https://www.eurosudsrl.com/…/framework/css/dist/site/stacks/icon.css
https://www.eurosudsrl.com/css/style.css
https://www.eurosudsrl.com/…ework/css/dist/site/woocommerce/icon.css
https://fonts.googleapis.com/…talic&subset=latin%2Clatin-ext&ver=4.6.4
https://www.eurosudsrl.com/ext/m2/css/style.css
https://fonts.googleapis.com/…amily=Open+Sans:800|Lato:400|Raleway:900

Can we make more? If not I haven’t problem. For me it’s all right.

Thanks again.

March 16, 2017 at 4:41 pm #1410192

Friech

Moderator

Hi There,

Nope, those resources needs to be load sooner than later. The Revolution Slider JS can be parse defer though under the slider’s Problem Handlings setting enabled Put JS Includes to the Body.

Thanks.

March 17, 2017 at 2:40 am #1410740

Eurosud Cataldi

Participant

For css can we do something? More of that are very small.
Can we make one for all? Or simply merge the CSS of same plugin?

March 17, 2017 at 3:31 pm #1411447

Rad

Moderator

This reply has been marked as private.

March 18, 2017 at 5:31 am #1412003

Eurosud Cataldi

Participant

Thanks a lot! I have to learn a lot with W3 total cache.

One very last question. What are the different between “CUSTOM CSS” in cornerstone, “edit global css” and “extra CSS” in customizer?

March 18, 2017 at 10:29 pm #1412470

Rad

Moderator

Hi there,

CSS added in customizer will be applied site wide regardless of page, while cornerstone’s CSS is only available on that current page.

Thanks!

March 20, 2017 at 4:14 am #1413377

Eurosud Cataldi

Participant

Thanks a lot! Very good!.
The “custom css” are situated directly in html page?

I’m try to remove a lot of content. Now are good. But I can’t install external google font. I’ve followed all the topics but are closed.

I’ve used this code in my style.css in child theme

@font-face {
    font-family: 'ubuntubold';
    src: url('https://www.eurosudsrl.com/wp-content/themes/x-child/font/ubuntu_700-webfont.woff2') format('woff2'),
         url('https://www.eurosudsrl.com/wp-content/themes/x-child/font/ubuntu_700-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ubunturegular';
    src: url('https://www.eurosudsrl.com/wp-content/themes/x-child/font/ubuntu_regular-webfont.woff2') format('woff2'),
         url('https://www.eurosudsrl.com/wp-content/themes/x-child/font/ubuntu_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

and in the same css i’ve add this

/* all links */
a {
font-family : 'ubunturegular';
}

.x-topbar {
font-family : 'ubuntubold';
}

.x-logobar {
font-family : 'ubuntubold' !important;
}

/* menu links */
.x-navbar ul li a{
font-family : 'ubuntubold';
}

/* logo */
.x-brand {
font-family : 'ubuntubold';
}

/* Main content */
.x-main {
font-family : 'ubunturegular';
}

/* Sidebar */
.x-sidebar {
font-family : 'ubunturegular';
}

/* Footer */
.x-colophon {
font-family : 'ubunturegular';
}

but not work. Any help?

EDIT: changed directory in (/www.eurosudsrl.com/wp-content/fonts) and now work.
But it still to load fonts by google’servers.
I’d want to load only my internal fonts for the entire site.
UBUNTUBOLD for all h1,h2,h3,h4, and UBUNTUREGULAR for the body and all other things.

March 20, 2017 at 4:08 pm #1414186

Friech

Moderator

Hi There,

Its loaded from your server.

Please clarify.

Thanks.

March 20, 2017 at 4:09 pm #1414192

Friech

Moderator

Hi There,

Its loaded from your server.

Please clarify.

Thanks.

March 21, 2017 at 2:34 am #1414645

Eurosud Cataldi

Participant

In google speed insight It tell me that load
https://fonts.googleapis.com/css?family=Ubuntu%3A400%2C400italic%2C700%2C700italic&subset=latin%2Clatin-ext&ver=4.6.4

But I don’t know were’s.

PS:

You can try the Autoptimize plugin https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option. It can minify and implement defer. Other optimization plugin can do it too, you may check their documentation.

Can I use Autoptimize with W3 total cache (inline & defer aren’t Free)?

PPS: google speed insight tell me that there’s a problem in amp pages (the result link)
https://search.google.com/search-console/amp?id=rpnO3OYGmuUl3iBViuzVSQ
I believe that the previous js defer code have caused that problem at line 22:
<script src="https://cdn.ampproject.org/v0.js' defer='defer" async></script>

How can I repair?

March 21, 2017 at 10:53 pm #1415792

Lely

Moderator

Hi There,

You can check this discussion:https://wordpress.org/support/topic/w3-total-cache-autoptimize/

You can also check the link for guidance:https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option

For AMP pages issue, please check this:https://docs.newrelic.com/docs/browser/new-relic-browser/troubleshooting/google-amp-validator-fails-due-3rd-party-script

Hope this helps.

March 22, 2017 at 3:24 am #1415929

Eurosud Cataldi

Participant

thanks for all solutions.
For amp pages https://docs.newrelic.com/docs/agents/php-agent/php-agent-api/newrelic_disable_autorum
I don’t understand how repair but I’ve made a different solution:

/*defer js*/
if (!(is_admin() )) {
	function defer_parsing_of_js ( $url ) {
		if ( FALSE === strpos( $url, '.js' ) ) return $url;
		if ( strpos( $url, 'jquery.js' ) ) return $url;
		if ( strpos( $url, 'x-head.min.js' ) ) return $url;
		if ( strpos( $url, 'v0.js' ) ) return $url;
		return "$url' defer='defer";
	}
	add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}
/*END defer js*/

I’ve simply added if ( strpos( $url, 'v0.js' ) ) return $url; at your code and work!

March 22, 2017 at 7:25 pm #1416944

Rad

Moderator

Hi there,

I see, thanks for sharing!

Cheers!

Author

Posts