I have tried global custom JS, then adding the following HTML to the head & body in the functions.php. I have checked the source code & the script is still there, but not working. But this is a very useful way of making sure that your plugin’s CSS can succesfully override any theme’s CSS, without having to resort to labeling your entire CSS ‘important‘. So there you have it, a simple fix to correctly enqueue WordPress scripts with async in order conform with Google PageSpeed Insights.I have added some custom JS via functions.php in my child theme to include scrollreveal.jsįor some reason, it’s only loading when logged in which is weird. Brilliant in hindsight it seems obvious, of course. '/assets/js/#asyncload', 'jquery', '', true ) Īdd_action( 'wp_enqueue_scripts', 'ikreativ_theme_scripts') Conclusion. Wp_enqueue_script( 'application', get_template_directory_uri(). '/assets/js/#asyncload', 'jquery', '', true ) It helps you set when WordPress should interact with a custom. Simply put, instead of having all your code in one place, which would slow down your load time, you use the enqueue function. Wp_enqueue_script( 'plugins', get_template_directory_uri(). using the wpenqueuescript and wpenqueuestyle functions, you inform WordPress when and where to load custom scripts and stylesheets. wp_enqueue_script() syntax, $handle, $src, $deps, $version, $in_footer(boolean) The reason it uses WPScripts and WPStyles singletons is because those instances already have calculated the baseurl. Now you can enqueue your scripts as normal, and simply add the #asyncload string to any script you want to async. If for some reason somebody needs it, these hooks will put modified time versions on all Wordpress scripts and styles, except for those loaded from PHP. This function is simply looking for the #asyncload string, and, if found, appending async='async' to the URL. Return str_replace( '#asyncload', '', $url )."' async='async" Īdd_filter( 'clean_url', 'ikreativ_async_scripts', 11, 1 ) Return str_replace( '#asyncload', '', $url ) Asking for help, clarification, or responding to other answers. If ( strpos( $url, '#asyncload') = false ) Thanks for contributing an answer to WordPress Development Stack Exchange Please be sure to answer the question.Provide details and share your research But avoid. Notice also, we have prefixed our function name to prevent any conflicts with plugins or other functions. Together with the wpenqueuescript () and wpenqueuestyle () functions, it helps WordPress output content on the website. How do we do it?įirst off, you’re going to want to open your functions.php file in your favourite text editor, then we’re going to create our async function. 4min Read How to Enqueue Scripts Using wpenqueuescripts Hook in WordPress The wpenqueuescripts action hook is a vital component of the WordPress development process. The following example shows how jQuery can easily be removed and replaced by a more recent. wpderegisterscript() wpderegisterstyle() wpdequeuescript() wpdequeuestyle() These function allow us to remove assets modularly. So, you’d normally simply add ‘async’ to your script tag, but if you’re enqueuing your scripts correctly via your WordPress functions.php file, you’ll no doubt have realised that there is no parameter to add async when using the WordPress wp_enqueue_script() function. WordPress provides dequeueing and deregistering functions for both scripts and styles. If you regularly build sites with WordPress and test them against Google PageSpeed Insights, you’ll probably have encountered it complaining about async and defer on your scripts.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |