Support Me India

  • ब्लॉग
  • ब्लॉग्गिंग
    • वर्डप्रेस
    • ब्लागस्पाट
    • वेब होस्टिंग
    • ऐडसेन्स
    • एफिलिएट मार्केटिंग
    • ईमेल मार्केटिंग
    • डोमेन रजिस्ट्रेशन
  • एसईओ
  • टेक्नोलॉजी
  • लाइफ सक्सेस
  • पैसा कैसे कमायें
  • अधिक
    • इन्टरनेट
    • बिज़नस स्टार्टअप
    • यूट्यूब
    • एजुकेशन
    • दिलचस्प तथ्य
    • सोशल मीडिया
    • सिक्यूरिटी टिप्स
  • सवाल पूछें
मुख्यपृष्ठ / ब्लॉग / वर्डप्रेस / WordPress HTML, CSS & Javascript Minify Kaise Kare (Without Plugin)

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

By: जुमेदीन खानLast Updated: 12 Jul, 2018

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.

  • WordPress Par Website Kaise Banaye - Full Guide in Hindi

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

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.

  • Blog Ko Sahi Se Speed Up Karne Ke Bare Me 7 Jaruri Tips
  • Blog Ko Fast Loading Banane Wale Plugins Aur Unki Settings

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

शेयर
  • Share on Facebook
  • Tweet on Twitter

लेखक: जुमेदीन खान

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

आपको ये भी पढना चाहिए

  • complete set up gudie of WordPress yoast SEO Plugni

    WordPress Yoast SEO Plugin Setup Kaise Kare - Full Settings

  • WordPress Speed Up Plugins and Settings

    Blog Ko Fast Loading Banane Wale Plugins Aur Unki Settings

  • How-to-Disable-Google-AMP-in-WordPress

    WordPress Blog Se Google AMP Disable Kaise Kare

Reader Interactions

टिप्पणियाँ ( 22 )

एक टिप्पणी जोड़ें
  1. Jay Ravtole

    11 Aug, 2019 at 7:26 pm

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

    जवाब दें
  2. Ravi

    29 Aug, 2018 at 8:19 am

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

    जवाब दें
    • Jumedeen khan

      29 Aug, 2018 at 10:43 am

      wpbeginner par is sabki jankari mil jayegi.

      जवाब दें
  3. Dharmendra Yadav

    25 Aug, 2018 at 11:00 pm

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

    जवाब दें
    • Jumedeen khan

      25 Aug, 2018 at 11:07 pm

      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.

      जवाब दें
  4. anwar

    28 Jul, 2018 at 5:58 pm

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

    जवाब दें
    • Jumedeen khan

      29 Jul, 2018 at 10:27 am

      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.

      जवाब दें
  5. KARAN VEER

    21 Jul, 2018 at 8:49 pm

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

    जवाब दें
  6. G. P. Gautam

    13 Jul, 2018 at 8:52 am

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

    जवाब दें
    • Jumedeen khan

      13 Jul, 2018 at 9:00 am

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

      जवाब दें
  7. Duni Chand

    13 Jul, 2018 at 8:41 am

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

    जवाब दें
    • Jumedeen khan

      13 Jul, 2018 at 9:02 am

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

      जवाब दें
  8. Deepak sahu

    12 Jul, 2018 at 9:17 pm

    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)

    जवाब दें
    • Jumedeen khan

      12 Jul, 2018 at 11:04 pm

      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.

      जवाब दें
  9. Haseeb Alam

    12 Jul, 2018 at 7:22 pm

    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...

    जवाब दें
    • Jumedeen khan

      12 Jul, 2018 at 7:54 pm

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

      जवाब दें
  10. Akash Yadav

    12 Jul, 2018 at 7:07 pm

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

    जवाब दें
    • Jumedeen khan

      12 Jul, 2018 at 7:51 pm

      Bilkul kam hogi kyuki file size kam hoga.

      जवाब दें
  11. rovin singh chauhan

    12 Jul, 2018 at 6:20 pm

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

    जवाब दें
  12. Nomi khan

    12 Jul, 2018 at 3:21 pm

    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 !! 🙂

    जवाब दें
  13. Umesh

    12 Jul, 2018 at 3:07 pm

    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

    जवाब दें
    • Jumedeen khan

      12 Jul, 2018 at 3:37 pm

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

      जवाब दें

अपनी प्रतिक्रिया दें। Cancel reply

Primary Sidebar

शुरुआती गाइड

ब्लॉगिंग के माध्यम से पैसे कमाने के 3 तरीका।
#पहला एक ब्लॉग बनाएँ।
#दूसरा ट्रैफिक बढ़ाएँ।
#तीसरा कमाना शुरू करें।
-: पैसे कमाना शुरू करें :-
सिर्फ ₹99/mo में होस्टिंग खरीदें!

नयी पोस्ट

  • बैंक मैनेजर कैसे बने? इसकी योग्यता, सैलरी कितनी होती है?
  • एलडीसी क्या है और लोअर डिवीजन क्लर्क (LDC) कैसे बने?
  • जेल वार्डर या जेल प्रहरी (Jail Warder) कैसे बने?
  • दोस्तों के साथ खेलने के लिए 10 सर्वश्रेष्ठ ऑनलाइन गेम्स 2021
  • संघर्ष से संबंधित कोट्स - Sangharsh Quotes in Hindi

अपडेटेड पोस्ट

  • बैंक मैनेजर कैसे बने? इसकी योग्यता, सैलरी कितनी होती है?
  • एलडीसी क्या है और लोअर डिवीजन क्लर्क (LDC) कैसे बने?
  • जेल वार्डर या जेल प्रहरी (Jail Warder) कैसे बने?
  • Free Software Download Karne Ke Liye Top 10 Websites 2021
  • Sarkari Result 2020 - सरकारी नौकरी, एडमिट कार्ड और ऑनलाइन फॉर्म की जानकारी

पोपुलर पोस्ट

  • गूगल क्रोम ब्राउज़र में अपनी पसंद की भाषा कैसे सेट करें?
  • Blogging Kya Hai? Blogging Se Related Question Answer in Hindi
  • नशे की लत कैसे छोड़े - धूम्रपान से छुटकारा पाने के उपाय
  • न्यूज़ रिपोर्टर कैसे बने? योग्यता, सैलरी क्या होती है?
  • YouTube पर खुद को Famous कैसे करें?

टॉपिक चुनें

  • इन्टरनेट
  • ईमेल मार्केटिंग
  • एजुकेशन
  • एफिलिएट मार्केटिंग
  • एसईओ
  • ऐडसेन्स
  • टेक्नोलॉजी
  • डोमेन रजिस्ट्रेशन
  • दिलचस्प तथ्य
  • पैसा कैसे कमायें
  • फेस्टिवल
  • बिज़नस स्टार्टअप
  • ब्यूटी टिप्स
  • ब्लागस्पाट
  • ब्लॉग्गिंग
  • मोबाइल मार्केटिंग
  • यूट्यूब
  • रिश्ते-नाते
  • लाइफ सक्सेस
  • वर्डप्रेस
  • वेब होस्टिंग
  • सिक्यूरिटी टिप्स
  • सोशल मीडिया
  • स्वास्थ्य

Footer

थोडा ब्लॉग के बारे में

यह एक हिंदी ब्लॉग है, जिसका मकसद है लोगो को हिंदी भाषा में विभिन्न जानकारी उपलब्ध कराना।

इसके अलावा हमारा एक Ask SMI फोरम भी है, जहाँ हम नए ब्लॉगर्स की मदद करते है।

अन्य महत्वपूर्ण लिंक

  • ब्लॉग
  • फ्री ब्लॉग बनाये
  • डील्स
  • पैसे कैसे कमाए
  • विज्ञापन दें
  • होस्टिंग कहा से लें
  • अस्वीकरण
  • शब्दकोश

ब्लॉग न्यूज़लेटर सब्सक्राइब करें

हमारी नवीनतम पोस्ट की सुचना पाने के लिए अभी ब्लॉग को सब्सक्राइब करे!

Powered by: Mozedia.com

कॉपीराइट © 2015–2021हमारे बारे मेंसम्पर्कगोपनीयता नीतिसाइटमैपवापस जाएँ।