गंभीर सीएसएस जनरेटर

उन्नत क्रिटिकल सीएसएस जेनरेटर और एबोव-द-फोल्ड ऑप्टिमाइज़र के लिए एक निःशुल्क ब्राउज़र-विजेट।

फ़ोल्ड के ऊपर ऑप्टिमाइज़र

क्रिटिकल सीएसएस जनरेटर और ऊपर-नीचे ऑप्टिमाइज़र

परिचय

क्रिटिकल सीएसएस जनरेटर Google के कोर वेब वाइटल्स को अप्रयुक्त-सीएसएस दंड को हटाने में सक्षम बनाता है, पूरी तरह से न्यूनतम सीएसएस के आधार पर। यह एक पिक्सेल परफेक्ट परिणाम प्राप्त करने में सक्षम बनाता है।

सबसे अच्छा महत्वपूर्ण सीएसएस परिणाम एक वास्तविक ब्राउज़र में प्राप्त किया जाता है।

ब्राउज़र विजेट को उस पृष्ठ पर निष्पादित किया जाता है जिस पर महत्वपूर्ण CSS को निकाला जाना है और इसलिए मूल CSS वातावरण में पूर्ण देशी पहुंच है।

आप उन स्टाइलशीट या इनलाइन स्टाइलशीट तत्वों का चयन कर सकते हैं जिनसे महत्वपूर्ण CSS को निकालना है। यह महत्वपूर्ण सीएसएस बनाने के लिए आसान है जिसे पृष्ठों के बीच साझा किया जा सकता है।

ब्राउज़र विजेट में स्टाइलशीट से महत्वपूर्ण सीएसएस को हटाने की सुविधा भी है।

उपकरण जासूसी मुक्त है। कोई Google विश्लेषिकी या ट्रैकिंग नहीं। उपयोग करने के लिए सुरक्षित और सेवा कार्यकर्ता कैश के माध्यम से स्थानीय रूप से उपयोग किया जा सकता है।

ब्राउज़र-विजेट अधिक उन्नत महत्वपूर्ण सीएसएस सॉफ़्टवेयर का एक उदाहरण प्रदान करता है जिसका उपयोग Google क्लाउड में क्रोम ब्राउज़र के माध्यम से किया जा सकता है। अधिक जानकारी के लिए हमारा पेशेवर अनुकूलन प्लगइन देखें।

स्थापित करना

विजेट स्थापित करने के लिए, इस लिंक को खींचो🗔 क्रिटिकल-सीएसएस या नीचे दिए गए कोड को कॉपी और पेस्ट करें।

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="क्रिटिकल-सीएसएस widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

विशेषताएँ

1. उन्नत महत्वपूर्ण सीएसएस जनरेटर

   1. कस्टम पोस्टसीएसएस के आधार पर विकसित किया गया है, जो सबसे अच्छे सीएसएस पार्सर्स में से एक है।
   2. उत्तरदायी महत्वपूर्ण सीएसएस के लिए एकाधिक-व्यूपोर्ट (डेस्कटॉप + मोबाइल) का समर्थन करता है।
   3. कठपुतली जैसे ब्राउज़र नियंत्रण जिसमें क्लिक, माउस ईवेंट (होवर, मूव आदि), स्क्रॉलिंग, कस्टम जावास्क्रिप्ट कोड निष्पादन और बहुत कुछ शामिल हैं।
   4. कच्चा गैर-अनुकूलित शुद्ध महत्वपूर्ण सीएसएस आउटपुट।

2. फ़ोल्ड के ऊपर ऑप्टिमाइज़र

   1. महत्वपूर्ण CSS की मूल CSS से तुलना करें।
   2. अनुकूलन योग्य पिक्सेल माप शासक।

3. उन्नत अनुकूलन उपकरण

   1. स्टाइलशीट से महत्वपूर्ण CSS को हटाने के लिए अप्रयुक्त CSS रिमूवर।
   2. पेशेवर सीएसएस संपीड़न (छोटा करें) और अनुकूलन सॉफ्टवेयर।
   3. टूटी हुई सीएसएस की मरम्मत। विकृत सीएसएस को ठीक करने के लिए एक उपकरण।
   4. स्वतः उपसर्ग। CSS में ब्राउज़र प्रीफ़िक्स लागू करने के लिए एक टूल।
   5. सीएसएस सांख्यिकी और विश्लेषण।
   6. सीएसएस सुशोभित।
   7. उन्नत सीएसएस लिंट।
   8. डुप्लिकेट सीएसएस रिमूवर।
   9. ऑप्टिमाइज़ेशन युक्तियों के साथ CSS लिंट से जुड़ा उन्नत CSS संपादक।

का उपयोग कैसे करें

चरण 1: पृष्ठ पर ब्राउज़र विजेट प्रारंभ करें

उस पृष्ठ पर जाएँ जिसके लिए आप महत्वपूर्ण सीएसएस निकालना चाहते हैं और ब्राउज़र विजेट प्रारंभ करें। इंस्टालेशन के निर्देशों के लिए यहां पर क्लिक कीजिए ।

चरण 2: महत्वपूर्ण सीएसएस उत्पन्न करें

महत्वपूर्ण सीएसएस जनरेटर को हेडर में टूल टैब के माध्यम से एक्सेस किया जा सकता है।

दस्तावेज़ में विकल्पों का उपयोग करके JSON कॉन्फ़िगर करें।

चरण 3: परिणाम का अनुकूलन करें

महत्वपूर्ण CSS जनरेटर का आउटपुट कच्चा है और इसके लिए और अधिक अनुकूलन की आवश्यकता होती है जैसे कि संपीड़न।

संपादक मेनू में ऑप्टिमाइज़ बटन उन्नत कोड अनुकूलन और संपीड़न लागू करने में सक्षम बनाता है।

प्रलेखन

गंभीर सीएसएस जनरेटर

महत्वपूर्ण सीएसएस जनरेटर निम्नलिखित विकल्पों को स्वीकार करता है।

उदाहरण कॉन्फ़िगरेशन दिखाएं

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "ऊपर-नीचे CSS डिस्कवरी के लिए व्यूपोर्ट सेट करें।"
    },
    {
      "wait": 1000,
      "notes": "व्यूपोर्ट को रेंडर करने के लिए सक्षम करने के लिए 1000ms तक प्रतीक्षा करें।"
    },
    {
      "run": true,
      "notes": "महत्वपूर्ण CSS जनरेटर चलाएं (तह के ऊपर CSS गणना)।"
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-menu DOM तत्व पर नया माउसइवेंट सक्रिय करें।"
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "एक स्क्रिप्ट निष्पादित करें, इस मामले में अगले व्यूपोर्ट के साथ जारी रखने से पहले मेनू को बंद कर दें।"
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

क्रिटिकल सीएसएस जेनरेटर की यूआई क्रियाएं

महत्वपूर्ण सीएसएस जनरेटर कठपुतली जैसा ब्राउज़र नियंत्रण प्रदान करता है। ui_actions पैरामीटर यूआई क्रिया वस्तुओं के साथ एक सरणी स्वीकार करता है जो कालानुक्रमिक क्रम में यूआई राज्य परिवर्तनों को परिभाषित करता है।

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "व्यक्तिगत उपयोग के लिए UI क्रिया का विवरण"
}

उदाहरण कॉन्फ़िगरेशन दिखाएं

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "ऊपर-नीचे CSS डिस्कवरी के लिए व्यूपोर्ट सेट करें।"
    },
    {
      "wait": 1000,
      "notes": "व्यूपोर्ट को रेंडर करने के लिए सक्षम करने के लिए 1000ms तक प्रतीक्षा करें।"
    },
    {
      "run": true,
      "notes": "महत्वपूर्ण CSS जनरेटर चलाएं (तह के ऊपर CSS गणना)।"
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-menu DOM तत्व पर नया माउसइवेंट सक्रिय करें।"
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "एक स्क्रिप्ट निष्पादित करें, इस मामले में अगले व्यूपोर्ट के साथ जारी रखने से पहले मेनू को बंद कर दें।"
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

अप्रयुक्त सीएसएस रिमूवर

अप्रयुक्त CSS रिमूवर महत्वपूर्ण CSS एक्सट्रैक्टर के समान सॉफ़्टवेयर का उपयोग करता है और UI क्रियाओं के माध्यम से कठपुतली जैसे ब्राउज़र नियंत्रण सहित लगभग समान कॉन्फ़िगरेशन विकल्प स्वीकार करता है। उपकरण अप्रयुक्त सीएसएस को निकालने में भी सक्षम बनाता है।

उदाहरण कॉन्फ़िगरेशन दिखाएं

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

डुप्लिकेट सीएसएस रिमूवर

डुप्लिकेट CSS रिमूवर दो स्टाइलशीट की तुलना करना और डुप्लिकेट CSS को हटाना या निकालना संभव बनाता है।

उदाहरण कॉन्फ़िगरेशन दिखाएं

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

दूसरा इनपुट फ़ील्ड स्टाइलशीट इंडेक्स नंबर को स्वीकार करता है। आप सेटिंग टैब पर स्टाइलशीट अवलोकन पर स्टाइलशीट की अनुक्रमणिका पा सकते हैं।

स्टाइलशीट इंडेक्स अवलोकन

आप नई स्टाइलशीट बनाकर स्टाइलशीट अपलोड कर सकते हैं या बाहरी यूआरएल से स्टाइलशीट की तुलना कर सकते हैं। फिर आप URL आयात कर सकते हैं या स्टाइलशीट अपलोड कर सकते हैं और डुप्लीकेट CSS रिमूवर में नई स्टाइलशीट से इंडेक्स का उपयोग कर सकते हैं।

स्टाइलशीट आयात या अपलोड करें

एक बार कॉन्फ़िगर करने के बाद, डुप्लीकेट CSS रिमूवर शुरू करने के लिए बटन दबाएं। एक सीएसएस टिप्पणी परिणामी घटी हुई सीएसएस के बुनियादी आंकड़े प्रदर्शित करेगी।

डुप्लीकेट CSS रिमूवर का परिणाम