Async JavaScript - Version 1.14.12.10

Version Description

Download this release

Release Info

Developer cloughit
Plugin Icon 128x128 Async JavaScript
Version 1.14.12.10
Comparing to
See all releases

Version 1.14.12.10

Files changed (4) hide show
  1. async-javascript.php +177 -0
  2. css/admin.css +3 -0
  3. js/admin.js +15 -0
  4. readme.txt +56 -0
async-javascript.php ADDED
@@ -0,0 +1,177 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3
+ /*
4
+ Plugin Name: Async Javascript
5
+ Plugin URI: http://www.cloughit.com.au/projects/async-javascript/
6
+ Description: Async Javascript adds a 'async' attribute to scripts loaded via wp_enqueue_script
7
+ Version: 0.14.12.10
8
+ Author: David Clough (cloughit)
9
+ Author URI: http://www.cloughit.com.au/
10
+ Text Domain: async-javascript
11
+ License: GNU General Public License v2 or later
12
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
13
+ */
14
+
15
+ /**
16
+ * aj_admin_init()
17
+ *
18
+ * register admin stylesheets and javascripts
19
+ *
20
+ * @param n/a
21
+ * @return n/a
22
+ */
23
+ add_action('admin_init','aj_admin_init');
24
+ function aj_admin_init() {
25
+ wp_register_style(
26
+ 'aj_admin_styles',
27
+ plugins_url('/css/admin.css',__FILE__)
28
+ );
29
+ wp_enqueue_style('aj_admin_styles');
30
+ /*wp_register_script(
31
+ 'aj_admin_scripts',
32
+ plugins_url('/js/admin.js',__FILE__),
33
+ array('jquery')
34
+ );*/
35
+ wp_enqueue_script(
36
+ 'aj_admin_scripts',
37
+ plugins_url('/js/admin.js',__FILE__),
38
+ array('jquery'),
39
+ time()
40
+ );
41
+ }
42
+
43
+ /**
44
+ * async_javascript_menu()
45
+ *
46
+ * register admin menu
47
+ *
48
+ * @param n/a
49
+ * @return n/a
50
+ */
51
+ add_action('admin_menu','async_javascript_menu');
52
+ function async_javascript_menu() {
53
+ add_menu_page('Async Javascript Admin','Async Javascript','manage_options','async-javascript','async_javascript_admin');
54
+ }
55
+
56
+ /**
57
+ * async_javascript_admin()
58
+ *
59
+ * admin page
60
+ *
61
+ * @param n/a
62
+ * @return n/a
63
+ */
64
+ function async_javascript_admin() {
65
+ // Display settings saved message if optioned updated
66
+ if( isset($_GET['settings-updated']) && $_GET['settings-updated'] == 'true' ) {
67
+ echo '<div class="updated"><p><strong>Settings saved.</strong></p></div>';
68
+ }
69
+ // load settings from database
70
+ $aj_enabled = (get_option('aj_enabled') == 1) ? array(true,'checked','') : array(false,'','style="display:none;"');
71
+ $aj_method = (get_option('aj_method') != 'async') ? 'defer' : 'async';
72
+ $autoptimize_enabled = (get_option('autoptimize_enabled') == 1) ? 'checked' : '';
73
+ ?>
74
+ <div class="wrap">
75
+ <h2>Async Javascript Settings</h2>
76
+ <form action="options.php" method="post" name="options">
77
+ <?php echo wp_nonce_field('update-options'); ?>
78
+ <table class="form-table" width="100%" cellpadding="10">
79
+ <tbody>
80
+ <tr><td scope="row" align="left" colspan="2"><h3>Enable Async Javascript</h3></td></tr>
81
+ <tr><td scope="row" align="left" colspan="2">When you enable Async Javascript, when a script is loaded via the 'wp_enqueue_script' method, this plugin will add a 'async' or 'defer' attribute.</td></tr>
82
+ <tr><td scope="row" align="left" colspan="2">This action helps to eliminate render-blocking JavaScript in above-the-fold content. This can also help to increase your pagespeed which in turn will assist in improving your page ranking.</td></tr>
83
+ <tr>
84
+ <td scope="row" align="left" colspan="2">
85
+ There are several ways an external script can be executed:
86
+ <ul style="list-style:disc inside;">
87
+ <li>If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)</li>
88
+ <li>If async is not present and defer is present: The script is executed when the page has finished parsing</li>
89
+ <li>If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page</li>
90
+ </ul>
91
+ </td>
92
+ </tr>
93
+ <tr><td scope="row" align="left" colspan="2"><strong>Note: </strong>There have been instances where enabling Async Javascript has 'broken' the javascript delivery. Should this happen to you, I highly recommend installing the <a href="https://wordpress.org/plugins/autoptimize/" target="_blank">Autoptimize</a> plugin which will combine your javascript, further enhancing pagespeed and eliminating this issue.</td></tr>
94
+ <tr>
95
+ <td scope="row" align="left" style="width:20%;"><label>Enable Async Javascript</label></td>
96
+ <td scope="row" align="left"><input type="checkbox" name="aj_enabled" id="aj_enabled" value="1" <?php echo $aj_enabled[1]; ?> /></td>
97
+ </tr>
98
+ </tbody>
99
+ </table>
100
+ <table class="form-table aj_method" width="100%" cellpadding="10">
101
+ <tbody>
102
+ <tr><td scope="row" align="left" colspan="2"><h3>Async Javascript Method</h3></td></tr>
103
+ <tr><td scope="row" align="left" colspan="2">Please select the method (async or defer) that you wish to enable:</td></tr>
104
+ <tr>
105
+ <td scope="row" align="left" style="width:20%;">Method</td>
106
+ <td scope="row" align="left"><input type="radio" name="aj_method" value="async" <?php if ($aj_method == 'async') { echo 'checked'; } ?> /> Async <input type="radio" name="aj_method" value="defer" <?php if ($aj_method == 'defer') { echo 'checked'; } ?> /> Defer </td>
107
+ </tr>
108
+ </tbody>
109
+ </table>
110
+ <table class="form-table aj_method" width="100%" cellpadding="10">
111
+ <tbody>
112
+ <tr><td scope="row" align="left" colspan="2"><hr/><h3>Async Javascript For Plugins</h3></td></tr>
113
+ <tr><td scope="row" align="left" colspan="2"><hr/><strong>Note: </strong>This will attempt to add the 'async' or 'defer' attribute to scripts loaded via a plugin (ie, not via 'wp_enqueue_script'). If you have a plugin that you would like added to this list please email <a href="mailto:support@cloughit.com.au">support@cloughit.com.au</a></td></tr>
114
+ <?php
115
+ if (is_plugin_active('autoptimize/autoptimize.php')) {
116
+ ?>
117
+ <tr><td scope="row" align="left" colspan="2"><hr/><h4>Autoptimize - <a href="https://wordpress.org/plugins/autoptimize/" target="_blank"><?php echo 'https://wordpress.org/plugins/autoptimize/'; ?></a></h4></td></tr>
118
+ <tr>
119
+ <td scope="row" align="left" style="width:20%;"><label>Enable Autoptimize Support</label></td>
120
+ <td scope="row" align="left"><input type="checkbox" name="autoptimize_enabled" value="1" <?php echo $autoptimize_enabled; ?> /></td>
121
+ </tr>
122
+ <?php
123
+ }
124
+ ?>
125
+ </tbody>
126
+ </table>
127
+ <input type="hidden" name="action" value="update" />
128
+ <input type="hidden" name="page_options" value="aj_enabled,aj_method,autoptimize_enabled" />
129
+ <input type="submit" name="Submit" value="Update" />
130
+ </form>
131
+ </div>
132
+ <?php
133
+ }
134
+
135
+
136
+ /**
137
+ * async_js()
138
+ *
139
+ * add 'async' attribute to '<script>' tasks called via wp_enqueue_script using the 'clean_url' filter
140
+ *
141
+ * @param string $url url being processed
142
+ * @return string $url modified url string
143
+ */
144
+ add_filter('clean_url','async_js',11);
145
+ function async_js($url) {
146
+ $aj_enabled = (get_option('aj_enabled') == 1) ? true : false;
147
+ $aj_method = (get_option('aj_method') != 'async') ? 'defer' : 'async';
148
+ if (false !== $aj_enabled && false === is_admin()) {
149
+ if (false === strpos($url,'.js')) {
150
+ return $url;
151
+ }
152
+ return $url . "' " . $aj_method . "='" . $aj_method;
153
+ }
154
+ return $url;
155
+ } // end async_js()
156
+
157
+ /**
158
+ * my_autoptimize_defer()
159
+ *
160
+ * Adds support for Autoptimize plugin. Adds 'async' attribute to '<script>' tasks called via autoptimize_filter_js_defer filter
161
+ * Autoptimize: https://wordpress.org/plugins/autoptimize/
162
+ *
163
+ * @param string $defer current value of $defer as passed to function
164
+ * @return string 'async' attribute
165
+ */
166
+ add_filter('autoptimize_filter_js_defer','my_autoptimize_defer',11);
167
+ function my_autoptimize_defer($defer) {
168
+ $aj_enabled = (get_option('aj_enabled') == 1) ? true : false;
169
+ $aj_method = (get_option('aj_method') != 'async') ? 'defer' : 'async';
170
+ $autoptimize_enabled = (get_option('autoptimize_enabled') == 1) ? true : false;
171
+ if (false !== $aj_enabled && false === is_admin()) {
172
+ if (false !== $autoptimize_enabled) {
173
+ return " " . $aj_method . "='" . $aj_method . "' ";
174
+ }
175
+ }
176
+ }
177
+ ?>
css/admin.css ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ .aj_method {
2
+ display:none;
3
+ }
js/admin.js ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ function isChecked() {
2
+ if (jQuery('#aj_enabled').prop('checked')) {
3
+ jQuery('.aj_method').show();
4
+ } else {
5
+ jQuery('.aj_method').hide();
6
+ }
7
+ }
8
+
9
+ jQuery(document).ready(function() {
10
+ isChecked();
11
+
12
+ jQuery(document).on('click','#aj_enabled',function() {
13
+ isChecked();
14
+ });
15
+ });
readme.txt ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Async Javascript ===
2
+ Contributors: (cloughit)
3
+ Donate link: http://www.cloughit.com.au/donate/
4
+ Tags: async,javascript,google,pagespeed,js,speed,performance,boost
5
+ Requires at least: 2.8
6
+ Tested up to: 4.0.1
7
+ Stable tag: 1.0
8
+ License: GPLv2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ Async Javascript adds a 'async' attribute to scripts loaded via wp_enqueue_script
12
+
13
+ == Description ==
14
+
15
+ Eliminate Render-blocking Javascript in above-the-fold content with Async Javascript.
16
+
17
+ Render-blocking Javascript prevents above-the-fold content on your page from being rendered until the javascript has finished loading. This can impact on your page speed and ultimately your ranking within search engines. It can also impact your users experience.
18
+
19
+ Async Javascript adds a 'async' attribute to all scripts loaded by the WordPress wp_enqueue_script function. This 'async' attribute forces the javascript to be loaded asynchronously, therefore speeding up page delivery.
20
+
21
+ == Installation ==
22
+
23
+ Just install from your WordPress "Plugins | Add New" screen and all will be well. Manual installation is very straightforward as well:
24
+
25
+ 1. Upload the zip-file and unzip it in the /wp-content/plugins/ directory
26
+ 2. Activate the plugin through the 'Plugins' menu in WordPress
27
+ 3. Go to `Settings -> Async Javascript`
28
+
29
+ == Frequently Asked Questions ==
30
+
31
+ = Which browsers support the 'async' attribute =
32
+
33
+ The 'async' attribute is new in HTML5. It is supported by the following browsers:
34
+
35
+ > Chrome
36
+ > IE 10 and higher
37
+ > Firefox 3.6 and higher
38
+ > Safari
39
+ > Opera
40
+
41
+ = What about foo bar? =
42
+
43
+ Answer to foo bar dilemma.
44
+
45
+ == Screenshots ==
46
+
47
+ 1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
48
+ the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
49
+ directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
50
+ (or jpg, jpeg, gif).
51
+ 2. This is the second screen shot
52
+
53
+ == Changelog ==
54
+
55
+ = 1.0 =
56
+ * Genesis