Inline style/script
The JS & CSS code is inserted directly into the page through tags <style <script (not src attr) called inline.
You can modify it's content before it executes on the browser. Use the hook hpp_inline_script hpp_inline_style as bellow:
1
/**
2
* Edit script tag in head,footer,footer-data,get_option..
3
*@param $js
4
*/
5
add_filter('hpp_inline_script', function($js) {
6
//in footer
7
if(strpos($js, '_HWIO.extra_assets=')!==false) {
8
$js = str_replace('})(jQuery);;','})(null);;', $js);
9
$js = str_replace('_HWIO.readyjs(function()','_HWIO.readyjs(function($)', $js);
10
11
}
12
13
//remove `_HWIO.readyjs`
14
if(strpos($js, 'function tdBlock')!==false) {
15
$js = str_replace('_HWIO.readyjs(function(){','', substr($js,0, strlen($js)-2));
16
}
17
//other
18
if(strpos($js,'_HWIO.readyjs')===false) $js = str_replace('timer_metaslider_12()', '_HWIO.readyjs(timer_metaslider_12)', $js);
19
20
//facebook
21
if(strpos($js, 'fbq(')!==false && strpos($js, '},"fbq")')===false) {
22
$js = (substr($js,-3)=='});'? substr($js,0,-3): substr($js,0,-2)). '},"fbq")';
23
}
24
25
return $js;
26
});
27
28
/**
29
*@param $css
30
*/
31
add_filter('hpp_inline_style', function($css){
32
return $css;
33
});
Copied!
Each JS file allows you to add inline JS by the function wp_add_inline_script , these inline code from all JS files will group into a single <script tag & placed at the bottom of the page. You can also modify each inline code like this:
1
//script data
2
add_filter('hpp_inline_script_part', function($js, $handle){
3
if($handle=='wp-util') $js = str_replace('find', 'replace', $js);
4
return $js;
5
}, 10, 2);
Copied!

Lazy script

Almost Inline scripts depend on other library such as jquery so to work without issue these inline code will be fired only after all JS files have complete execution. Hence they need to delay a few milliseconds, and you can see it nested in the event _HWIO.readyjs
However, if your website has some variables that need to be shared for other scripts to use, So you will have to open global for that variable. There are 2 ways to do this: create global variables with window. using the filter hpp_inline_script OR remove the event _HWIO.readyjs
Method 1: using the filter to replace string from var something= towindow.something=
Method 2: removing the wrap event 'readyjs' , by adding blacklist text that found in <script tag you want to remove this event.
1
add_filter('hpp_allow_readyjs', function($ok, $js){
2
if(hpp_in_str($js, ['new PerformanceObserver',]) ) return false;
3
return $ok;
4
}, 10, 2);
5
Copied!
By default, entire inline scripts are run after the document ready, if you want to specific which inline code should run only after the user interacts on the web (ex: scroll, mouse move, click..) so see the below example.
1
add_filter('hpp_delay_it_script', function($v, $js){
2
$find = [
3
'www.googletagmanager.com','connect.facebook.net','www.google-analytics.com','bing.com','new Ya.Metrika',
4
'googlesyndication','adsbygoogle',"fbq('set'",'fbq("set"',"fbq('init'","fbq('track'",'gtag(',
5
];
6
if(hpp_in_str($js, $find)) return true;
7
return $v;
8
},10, 2);
Copied!
With the above snippet, help you create the readyjs event has form of: _HWIO.readyjs(null,function(){});
Last modified 7mo ago
Copy link
Contents
Lazy script