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

About Jumedeen Khan

I'm the founder of this site and we regularly share useful and helpful information here for beginners. ❤️

Reader Interactions

Comments (23)

  1. Avatar for Shridas KadamShridas Kadam

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

  2. Avatar for Jay RavtoleJay Ravtole

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

  3. Avatar for RaviRavi

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

    • Avatar for Jumedeen khanJumedeen khan

      wpbeginner par is sabki jankari mil jayegi.

  4. Avatar for Dharmendra YadavDharmendra Yadav

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

    • Avatar for Jumedeen khanJumedeen khan

      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.

  5. Avatar for anwaranwar

    theme my minify.php file create kaise kare? zara detail me batayenge please?

    • Avatar for Jumedeen khanJumedeen khan

      FTP server ya cPanel ke through wordpress location me jao waha aapko new file ka option milega wo select kar file name me minify.php type kar ok karo file ban jayegi.

  6. Avatar for KARAN VEERKARAN VEER

    sir bhut he badiya ap aysa code bhi baniye jise images compress ho jayege automatic

  7. Avatar for G. P. GautamG. P. Gautam

    भाई अगर हमने ब्लॉग पर कोई Cache Plugin Install किया हुआ है तो क्या फिर भी इस कोड को Add कर सकते हैं? और अगर Plugin के साथ इस कोड को Add किया तो ये कोड और Plugin का कोड (html, css, js को minify करने वाला) दोनों साथ काम करते रहेंग़े? भाई उलझन दूर करें.

    • Avatar for Jumedeen khanJumedeen khan

      Yes, kar sakte ho lekin minify cache plugin mat karna is code ke bad uski jarurat nahi hai.

  8. Avatar for Duni ChandDuni Chand

    Sir Ye Code Child Theme Me Enter Karna Hai Ya Fir Parent Theme Me.
    Thanks

    • Avatar for Jumedeen khanJumedeen khan

      Child theme use karte ho to child theme me karna hai.

  9. Avatar for Deepak sahuDeepak sahu

    sir ye code add karne pe save nahi ho raha hai.. ye error show ho raha hai—

    Your PHP code changes were rolled back due to an error on line 309 of file wp-content/themes/beginner/functions.php. Please fix and try saving again.

    Cannot redeclare wp_html_compression_finish() (previously declared in wp-content/themes/beginner/functions.php:149)

    • Avatar for Jumedeen khanJumedeen khan

      WordPress 4.9 update ke bad wp dashboard se php file edit karne par ye error aata hai. aap server ke through code add karo. Iske liye aap cpanel >> file manager >> wp-content >> themes >>your theme >> functions.php step follow karke code add karo.

  10. Avatar for Haseeb AlamHaseeb Alam

    Mai Is Jankaari Ko Hindi Me Sirf Aapke Blog Se Jaanna Chahta Tha…

    Kyonki Mujhe Sirf Aapki Coding Par Bharosa Hai… Bilkul Aapke Website Ki Speed Ki Tarah…

    Is Lajwab Jankari Ke Aapka Dil Se Shukriya Sir G…

    • Avatar for Jumedeen khanJumedeen khan

      Welcome bro and tnx for believe SMI, future me aapko aur bhi better site speed up tips milengi.

  11. Avatar for Akash YadavAkash Yadav

    Kya isse website ki loading speed par asar padega..?
    I mean kya Loading Speed kam hogi?

    • Avatar for Jumedeen khanJumedeen khan

      Bilkul kam hogi kyuki file size kam hoga.

  12. Avatar for rovin singh chauhanrovin singh chauhan

    sir mujhe bhi apne blog ki coding ko minify karna tha without plugin but solution ab mil gaya. thanks.

  13. Avatar for Nomi khanNomi khan

    Jumedeen bhai Aapka bohot bohot Shukriya Me kaafi mahino se Html, CSS, Java script ko minify karna tha lekin samjh nahi aa raha tha kaise karu aaj aapki post Padh kar muje kaafi help mili he !! 🙂

  14. Avatar for UmeshUmesh

    Aap kya kya kar rhe ho brother website speed increase karne me, pluggin aur codes jo use karte ho usse ek alag article me bataye jisse ham bhi apne web ki speed increase kar sake

    • Avatar for Jumedeen khanJumedeen khan

      Just wait bro, sabke bare me btaunga tab tak aap ye method try kijiye.

Add a Comment

Your email address will not be published. Required fields are marked *

I need help with ...

Ad