PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 4.7.0
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v4.7.0
4.7.0 4.6.1 4.6.0 4.5.5 4.5.4 4.5.3 4.5.2 3.2.20 3.2.21 3.2.22 3.2.3 3.2.5 3.2.6 3.2.7 3.2.9 3.3.0 3.3.1 3.3.2 3.4.0 3.4.1 3.4.2 3.5.0 3.6.0 3.7.0 3.7.1 All 111 releases
← All changes | templates/minify/js-settings-tab.php +240 -124 3.2.9 → 4.7.0 View file →
@@ -1,159 +1,275 @@
1 -<?php if (!defined('WPO_VERSION')) die('No direct access allowed'); ?>
2 -<div class="wpo_section wpo_group">
1 +<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?>
2 +<div id='wpo_section_js' class="wpo_section wpo_group">
3 3 <div id="wpo_settings_warnings"></div>
4 + <div class="notice notice-warning wpo-warning is-dismissible wpo_section_notice_js show-if-enabled" style="<?php echo $show_section_notice ? '' : 'display:none;'; ?>">
5 + <p>
6 + <span class="dashicons dashicons-shield"></span>
7 + <strong><?php esc_html_e('Enable merging of JavaScript files into one to reduce HTTP requests.', 'wp-optimize'); ?></strong><br>
8 + <?php echo wp_kses_post($notice_text);?>
9 + </p>
10 + </div>
4 11 <form>
5 - <h3><?php _e('JavaScript options', 'wp-optimize'); ?></h3>
6 - <div class="wpo-fieldgroup">
12 + <h3 class="show-if-enabled"><?php esc_html_e('JavaScript options', 'wp-optimize'); ?></h3>
13 + <div class="wpo-fieldgroup show-if-enabled">
7 14 <fieldset>
8 - <label for="enable_js_minification">
9 - <input
10 - name="enable_js_minification"
11 - type="checkbox"
12 - id="enable_js_minification"
13 - value="1"
14 - <?php echo checked($wpo_minify_options['enable_js_minification']); ?>
15 - >
16 - <?php _e('Enable minification of JavaScript files', 'wp-optimize'); ?>
17 - </label>
18 - <label for="enable_merging_of_js">
19 - <input
20 - name="enable_merging_of_js"
21 - type="checkbox"
22 - id="enable_merging_of_js"
23 - value="1"
24 - <?php echo checked($wpo_minify_options['enable_merging_of_js']); ?>
25 - >
26 - <?php _e('Enable merging of JavaScript files', 'wp-optimize'); ?>
27 - <span tabindex="0" data-tooltip="<?php _e('If some functionality is breaking on the frontend, disabling merging of JavaScript might fix the issues.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
28 - </label>
29 - <label for="enable_js_trycatch">
30 - <input
31 - name="enable_js_trycatch"
32 - type="checkbox"
33 - id="enable_js_trycatch"
34 - value="1"
35 - <?php echo checked($wpo_minify_options['enable_js_trycatch']); ?>
36 - >
37 - <?php _e('Contain each included file in its own block', 'wp-optimize'); ?>
38 - <em><?php _e('(enable if trying to isolate a JavaScript error introduced by minifying or merging)', 'wp-optimize'); ?></em>
39 - <span tabindex="0" data-tooltip="<?php esc_attr_e('When enabled, the content of each JavaScript file that is combined will be wrapped in its own "try / catch" statement. This means that if one file has an error, it should not impede execution of other, independent files.', 'wp-optimize'); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
40 - </label>
15 + <div class="wpo-fieldgroup__subgroup">
16 + <label for="enable_js_minification">
17 + <input
18 + name="enable_js_minification"
19 + type="checkbox"
20 + id="enable_js_minification"
21 + value="1"
22 + <?php checked($wpo_minify_options['enable_js_minification']); ?>
23 + >
24 + <?php esc_html_e('Enable minification of JavaScript files', 'wp-optimize'); ?>
25 + </label>
26 + </div>
27 + <div class="wpo-fieldgroup__subgroup">
28 + <label for="enable_merging_of_js">
29 + <input
30 + name="enable_merging_of_js"
31 + type="checkbox"
32 + id="enable_merging_of_js"
33 + value="1"
34 + <?php checked($wpo_minify_options['enable_merging_of_js']); ?>
35 + >
36 + <?php esc_html_e('Enable merging of JavaScript files', 'wp-optimize'); ?>
37 + </label>
38 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($tooltip); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
39 + </div>
40 + <div class="wpo-fieldgroup__subgroup">
41 + <label for="enable_js_trycatch">
42 + <input
43 + name="enable_js_trycatch"
44 + type="checkbox"
45 + id="enable_js_trycatch"
46 + value="1"
47 + <?php checked($wpo_minify_options['enable_js_trycatch']); ?>
48 + >
49 + <?php esc_html_e('Contain each included file in its own block', 'wp-optimize'); ?>
50 + <em><?php esc_html_e('(enable if trying to isolate a JavaScript error introduced by minifying or merging)', 'wp-optimize'); ?></em>
51 + <?php
52 + $message = __('When enabled, the content of each JavaScript file that is combined will be wrapped in its own "try / catch" statement.', 'wp-optimize');
53 + $message .= ' ';
54 + $message .= __('This means that if one file has an error, it should not impede execution of other, independent files.', 'wp-optimize');
55 + ?>
56 + </label>
57 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($message); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
58 + </div>
41 59 </fieldset>
42 60 </div>
43 - <h3><?php _e('Exclude JavaScript from processing', 'wp-optimize'); ?></h3>
44 - <div class="wpo-fieldgroup">
61 +
62 + <?php do_action('wpo_after_minify_javascript_options'); ?>
63 +
64 + <h3 class="show-if-enabled"><?php esc_html_e('Exclude JavaScript from processing', 'wp-optimize'); ?></h3>
65 + <div class="wpo-fieldgroup show-if-enabled">
45 66 <fieldset>
46 - <label for="exclude_js">
47 - <?php _e('Any JavaScript files that match the paths below will be completely ignored', 'wp-optmize'); ?>
48 - <span tabindex="0" data-tooltip="<?php esc_attr_e('Use this if you are having issues with a certain JavaScript file.', 'wp-optmize'); ?> <?php esc_attr_e('Any file present here will be loaded normally by WordPress', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
49 - </label>
50 - <textarea
51 - name="exclude_js"
52 - rows="7" cols="50"
53 - id="exclude_js"
54 - class="large-text code"
55 - placeholder="<?php esc_attr_e('e.g.: /wp-includes/js/jquery/jquery.js', 'wp-optimize'); ?>"
56 - ><?php echo esc_textarea($wpo_minify_options['exclude_js']);?></textarea>
57 - <br>
58 - <?php _e('Some files known for causing issues when combined / minified are excluded by default.', 'wp-optimize'); ?> <?php _e('You can see / edit them in the Advanced tab.', 'wp-optimize'); ?>
59 - </fieldset>
60 - </div>
61 -
62 - <h3><?php _e('Defer JavaScript', 'wp-optimize'); ?></h3>
63 - <div class="wpo-fieldgroup">
64 - <fieldset class="async-js-manual-list">
65 - <h4><label>
66 - <input
67 - name="enable_defer_js"
68 - type="radio"
69 - value="individual"
70 - <?php echo checked($wpo_minify_options['enable_defer_js'], 'individual'); ?>
71 - >
72 - <?php _e('Defer selected JavaScript files', 'wp-optimize'); ?>
73 - <span tabindex="0" data-tooltip="<?php esc_attr_e('The files in the list will be loaded asynchronously, and will not be minified or merged.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
74 - </label>
75 - </h4>
76 - <div class="defer-js-settings">
77 - <label for="async_js">
78 - <?php _e('Any JavaScript files that match the paths below will be loaded asynchronously.', 'wp-optmize'); ?>
79 - <br/>
80 - <?php _e('Use this if you have a completely independent script or would like to exclude scripts from page speed tests (PageSpeed Insights, GTMetrix...)', 'wp-optmize'); ?>
81 - <span tabindex="0" data-tooltip="<?php esc_attr_e('Independent scripts are for example \'analytics\' or \'pixel\' scripts. They are not required for the website to work', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
67 + <div class="wpo-fieldgroup__subgroup">
68 + <label for="exclude_js">
69 + <?php esc_html_e('Any JavaScript files that match the paths below will be completely ignored', 'wp-optimize'); ?>
82 70 </label>
71 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Use this if you are having issues with a certain JavaScript file.', 'wp-optimize'); ?> <?php esc_attr_e('Any file present here will be loaded normally by WordPress', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
83 72 <textarea
84 - name="async_js"
85 - rows="7"
86 - cols="50"
87 - id="async_js"
73 + name="exclude_js"
74 + rows="7" cols="50"
75 + id="exclude_js"
88 76 class="large-text code"
89 - placeholder="<?php esc_attr_e('e.g.: /js/main.js', 'wp-optimize'); ?>"
90 - ><?php echo esc_textarea($wpo_minify_options['async_js']); ?></textarea>
77 + placeholder="<?php esc_attr_e('e.g.: /wp-includes/js/jquery/jquery.js', 'wp-optimize'); ?>"
78 + ><?php echo esc_textarea($wpo_minify_options['exclude_js']);?></textarea>
79 + <br>
80 + <?php esc_html_e('Some files known for causing issues when combined / minified are excluded by default.', 'wp-optimize'); ?> <?php esc_html_e('You can see / edit them in the Advanced tab.', 'wp-optimize'); ?>
91 81 </div>
92 82 </fieldset>
93 -
94 - <fieldset>
95 - <h4>
96 - <label>
83 + </div>
84 +
85 + <h3 class="show-if-enabled"><?php esc_html_e('Defer JavaScript', 'wp-optimize'); ?></h3>
86 + <div class="wpo-fieldgroup show-if-enabled">
87 + <fieldset class="async-js-manual-list">
88 + <div class="wpo-fieldgroup__subgroup">
89 + <h4><label>
97 90 <input
98 91 name="enable_defer_js"
99 92 type="radio"
100 - value="all"
101 - <?php echo checked($wpo_minify_options['enable_defer_js'], 'all'); ?>
93 + value="individual"
94 + <?php checked($wpo_minify_options['enable_defer_js'], 'individual'); ?>
102 95 >
103 - <?php _e('Defer all the JavaScript files', 'wp-optimize'); ?>
104 - <span tabindex="0" data-tooltip="<?php esc_attr_e('All files - including the ones processed by WP-Optimize - will be deferred, except the ones in the exclusion list above.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
96 + <?php esc_html_e('Asynchronously load selected JavaScript files', 'wp-optimize'); ?>
105 97 </label>
106 - </h4>
98 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('The files in the list will be loaded asynchronously, and will not be minified or merged.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span><br>
99 + </h4>
100 + </div>
107 101 <div class="defer-js-settings">
102 + <div class="wpo-fieldgroup__subgroup">
103 + <label for="async_js">
104 + <?php esc_html_e('Any JavaScript files that match the paths below will be loaded asynchronously.', 'wp-optimize'); ?>
105 + <br>
106 + <?php esc_html_e('Use this if you have a completely independent script', 'wp-optimize'); ?>
107 + <?php
108 + $message = __('Independent scripts are for example \'analytics\' or \'pixel\' scripts.', 'wp-optimize');
109 + $message .= ' ';
110 + $message .= __('They are not required for the website to work', 'wp-optimize');
111 + ?>
112 + </label>
113 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($message);?>"><span class="dashicons dashicons-editor-help"></span></span>
114 + <textarea
115 + name="async_js"
116 + rows="7"
117 + cols="50"
118 + id="async_js"
119 + class="large-text code"
120 + placeholder="<?php esc_attr_e('e.g.: /js/main.js', 'wp-optimize'); ?>"
121 + ><?php echo esc_textarea($wpo_minify_options['async_js']); ?></textarea>
122 + </div>
123 + <div class="wpo-fieldgroup__subgroup">
124 + <label for="exclude_js_from_page_speed_tools">
125 + <input
126 + name="exclude_js_from_page_speed_tools"
127 + type="checkbox"
128 + id="exclude_js_from_page_speed_tools"
129 + value="1"
130 + <?php checked($wpo_minify_options['exclude_js_from_page_speed_tools']); ?>
131 + >
132 + <?php esc_html_e('Exclude scripts from page speed tests (PageSpeed Insights, GTMetrix...)', 'wp-optimize'); ?>
133 + </label>
134 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Use this only for testing purpose to find out which scripts are slowing down your site.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span><br>
135 + </div>
136 + </div>
137 + </fieldset>
138 +
139 + <fieldset>
140 + <div class="wpo-fieldgroup__subgroup">
141 + <h4>
142 + <label>
143 + <input
144 + name="enable_defer_js"
145 + type="radio"
146 + value="all"
147 + <?php checked($wpo_minify_options['enable_defer_js'], 'all'); ?>
148 + >
149 + <?php esc_html_e('Defer all the JavaScript files', 'wp-optimize'); ?>
150 + </label>
151 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('All files - including the ones processed by WP-Optimize - will be deferred, except the ones in the exclusion list above.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
152 + </h4>
153 + </div>
154 + <div class="defer-js-settings">
108 155 <div class="notice notice-warning below-h2">
109 156 <p class="wpo_min-bold-green wpo_min-rowintro">
110 - <?php _e('Some themes and plugins need render blocking scripts to work.', 'wp-optimize'); ?> <?php _e('Please check the browser console for any eventual JavaScript errors caused by deferring the scripts.', 'wp-optimize'); ?>
157 + <?php esc_html_e('Some themes and plugins need render blocking scripts to work.', 'wp-optimize'); ?> <?php esc_html_e('Please check the browser console for any eventual JavaScript errors caused by deferring the scripts.', 'wp-optimize'); ?>
111 158 </p>
112 159 </div>
113 - <h4><?php _e('Defer method:', 'wp-optimize'); ?></h4>
114 - <label>
160 + <h4><?php esc_html_e('Defer method:', 'wp-optimize'); ?></h4>
161 + <div class="wpo-fieldgroup__subgroup">
162 + <label>
163 + <input
164 + name="defer_js_type"
165 + type="radio"
166 + value="defer"
167 + <?php checked($wpo_minify_options['defer_js_type'], 'defer'); ?>
168 + >
169 + <?php esc_html_e('Use the "defer" html attribute', 'wp-optimize'); ?>
170 + </label>
171 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Supported by all modern browsers.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
172 + </div>
173 + <div class="wpo-fieldgroup__subgroup">
174 + <label>
175 + <input
176 + name="defer_js_type"
177 + type="radio"
178 + value="async_using_js"
179 + <?php checked($wpo_minify_options['defer_js_type'], 'async_using_js'); ?>
180 + >
181 + <?php esc_html_e('Defer using JavaScript', 'wp-optimize'); ?>
182 + <em>
183 + <?php
184 + $message = '(';
185 + $message .= esc_html__('Asynchronous loading.', 'wp-optimize');
186 + $message .= ' ';
187 + // translators: %1$s is a opening anchor tag, %2$s is a closing anchor tag
188 + $message .= sprintf(esc_html__('Use this method if you require support for %1$solder browsers%2$s.', 'wp-optimize'), '<a href="https://www.w3schools.com/tags/att_script_defer.asp" target="_blank">', '</a>');
189 + $message .= ')';
190 + echo wp_kses_post($message);
191 + ?>
192 + </em>
193 + </label>
194 + </div>
195 + <div class="wpo-fieldgroup__subgroup">
196 + <label for="defer_jquery">
197 + <input
198 + name="defer_jquery"
199 + type="checkbox"
200 + id="defer_jquery"
201 + value="1"
202 + <?php checked($wpo_minify_options['defer_jquery']); ?>
203 + >
204 + <?php esc_html_e('Defer jQuery', 'wp-optimize'); ?> <em><?php esc_html_e('(Note that as jQuery is a common dependency, it probably needs to be loaded synchronously).', 'wp-optimize'); ?></em>
205 + </label>
206 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Disable this setting if you have an error \'jQuery undefined\'.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
207 + </div>
208 + </div>
209 + </fieldset>
210 + </div>
211 +
212 + <h3><?php esc_html_e('Delay JavaScript', 'wp-optimize'); ?></h3>
213 + <div class="wpo-fieldgroup">
214 + <fieldset>
215 + <div class="wpo-fieldgroup__subgroup">
216 + <h4><label>
115 217 <input
116 - name="defer_js_type"
117 - type="radio"
118 - value="defer"
119 - <?php echo checked($wpo_minify_options['defer_js_type'], 'defer'); ?>
218 + name="enable_delay_js"
219 + type="checkbox"
220 + value="true"
221 + <?php checked($wpo_minify_options['enable_delay_js'], true); ?>
120 222 >
121 - <?php _e('Use the "defer" html attribute', 'wp-optimize'); ?>
122 - <span tabindex="0" data-tooltip="<?php esc_attr_e('Supported by all modern browsers.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
223 + <?php esc_html_e('Delay JS', 'wp-optimize'); ?>
123 224 </label>
124 - <label>
225 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Delays JavaScript file loading until the user interacts with the page (e.g., mouse movement, scrolling, or touch), thereby improving page load performance', 'wp-optimize'); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
226 + </h4>
227 + </div>
228 +
229 + <div class="wpo-fieldgroup__subgroup">
230 + <h4><label>
125 231 <input
126 - name="defer_js_type"
127 - type="radio"
128 - value="async_using_js"
129 - <?php echo checked($wpo_minify_options['defer_js_type'], 'async_using_js'); ?>
232 + name="enable_preload_js"
233 + type="checkbox"
234 + value="true"
235 + <?php checked($wpo_minify_options['enable_preload_js'], true); ?>
130 236 >
131 - <?php _e('Defer using JavaScript', 'wp-optimize'); ?>
132 - <em><?php printf(__('(Use this method if you require support for %solder browsers%s).', 'wp-optimize'), '<a href="https://www.w3schools.com/tags/att_script_defer.asp" target="_blank">', '</a>');?></em>
237 + <?php esc_html_e('Preload JavaScript files', 'wp-optimize'); ?>
133 238 </label>
134 - <label for="defer_jquery">
135 - <input
136 - name="defer_jquery"
137 - type="checkbox"
138 - id="defer_jquery"
139 - value="1"
140 - <?php echo checked($wpo_minify_options['defer_jquery']); ?>
141 - >
142 - <?php _e('Defer jQuery', 'wp-optimize'); ?> <em><?php _e('(Note that as jQuery is a common dependency, it probably needs to be loaded synchronously).', 'wp-optimize'); ?></em>
143 - <span tabindex="0" data-tooltip="<?php esc_attr_e('Disable this setting if you have an error \'jQuery undefined\'.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
239 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Preloads JavaScript files in parallel with other resources ahead of time, ensuring they are ready for faster execution without impacting the overall page load time', 'wp-optimize'); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
240 + </h4>
241 + </div>
242 +
243 + <div class="wpo-fieldgroup__subgroup">
244 + <label for="exclude_delay_js">
245 + <?php esc_html_e('Any JavaScript files that match the paths below will be completely ignored.', 'wp-optimize'); ?>
246 + <?php esc_html_e('It is also possible to exclude scripts by adding the "data-no-delay-js" attribute.', 'wp-optimize'); ?>
144 247 </label>
248 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Use this if you are having issues with a specific JavaScript file.', 'wp-optimize'); ?> <?php esc_attr_e('Any file present here will be loaded normally by WordPress', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
249 +
250 + <textarea
251 + name="exclude_delay_js"
252 + rows="7" cols="50"
253 + id="exclude_delay_js"
254 + class="large-text code"
255 + placeholder="<?php esc_attr_e('e.g.: /wp-includes/js/jquery/jquery.js', 'wp-optimize'); ?>"
256 + ><?php echo esc_textarea($wpo_minify_options['exclude_delay_js']);?></textarea>
257 + <span>
258 + <?php
259 + esc_html_e('Use the wildcard * to similar JavaScript files.', 'wp-optimize');
260 + echo ' ';
261 + // translators: %1$s and %2$s are examples of path using the wildcards
262 + printf(esc_html_x('e.g. %1$s or %2$s', '%s are examples of path using the wildcard *', 'wp-optimize'), '<code>/js/*</code>', '<code>/jquery*.js</code>');
263 + ?>
264 + </span>
145 265 </div>
146 266 </fieldset>
147 267 </div>
148 268
149 - <p class="submit">
150 - <input
151 - class="wp-optimize-save-minify-settings button button-primary"
152 - type="submit"
153 - value="<?php esc_attr_e('Save settings', 'wp-optimize'); ?>"
154 - >
155 - <img class="wpo_spinner" src="<?php echo esc_attr(admin_url('images/spinner-2x.gif')); ?>" alt="...">
269 + <div class="wpo-save-btn-container">
270 + <input class="wp-optimize-save-minify-settings button button-primary" type="submit" value="<?php esc_attr_e('Save settings', 'wp-optimize'); ?>">
271 + <img class="wpo_spinner" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- N/A ?>" alt="...">
156 272 <span class="save-done dashicons dashicons-yes display-none"></span>
157 - </p>
273 + </div>
158 274 </form>
159 275 </div>