Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
POC to defer inline JS that requires jQuery
<?php
add_action('plugins_loaded','ao_defer_inline_init');
function ao_defer_inline_init() {
if ( get_option('autoptimize_js_include_inline') != 'on' ) {
add_filter('autoptimize_html_after_minify','ao_defer_inline_jquery',10,1);
}
}
function ao_defer_inline_jquery( $in ) {
if ( preg_match_all( '#<script.*>(.*)</script>#Usmi', $in, $matches, PREG_SET_ORDER ) ) {
foreach( $matches as $match ) {
if ( $match[1] !== '' && ( strpos( $match[1], 'jQuery' ) !== false || strpos( $match[1], '$' ) !== false ) ) {
// inline js that requires jquery, wrap deferring JS around it to defer it.
$new_match = 'var aoDeferInlineJQuery=function(){'.$match[1].'}; if (document.readyState === "loading") {document.addEventListener("DOMContentLoaded", aoDeferInlineJQuery);} else {aoDeferInlineJQuery();}';
$in = str_replace( $match[1], $new_match, $in );
} else if ( $match[1] === '' && strpos( $match[0], 'src=' ) !== false && strpos( $match[0], 'defer' ) === false ) {
// linked non-aggregated JS, defer it.
$new_match = str_replace( '<script ', '<script defer ', $match[0] );
$in = str_replace( $match[0], $new_match, $in );
}
}
}
return $in;
}
@SciLor

This comment has been minimized.

Copy link

@SciLor SciLor commented Feb 6, 2019

Works great. for me. I had to add recaptcha to make it work.

@figarro

This comment has been minimized.

Copy link

@figarro figarro commented Oct 31, 2019

Is there a way to hook add_filter to something that's WordPress native and does not depend on the Autoptimize plugin?

@futtta

This comment has been minimized.

Copy link
Owner Author

@futtta futtta commented Oct 31, 2019

I don't think WordPress native has a filter for the full HTML @figgaro, but if you're using a page caching plugin then that probably has a filter that allows the same.

@niamrox

This comment has been minimized.

Copy link

@niamrox niamrox commented Apr 30, 2020

Did not work for me !

@roytuts

This comment has been minimized.

Copy link

@roytuts roytuts commented May 27, 2020

Did not work for me

@Rajesh-Royal

This comment has been minimized.

Copy link

@Rajesh-Royal Rajesh-Royal commented Jul 20, 2020

worked!
Now I'm loading jquery deferred in Avada theme and got no problem also revolution slider revolution slider.

@robertparkerx

This comment has been minimized.

Copy link

@robertparkerx robertparkerx commented Aug 5, 2020

EDIT: It's working!

@devhelper

This comment has been minimized.

Copy link

@devhelper devhelper commented Aug 18, 2020

it's not working after update to WP 5.5

@hadadjus

This comment has been minimized.

Copy link

@hadadjus hadadjus commented Sep 6, 2020

wp-content/themes/my theme/functions.php. Error message: syntax error, unexpected 'if' (T_IF) how to solve please i want to hide weird unstyled flashing issue in first second?

@Rajesh-Royal

This comment has been minimized.

Copy link

@Rajesh-Royal Rajesh-Royal commented Sep 6, 2020

wp-content/themes/my theme/functions.php. Error message: syntax error, unexpected 'if' (T_IF) how to solve please i want to hide weird unstyled flashing issue in first second?

you have to include complete snippet or post more detail before we can help, it may look like you missed a syntax in php

@hadadjus

This comment has been minimized.

Copy link

@hadadjus hadadjus commented Sep 6, 2020

im using this tutorial https://wpsoul.com/how-optimize-speed-of-wordpress/#setup-database-and-file-cache-with-cache-plugins to optimise my site when i put the the php code in the function file i get this error wp-content/themes/my theme/functions.php. Error message: syntax error, unexpected 'if' (T_IF) and my site got error 500

@Rajesh-Royal

This comment has been minimized.

Copy link

@Rajesh-Royal Rajesh-Royal commented Sep 6, 2020

add_action('plugins_loaded','ao_defer_inline_init');

function ao_defer_inline_init() {
	if ( get_option('autoptimize_js_include_inline') != 'on' ) {
		add_filter('autoptimize_html_after_minify','ao_defer_inline_jquery',10,1);
	}
}

function ao_defer_inline_jquery( $in ) {
  if ( preg_match_all( '#<script.*>(.*)</script>#Usmi', $in, $matches, PREG_SET_ORDER ) ) {
    foreach( $matches as $match ) {
      if ( $match[1] !== '' && ( strpos( $match[1], 'jQuery' ) !== false || strpos( $match[1], '$' ) !== false ) ) {
        // inline js that requires jquery, wrap deferring JS around it to defer it. 
        $new_match = 'var aoDeferInlineJQuery=function(){'.$match[1].'}; if (document.readyState === "loading") {document.addEventListener("DOMContentLoaded", aoDeferInlineJQuery);} else {aoDeferInlineJQuery();}';
        $in = str_replace( $match[1], $new_match, $in );
      } else if ( $match[1] === '' && strpos( $match[0], 'src=' ) !== false && strpos( $match[0], 'defer' ) === false ) {
        // linked non-aggregated JS, defer it.
        $new_match = str_replace( '<script ', '<script defer ', $match[0] );
        $in = str_replace( $match[0], $new_match, $in );
      }
    }
  }
  return $in;
}

use this code.

@Rajesh-Royal

This comment has been minimized.

Copy link

@Rajesh-Royal Rajesh-Royal commented Sep 6, 2020

put this code at the very end of function.php to avoid accidental syntax errors.

@hadadjus

This comment has been minimized.

Copy link

@hadadjus hadadjus commented Sep 6, 2020

i puted it in at once in the begin of function not worked i puted itin the last too not worked i got this error in my site " There has been a critical error on your website. " :'(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.