WordPress HTML, CSS & Javascript Minify Kaise Kare (Without Plugin)

WordPress par aap minification plugins ka istemal kar CSS, HTML and JavaScript files ko minify kar uska size kam kar sakte ho lekin is post me main aapko aesa tarika btaunga jisse aap bina plugin (without a plugin) ke apni wordpress site ke HTML, CSS aur JS code ko minify kar sakte ho. Minify WordPress CSS, HTML, JavaScript (without Plugin)

Minify WordPress HTML CSS Javascript Without Plugin

Minify ka matlab hota hai file code me se whitespace aur unnecessary characters ko remove karke file size kam karna. File size reduce hone se aapki site ki pagespeed improve hoti hai aur page speed improve hone se site ki search ranking increase hoti hai.

Main kafi time se aesa farmula search kar raha tha jisse ki main bina kisi plugin ka istemal kiye apni site ki HTML, CSS, JavaScript coding ko minify karke size kam kar saku. Aur finally mujhe iska solution mil gaya, wo tarika main aap sabhi bloggers ke sath share kar raha hu.

Iske liye wordpress par Autoptimize jaise kai plugin available hai lekin hume plugin ke wordpress site ko minify karna hai.

Bina Plugin WordPress HTML, CSS and JS File Code Ko Minify Kaise Kare

Main aaj aapko aesa tarika bta raha hu jo na sirf aapki site ke HTML, CSS, Javascript code ko minify karega balki kis page par kitna size reduce hua hai uske bare me bhi btayega.

Aap apne wordpress blog ke dashboard me jaye aur theme functions.php folder me bottom me ye code add kar de.

WordPress functions.php me <?php line pahle se hi hoti hai so iske alawa code ko hi add karna hai.

<?php
/**
* Plugin Name: SMI Mnify Plugin
*
* Minifies HTML, CSS and Javascript code and reduce file size
* 
* @author Jumedeen khan
* @link https://www.supportmeindia.com/
*/
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 smi_html_css_js_minify()
{
ob_start('wp_html_compression_finish');
}
add_action('get_header', 'smi_html_css_js_minify');

Aap chahe to apne wp theme me minify.php name ki file create kar usme ye code add kar de uske bad aapko functions.php me sirf ye code add karna hai.

//* SMI Minify Plugin
include_once( get_template_directory() . '/minify.php' );

Ab setup complete hone ke bad aap apne blog ke kisi bhi page ka source code dekhe aapko all coding (HTML, CSS and JS) minify huyi milegi.

Agar aap dekhna chahate hai ki aapka page ka size kitna kam hua hai to aap source code ke bottom me dekhe, aapko green color me ye line dikhayi degi.

<!--HTML compressed, size saved 0.00%. From 00000 bytes, now 00000 bytes-->

For example, maine apni site ke ek page ka soruce check kiya tha dekha ki file ka size 8.57% reduce ho gaya hai. Aap ye screenshot dekh sakte hai.

HTML CSS JS Minify Lines

Is tarah se aap wordpress html, css and jaascript ko minify kar file size reduce kar apni site ko speed up kar sakte ho.

Main minimum plugins ka istemal karna better samajhta hu bajaye site par bahut se plugins use karke ke kyuki jyada plugins use karne se site speed slow ho jati hai. Function.php code se bhi site speed slow hoti hai lekin plugin ki tulna me kam hoti hai.

I hope aapko ye article pasand aaya hoga so please apna 5 second ka time nikal kar is post ko share jarur kare.

Avatar for Jumedeen Khan

by: Jumedeen Khan

मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। ❤️

Comments ( 23 )

  1. bhai me aapke dwara diye gaye coding ko copy nahi kar paa raha hu, coding ko copy kaise kare? please bataiye?

    Reply
  2. Nice and Deeply explained about minify css and Html
    It is very helpful.

    Reply
  3. सर, मुझे आपके ब्लॉग की तरह Homepage बनानी है, जैसे email subscription box की जगह seach box, उसके नीचे letest post, क्या कोई drag and drop composer hai इसके लिए? plz बताएं

    Reply
    • wpbeginner par is sabki jankari mil jayegi.

      Reply
  4. Hi नमस्कार sir मै जानना चाहता हु कि
    Q.Admin login panel उसका लोगो और बैकग्राउंड कैसे change या फिर जैसे आपका admin login panel है वैसा डिजाईन करने के लिए क्या करे.
    Q.2 sir यदि हम कोई भी वर्डप्रेस वेबसाइट develop करते है तो उसमे जैसे किसी doctor या क्लिनिक कि जो वेबसाइट होती है मै देखता हु कि एक login जो doctor को दिया जाता है तो उसमे केवल doctor के अपॉइंटमेंट से रिलेटेड दिखाया जाता और बाकि theme और plugin या पोस्टिंग का आप्शन नही रहता है तो sir प्लीज इससे रिलेटेड कोई पोस्ट कीजिये कि ये सब कैसे किया जाता है .

    Reply
    • Ye sab ek developer ka kaam hai, aapko thodi coding aati hai to hi samajh aayega. Coding se aap site me chahe jaise feature laga sakte ho.

      Reply

Leave a Comment