गंभीर CSS जनरेटर

प्रगत गंभीर CSS जनरेटर आणि वरच्या-द-फोल्ड ऑप्टिमायझरसाठी विनामूल्य ब्राउझर-विजेट.

अबोव्ह-द-फोल्ड ऑप्टिमायझर

गंभीर CSS जनरेटर आणि वर-द-फोल्ड ऑप्टिमायझर

परिचय

क्रिटिकल CSS जनरेटर Google च्या Core Web Vitals चे निराकरण करण्यास सक्षम करते , न वापरलेले-CSS पेनल्टी काढून टाकते , पूर्णपणे किमान CSS च्या आधारावर. हे पिक्सेल परिपूर्ण परिणाम प्राप्त करण्यास सक्षम करते.

सर्वोत्तम गंभीर CSS परिणाम वास्तविक ब्राउझरमध्ये प्राप्त केला जातो.

ब्राउझर विजेट त्या पृष्ठावर कार्यान्वित केले जाते ज्यावर गंभीर CSS काढले जाणार आहे आणि म्हणून मूळ CSS वातावरणात संपूर्ण स्थानिक प्रवेश आहे.

तुम्ही स्टाइलशीट किंवा इनलाइन स्टाइलशीट घटक निवडू शकता ज्यामधून गंभीर CSS काढायचे आहे. हे गंभीर CSS तयार करण्यासाठी सुलभ आहे जे पृष्ठांमध्ये सामायिक केले जाऊ शकते.

ब्राउझर विजेटमध्ये स्टाइलशीटमधून गंभीर CSS काढून टाकण्याचे वैशिष्ट्य देखील आहे.

साधन गुप्तचर मुक्त आहे. Google Analytics किंवा ट्रॅकिंग नाही. वापरण्यास सुरक्षित आणि सर्व्हिस वर्कर कॅशेद्वारे स्थानिक पातळीवर वापरला जाऊ शकतो.

ब्राउझर-विजेट अधिक प्रगत गंभीर CSS सॉफ्टवेअरचे उदाहरण देते जे Google Cloud मधील Chrome ब्राउझरद्वारे वापरले जाऊ शकते. अधिक माहितीसाठी आमचे व्यावसायिक ऑप्टिमायझेशन प्लगइन पहा.

स्थापित करा

विजेट स्थापित करण्यासाठी, ही लिंक ड्रॅग करा🗔 गंभीर-CSS किंवा खालील कोड कॉपी आणि पेस्ट करा.

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="गंभीर-CSS 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. प्रगत गंभीर CSS जनरेटर

   1. सर्वोत्कृष्ट CSS विश्लेषकांपैकी एक, PostCSS वर आधारित सानुकूल विकसित केले.
   2. प्रतिसादात्मक गंभीर CSS साठी एकाधिक-व्ह्यूपोर्ट्स (डेस्कटॉप + मोबाइल) चे समर्थन करते.
   3. क्लिक, माउस इव्हेंट्स (हॉवर, मूव्ह इ.), स्क्रोलिंग, सानुकूल जावास्क्रिप्ट कोड एक्झिक्यूशन आणि बरेच काही यासह ब्राउझर नियंत्रणासारखे कठपुतळी.
   4. रॉ-ऑप्टिमाइझ केलेले शुद्ध गंभीर CSS आउटपुट.

2. अबोव्ह-द-फोल्ड ऑप्टिमायझर

   1. गंभीर CSS ची मूळ CSS शी तुलना करा.
   2. सानुकूल करण्यायोग्य पिक्सेल मापन शासक.

3. प्रगत ऑप्टिमायझेशन साधने

   1. स्टाइलशीटमधून गंभीर CSS काढण्यासाठी न वापरलेले CSS रीमूव्हर.
   2. व्यावसायिक CSS कॉम्प्रेशन (मिनिफाय) आणि ऑप्टिमायझेशन सॉफ्टवेअर.
   3. तुटलेली CSS दुरुस्ती. विकृत CSS निराकरण करण्यासाठी एक साधन.
   4. ऑटोप्रिफिक्सर. CSS वर ब्राउझर उपसर्ग लागू करण्यासाठी एक साधन.
   5. CSS आकडेवारी आणि विश्लेषण.
   6. CSS सुशोभित करा.
   7. प्रगत CSS लिंट.
   8. डुप्लिकेट CSS रीमूव्हर.
   9. प्रगत CSS संपादक ऑप्टिमायझेशन टिपांसह CSS लिंटशी कनेक्ट केलेले आहे.

कसे वापरायचे

पायरी 1: पृष्ठावर ब्राउझर विजेट सुरू करा

ज्या पृष्ठासाठी तुम्हाला गंभीर CSS काढायचे आहे त्या पृष्ठावर नेव्हिगेट करा आणि ब्राउझर विजेट सुरू करा. स्थापना सूचनांसाठी येथे क्लिक करा .

पायरी 2: गंभीर CSS व्युत्पन्न करा

हेडरमधील टूल्स टॅबद्वारे गंभीर CSS जनरेटरमध्ये प्रवेश केला जाऊ शकतो.

दस्तऐवजीकरणातील पर्याय वापरून JSON कॉन्फिगर करा.

पायरी 3: परिणाम ऑप्टिमाइझ करा

गंभीर CSS जनरेटरचे आउटपुट कच्चे आहे आणि पुढील ऑप्टिमायझेशन जसे की कॉम्प्रेशन आवश्यक आहे.

एडिटर मेनूमधील ऑप्टिमाइझ बटण प्रगत कोड ऑप्टिमायझेशन आणि कॉम्प्रेशन लागू करण्यास सक्षम करते.

दस्तऐवजीकरण

गंभीर CSS जनरेटर

गंभीर 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": "सीएसएस शोधासाठी व्ह्यूपोर्ट सेट करा."
    },
    {
      "wait": 1000,
      "notes": "व्ह्यूपोर्ट रेंडर करण्यासाठी 1000ms ची प्रतीक्षा करा."
    },
    {
      "run": true,
      "notes": "गंभीर CSS जनरेटर चालवा (फोल्ड-वर CSS गणना)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-मेनू DOM घटकावर नवीन MouseEvent फायर करा."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "स्क्रिप्ट कार्यान्वित करा, या प्रकरणात पुढील व्ह्यूपोर्ट सुरू ठेवण्यापूर्वी मेनू बंद करा."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

गंभीर CSS जनरेटरच्या UI क्रिया

गंभीर CSS जनरेटर Puppeteer सारखे ब्राउझर नियंत्रण प्रदान करतो. ui_actions पॅरामीटर UI क्रिया ऑब्जेक्टसह अॅरे स्वीकारतो जे कालक्रमानुसार UI स्थितीतील बदल परिभाषित करते.

{
  "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": "सीएसएस शोधासाठी व्ह्यूपोर्ट सेट करा."
    },
    {
      "wait": 1000,
      "notes": "व्ह्यूपोर्ट रेंडर करण्यासाठी 1000ms ची प्रतीक्षा करा."
    },
    {
      "run": true,
      "notes": "गंभीर CSS जनरेटर चालवा (फोल्ड-वर CSS गणना)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-मेनू DOM घटकावर नवीन MouseEvent फायर करा."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "स्क्रिप्ट कार्यान्वित करा, या प्रकरणात पुढील व्ह्यूपोर्ट सुरू ठेवण्यापूर्वी मेनू बंद करा."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

न वापरलेले CSS रीमूव्हर

न वापरलेले CSS रिमूव्हर गंभीर CSS एक्स्ट्रॅक्टर सारखेच सॉफ्टवेअर वापरतो आणि जवळजवळ समान कॉन्फिगरेशन पर्याय स्वीकारतो, ज्यात UI क्रियांद्वारे Puppeteer-सारखे ब्राउझर नियंत्रण समाविष्ट आहे. साधन न वापरलेले CSS काढण्यास देखील सक्षम करते.

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

{
  "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 रीमूव्हर दोन स्टाइलशीटची तुलना करणे आणि डुप्लिकेट CSS काढणे किंवा काढणे शक्य करते.

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

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

दुसरे इनपुट फील्ड स्टाइलशीट इंडेक्स क्रमांक स्वीकारते. तुम्ही सेटिंग्ज टॅबवरील स्टाइलशीट विहंगावलोकनवर स्टाइलशीटची अनुक्रमणिका शोधू शकता.

स्टाइलशीट अनुक्रमणिका विहंगावलोकन

तुम्ही स्टाईलशीट अपलोड करू शकता किंवा नवीन स्टाइलशीट तयार करून बाह्य URL वरून स्टाइलशीटची तुलना करू शकता. त्यानंतर तुम्ही URL आयात करू शकता किंवा स्टाईलशीट अपलोड करू शकता आणि डुप्लिकेट CSS रीमूव्हरमध्ये नवीन स्टाइलशीटमधून अनुक्रमणिका वापरू शकता.

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

कॉन्फिगर केल्यावर, डुप्लिकेट CSS रिमूव्हर सुरू करण्यासाठी बटण दाबा. CSS टिप्पणी परिणामी कमी झालेल्या CSS ची मूलभूत आकडेवारी प्रदर्शित करेल.

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