Home Wordpress Hooks How to minify html, inline js, inline css with wordpress add action hook?

How to minify html, inline js, inline css with wordpress add action hook?

by therichpost
Published: Updated: 4 comments
How to add custom meta title and meta description in Wordpress?

Hello, welcome to therichpost.com. In this post, I will tell you How to minify html, inline js, inline css with wordpress add action hook? WordPress is the best cms. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress. Now I am going to tell you how the hooks work. First I will tell you, how much minify html is important for website. If we want to make our website faster then there are lots of tricks but minify html, minify css, js are the best things and we will do this with wordpress hook. And Now Final, here is the wordpress hook to minify html, inline js, inline css with wordpress add action hook and you need to add this hook into your wordpress theme’s functions.php file:

class WP_HTML_Compression
{
// Settings
protected $compress_css = true;
protected $compress_js = true;
protected $info_comment = true;
protected $remove_comments = true;
// Variables
protected $html;
public function __construct($html)
{
if (!empty($html))
{
$this->parseHTML($html);
}
}
public function __toString()
{
return $this->html;
}
protected function bottomComment($raw, $compressed)
{
$raw = strlen($raw);
$compressed = strlen($compressed);
$savings = ($raw - $compressed) / $raw * 100;
$savings = round($savings, 2);
return '<!--HTML compressed, size saved ' . $savings . '%. From ' . $raw . ' bytes, now ' . $compressed . ' bytes-->';
}
protected function minifyHTML($html)
{
$pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
$overriding = false;
$raw_tag = false;
// Variable reused for output
$html = '';
foreach($matches as $token)
{
$tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
$content = $token[0];
if (is_null($tag))
{
if (!empty($token['script']))
{
$strip = $this->compress_js;
}
else if (!empty($token['style']))
{
$strip = $this->compress_css;
}
else if ($content == '<!--wp-html-compression no compression-->')
{
$overriding = !$overriding;
// Don't print the comment
continue;
}
else if ($this->remove_comments)
{
if (!$overriding && $raw_tag != 'textarea')
{
// Remove any HTML comments, except MSIE conditional comments
$content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);
}
}
}
else
{
if ($tag == 'pre' || $tag == 'textarea')
{
$raw_tag = $tag;
}
else if ($tag == '/pre' || $tag == '/textarea')
{
$raw_tag = false;
}
else
{
if ($raw_tag || $overriding)
{
$strip = false;
}
else
{
$strip = true;
// Remove any empty attributes, except:
// action, alt, content, src
$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
// Remove any space before the end of self-closing XHTML tags
// JavaScript excluded
$content = str_replace(' />', '/>', $content);
}
}
}
if ($strip)
{
$content = $this->removeWhiteSpace($content);
}
$html.= $content;
}
return $html;
}
public function parseHTML($html) {
$this->html = $this->minifyHTML($html);
if ($this->info_comment)
{
$this->html.= "\n" . $this->bottomComment($html, $this->html);
}
}
protected function removeWhiteSpace($str)
{
$str = str_replace("\t", ' ', $str);
$str = str_replace("\n", '', $str);
$str = str_replace("\r", '', $str);
while (stristr($str, ' '))
{
$str = str_replace(' ', ' ', $str);
}
return $str;
}
}
function wp_html_compression_finish($html)
{
return new WP_HTML_Compression($html);
}
function wp_html_compression_start()
{
ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');

 

There are so many hooks in wordpress and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

You may also like

4 comments

Prakesh October 29, 2018 - 8:07 pm

Hello Ajay, why snippet is better than one click plugins?

Reply
Ajay Malhotra October 30, 2018 - 4:17 pm

Hi Prakesh, because we can modify and edit our on way.

Reply
Jason February 14, 2019 - 2:06 pm

Hello Ajay –

Came across this post looking for a solution to just minify inline CSS & JS without caching and applied the code via my child theme, however when the code runs it causes the site to never load. Was something changed with WP since this code was created or is it supposed to still be compatible with WP 5.0?

Reply
Ajay Malhotra February 16, 2019 - 4:10 am

You can try it and let me know, It works or not?

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.