admin_url( 'admin-ajax.php' ), 'siteurl' => get_site_url(), 'pluginurl' => AJ_PLUGIN_URL, 'ajadminurl' => admin_url( 'options-general.php?page=async-javascript' ) ); wp_localize_script( 'aj_admin_scripts', 'aj_localize_admin', $aj_localize ); } /** * register_aj_dashboard_widget() * * Register dashboard widget * */ add_action( 'wp_dashboard_setup', 'register_aj_dashboard_widget' ); function register_aj_dashboard_widget() { global $wp_meta_boxes; wp_add_dashboard_widget( 'aj_dashboard_widget', 'Async JavaScript', 'aj_dashboard_widget' ); $dashboard = $wp_meta_boxes['dashboard']['normal']['core']; $my_widget = array( 'aj_dashboard_widget' => $dashboard['aj_dashboard_widget'] ); unset( $dashboard['aj_dashboard_widget'] ); $sorted_dashboard = array_merge( $my_widget, $dashboard ); $wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard; } /** * aj_dashboard_widget() * * Dashboard widget * */ function aj_dashboard_widget() { $site_url = trailingslashit( get_site_url() ); $aj_gtmetrix_username = get_option( 'aj_gtmetrix_username', '' ); $aj_gtmetrix_api_key = get_option( 'aj_gtmetrix_api_key', '' ); $aj_gtmetrix_server = get_option( 'aj_gtmetrix_server', '' ); $aj_enabled = ( get_option( 'aj_enabled', 0 ) == 1 ) ? 'Enabled' : 'Disabled'; $aj_method = ( get_option( 'aj_method', 'async' ) == 'async' ) ? 'Async' : 'Defer'; $aj_jquery = get_option( 'aj_jquery', 'async' ); $aj_jquery = ( $aj_jquery == 'same ' ) ? get_option( 'aj_method', 'async' ) : $aj_jquery; $aj_jquery = ( $aj_jquery == 'async' ) ? 'Async' : ( $aj_jquery == 'defer' ) ? 'Defer' : 'Excluded'; $aj_exclusions = get_option( 'aj_exclusions', '' ); $aj_autoptimize_enabled = ( get_option( 'aj_autoptimize_enabled' ) == 1 ) ? 'Enabled' : 'Disabled'; $aj_autoptimize_method = ( get_option( 'aj_autoptimize_method' ) == 'async' ) ? 'Async' : 'Defer'; ?>

Async JavaScript Status

Latest GTmetrix Results

' . $report . ''; ?>

Please Wait

PageSpeed Score

>%

YSlow Score

>%

Fully Loaded Time

s

Total Page Size

KB

Requests
See full report:

Please click on the Settings button below to generate a new GTmetrix Report.

10, //seconds 'headers' => array( 'Accept' => 'application/json', ) ); $aj_notice_url = 'https://cloughit.com.au/wordpress-plugins/async-javascript/aj-upgrade-notice.json'; $aj_notice_json = wp_remote_get( $aj_notice_url, $options ); if ( is_array( $aj_notice_json ) && ! is_wp_error( $aj_notice_json ) ) { $body = wp_remote_retrieve_body( $aj_notice_json ); $aj_notice = json_decode( $body ); $aj_upgrade_notice = get_option( 'aj_upgrade_notice' ); if ( !is_null( $aj_notice ) && false !== $aj_upgrade_notice && $aj_upgrade_notice != $aj_notice->notice_id ) { $exp = strtotime( $aj_notice->expire ); $title = $aj_notice->title != '' ? '' . stripslashes( $aj_notice->title ) . '' : ''; $message = stripslashes( $aj_notice->message ); $time = current_time( 'timestamp', 1 ); if ( $time < $exp ) { echo '
' . $title . $message . '
'; } } } } } /** * async_javascript_menu() * * Register admin menu * */ add_action( 'admin_menu', 'async_javascript_menu' ); function async_javascript_menu() { add_submenu_page( 'options-general.php', 'Async JavaScript Admin', 'Async JavaScript', 'manage_options', 'async-javascript', 'async_javascript_admin' ); } /** * async_javascript_admin() * * Admin page * */ function async_javascript_admin() { // load settings from database $tabs = array( 'wizard', 'status', 'settings', 'help' ); $active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'wizard'; ?>

Welcome to Async JavaScript

' . ucfirst( $tab ) . ''; } ?>

status(); $credits = $status['api_credits']; } else { $credits = 'N/A'; } ?>
Async JavaScript

Async JavaScript
GTmetrix API Key

Step 1: GTmetrix API Key

If you haven't already done so, grab an API Key from GTmetrix so that Async JavaScript can obtain your PageSpeed / YSlow results. Here's how:

  1. Navigate to https://gtmetrix.com/api/ (link opens in a new tab)
  2. If you do not already have an account with GTmetrix, go ahead and sign up (it's FREE!).
  3. Log in to your GTmetrix account.
  4. If you haven't yet generated your API Key, click on Generate API Key
  5. Copy your Username and API Key into the fields below:
  6. Select the desired server.
  7. GTmetrix Credits Available:

Please Note: By clicking the button below you acknowledge that you understand that five (5) GTmetrix API credits will be used.
Initial Test Results

Step 2: Initial Test Results

Async JavaScript will now query GTmetrix and retrieve your sites PageSpeed and YSlow scores.

Please Wait

PageSpeed Score

YSlow Score

Fully Loaded Time

Total Page Size

Requests
See full report:
Simulate :

Testing: Async

Async JavaScript will now query GTmetrix and retrieve your sites PageSpeed and YSlow scores whilst simulating the JavaScript 'async' method.

Please Wait

PageSpeed Score

YSlow Score

Fully Loaded Time

Total Page Size

Requests
See full report:
Simulate :

Testing: Defer

Async JavaScript will now query GTmetrix and retrieve your sites PageSpeed and YSlow scores whilst simulating the JavaScript 'defer' method.

Please Wait

PageSpeed Score

YSlow Score

Fully Loaded Time

Total Page Size

Requests
See full report:
Simulate :

Testing: Async (jQuery excluded)

Async JavaScript will now query GTmetrix and retrieve your sites PageSpeed and YSlow scores whilst simulating the JavaScript 'async' method but excluding jQuery.

Please Wait

PageSpeed Score

YSlow Score

Fully Loaded Time

Total Page Size

Requests
See full report:
Simulate :

Testing: Defer (jQuery excluded)

Async JavaScript will now query GTmetrix and retrieve your sites PageSpeed and YSlow scores whilst simulating the JavaScript 'defer' method but excluding jQuery.

Please Wait

PageSpeed Score

YSlow Score

Fully Loaded Time

Total Page Size

Requests
See full report:
Simulate :
Results & Recommendations

Step 3: Results & Recommendations

Async JavaScript has finished testing your site with the most common configuration options.

Based on the tests Async JavaScript has determined that has resulted in in PageSpeed from to and in YSlow from to , with a Fully Loaded time of .

Before applying these settings it is important to check your site is still functioning correctly. Click the link below to open your site in a new tab / window to simulate the Async JavaScript settings and check that everything is working, and also be sure to check the console for any JavaScript errors (see Using Your Browser to Diagnose JavaScript Errors)

  • Simulate :

Once you have simulated click on the button below to continue.
Apply Settings

Step 4: Apply Settings

Is your site still functioning properly and are there no JavaScript errors in the console?

Yes No

Great to hear! To apply these settings click the button below.

Ok, so you have run the simulation on and although there has been an improvement in reported performance, the simulation shows that something is not right with your site.

In most cases the issue being experienced relates to jQuery (usually due to inline JavaScript which relies on jQuery) and the solution is to exclude jQuery. However, in this simulation jQuery has already been exculded. As a result a different configuration may work better with a marginal sacrifice in site speed improvement.

Below are links that can be used to run simulations on each of the basic configurations. Click on each of the links and check the functionality of your site as well as the console for errors.

  • Simulate :
  • Simulate :
  • Simulate :
  • Simulate :

Click one of the buttons below to apply these settings or click the Settings button to go to the settings page for manual configuration.

In most cases the issue being experienced relates to jQuery (usually due to inline JavaScript which relies on jQuery) and the solution is to exclude jQuery.

Below are links that can be used to run simulations on each of the configurations with jQuery excluded. Click on each of the links and check the functionality of your site as well as the console for errors.

  • Simulate :
  • Simulate :

Click one of the buttons below to apply these settings or click the Settings button to go to the settings page for manual configuration.
Further Hints & Tips

status(); $credits = $status['api_credits']; } else { $credits = 'N/A'; } $aj_enabled = ( get_option( 'aj_enabled' ) == 1 ) ? 'Enabled' : 'Disabled'; $aj_method = ( get_option( 'aj_method' ) == 'async' ) ? 'Async' : 'Defer'; $aj_jquery = ( get_option( 'aj_jquery' ) == 'async' ) ? 'Async' : 'Defer'; $aj_exclusions = get_option( 'aj_exclusions', '' ); $aj_autoptimize_enabled = ( get_option( 'aj_autoptimize_enabled' ) == 1 ) ? 'Enabled' : 'Disabled'; $aj_autoptimize_method = ( get_option( 'aj_autoptimize_method' ) == 'async' ) ? 'Async' : 'Defer'; ?>
Most Recent GTmetrix Results

Async JavaScript

  • Status:
  • Method:
  • jQuery:
  • Exclusions:
  • Autoptimize Status:
  • Autoptimize Method:
  • Autoptimize not installed or activated.

Latest GTmetrix Results

' . $report . ''; ?>

Please Wait

PageSpeed Score

>%

YSlow Score

>%

Fully Loaded Time

s

Total Page Size

KB

Requests
See full report:

Please click on the button below to generate a new GTmetrix Report.

Please Note: By clicking the button below you acknowledge that you understand that one (1) GTmetrix API credit will be used.

GTmetrix API Key

If you haven't already done so, grab an API Key from GTmetrix so that Async JavaScript can obtain your PageSpeed / YSlow results. Here's how:

  1. Navigate to https://gtmetrix.com/api/ (link opens in a new tab)
  2. If you do not already have an account with GTmetrix, go ahead and sign up (it's FREE!).
  3. Log in to your GTmetrix account.
  4. If you haven't yet generated your API Key, click on Generate API Key
  5. Copy your Username and API Key into the fields below:
  6. Select the desired server.
  7. GTmetrix Credits Available:
Async JavaScript

Async JavaScript
Enable Async JavaScript

Enable Async JavaScript

/>

Async JavaScript Method

Please select the method (async or defer) that you wish to enable:

/> Async /> Defer

jQuery

Often if jQuery is loaded with async or defer it can break some jQuery functions, specifically inline scripts which require jQuery to be loaded before the scripts are run. Sometimes choosing a different method (async or defer) will work, otherwise it may be necessary to exclude jQuery from having async or defer applied.

/> Async /> Defer /> Exclude

Script Exclusion

Please list any scripts which you would like excluded from having async or defer applied during page load. (comma seperated list eg: jquery.js,jquery-ui.js)

Async JavaScript For Plugins

Although not recommended, some themes / plugins can load JavaScript files without using the wp_enqueue_script function. In some cases this is necessary for the functionality of the theme / plugin.

If these themes / plugins provide a hook that can be used to manipulate how the JavaScript file is loaded then Async JavaScript may be able to provide support for these themes / plugins.

If you have any active themes / plugins that Async JavaScript supports then these will be listed below.

If you think you have found a plugin that Async JavaScript may be able to provide support for please lodge a ticket at https://cloughit.com.au/support/

Plugin: Autoptimize

https://wordpress.org/plugins/autoptimize/

/>

/> Async /> Defer
Help & Support

Help & Support

Below are some answers to some frequently asked questions about Async JavaScript

Which browsers support the 'async' and 'defer' attributes?

The 'async' attribute is new in HTML5. It is supported by the following browsers:

  • Chrome
  • IE 10 and higher
  • Firefox 3.6 and higher
  • Safari
  • Opera

Where can I get help?

Async JavaScript is supported exclusively via our Support Ticketing System at https://cloughit.com.au/support/

What support do you provide?

We will provide support for any functionality of the Async JavaScript plugin itself, suggestions for theme / plugin support and suggestions on how Async JavaScript could be improved.

What support don't you provide?

We will not provide support for questions such as 'Why is Async JavaScript not making any improvement on my site?'. If you need this level of support we offer a bundled Async JavaScript Pro plus Installation & Configuration (homepage only) AUD $155.00 (buy now!)

Can I use the WordPress Forums to get support for Async JavaScript?

No. Support is provided via our Support Ticketing System at https://cloughit.com.au/support/

Can I email the author directly to get support for Async JavaScript?

No. Support is provided via our Support Ticketing System at https://cloughit.com.au/support/

What about CSS?

As the name implies, Async JavaScript is built to enhance JavaScript loading only. Async JavaScript does not have any impact on CSS.

We recommend using the awesome Autoptimize plugin alongside Async JavaScript for CSS optimization.

Do you have a pro version?

Yes we do! Here are some of the benefits of Async JavaScript Pro:

  • Selective ‘async’ – choose which JavaScripts to apply ‘async’ to
  • Selective ‘defer’ – choose which JavaScripts to apply ‘defer’ to
  • Exclude individual scripts – choose which JavaScripts to ignore
  • Exclude plugins – choose local plugin JavaScripts to ignore
  • Exclude themes – choose local theme JavaScripts to ignore

Buy Now!

I want out, how should I remove Async JavaScript?

  • Disable the plugin
  • Delete the plugin
When a JavaScript file is loaded via the wp_enqueue_script function, Async JavaScript will add an async or defer attribute.

'; $return .= '

There are several ways an external JavaScript file can be executed:

'; $return .= ''; $return .= '

Using async or defer helps to eliminate render-blocking JavaScript in above-the-fold content. This can also help to increase your pagespeed which in turn can assist in improving your page ranking.

'; return $return; } /** * hints_tips() * * Return common text for Hints & Tips * */ function hints_tips() { $return = ''; $return .= '

Further Hints & Tips

'; if ( is_plugin_active( 'autoptimize/autoptimize.php' ) ) { $return .= '

Async JavaScript has detected that you have Autoptimize installed and active. Async JavaScript can further enhance Autoptimize results by applying Async or Defer to the cache files used by Autoptimize.

'; } else { $return .= '

Async JavaScript has detected that you do not have Autoptimize installed and active. Autoptimize can provide further optimization of JavaScript which can benefit the results of Async JavaScripts (and Async JavaScript can also enhance Autoptimize results!)

'; $return .= '

You can install Autoptimize from the plugin repository, or download it from here: https://wordpress.org/plugins/autoptimize/

'; } $return .= '

Through our testing the following common Autoptimize settings work well to achieve the best results. Of course each website is different so you may need to fine tune these settings to suit.

'; $return .= '
    '; $return .= '
  1. Navigate to Settings > Autoptimize
    2. '; $return .= '
  2. Click on the Show advanced settings button
    3. '; $return .= '
  3. Under JavaScript Options set the following:
    4. '; $return .= ''; $return .= '
  4. Click on the Save Changes and Empty Cache button
    5. '; $return .= '
  5. Navigate to Settings > Async JavaScript
    6. '; $return .= '
  6. Click on the Settings tab
    7. '; $return .= '
  7. Scroll down to Async JavaScript For Plugins
    8. '; $return .= '
  8. Under Autoptimize set the following:
    9. '; $return .= ''; $return .= '
  9. Click on Save Changes
    10. '; $return .= '
'; return $return; } /** * async_js() * * Add 'async' or 'defer' attribute to '