I have various javascripts that are necessary plugins in one of my WordPress domains, and I know where in the php file it’s called from.
I’m taking every measure I can take to speed up page loading times, and every speed tester on the web says to defer javascripts if possible.
I have read about the defer=’defer’ and the async functions in javascript and I think one of these will accomplish what I’m trying to accomplish. But I’m not understanding how I’d do so in a php file.
For instance, here is a snippet from one particular plugin’s php file where the javascript file is being called:
function add_dcsnt_scripts() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' ); }
I’ve read that it’s best to do something like this for faster page loading times:
<script defer async src="..."></script>
But I don’t know how to accomplish that within a php file. I want to do this with all of my javascript files.
How would I accomplish deferring or asyncing this javascript snippet to is loads last and speeds up page load times? What would be the ideal way to increase page load times across all browsers? Thanks for any guidance anybody can offer!
Advertisement
Answer
This blog post links to two plugins of interest:
Asynchronous Javascript
Improve page load performance by asynchronously loading javascript using head.js
WP Deferred Javascripts
Defer the loading of all javascripts added with wp_enqueue_scripts, using LABJS (an asynchronous javascript library).
Haven’t tested them but checked the code and they do pretty fancy stuff with WordPress scripts enqueuing process.
But then WPSE comes to rescue:
// Adapted from https://gist.github.com/toscho/1584783 add_filter( 'clean_url', function( $url ) { if ( FALSE === strpos( $url, '.js' ) ) { // not our file return $url; } // Must be a ', not "! return "$url' defer='defer"; }, 11, 1 );