முக்கியமான CSS ஜெனரேட்டர்

மேம்பட்ட முக்கியமான CSS ஜெனரேட்டருக்கான இலவச உலாவி-விட்ஜெட் மற்றும் மேல்-மடிப்பு உகப்பாக்கி . சாத்தியமான குறைந்தபட்ச CSS உடன் பிக்சல் சரியான முடிவை அடைவதற்கான ஒரு கருவி.

சிறந்த முக்கியமான CSS முடிவு உண்மையான உலாவியில் அடையப்படுகிறது.

முக்கியமான CSS பிரித்தெடுக்கப்பட வேண்டிய பக்கத்தில் உலாவி விட்ஜெட் செயல்படுத்தப்படுகிறது, எனவே அசல் CSS சூழலுக்கு முழு சொந்த அணுகலைக் கொண்டுள்ளது.

நீங்கள் ஸ்டைல்ஷீட்கள் அல்லது இன்லைன் ஸ்டைல்ஷீட் உறுப்புகளில் இருந்து முக்கியமான CSS ஐ பிரித்தெடுக்கலாம். பக்கங்களுக்கு இடையே பகிரக்கூடிய முக்கியமான CSS ஐ உருவாக்க இது எளிது.

உலாவி விட்ஜெட்டில் ஸ்டைல்ஷீட்களில் இருந்து முக்கியமான CSS ஐ அகற்றும் அம்சம் உள்ளது.

கருவி உளவு இல்லாதது. Google Analytics அல்லது கண்காணிப்பு இல்லை. பயன்படுத்த பாதுகாப்பானது மற்றும் சேவை பணியாளர் தற்காலிக சேமிப்பு மூலம் உள்நாட்டில் பயன்படுத்தலாம்.

The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.

நிறுவு

விட்ஜெட்டை நிறுவ, இந்த இணைப்பை இழுக்கவும்🗔 முக்கியமான-சிஎஸ்எஸ் அல்லது கீழே உள்ள குறியீட்டை நகலெடுத்து ஒட்டவும்.

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);

அபோவ்-தி-ஃபோல்ட் ஆப்டிமைசர்

முக்கியமான CSS ஜெனரேட்டர் மற்றும் மேல்-தி-மடிப்பு உகப்பாக்கி

கிரிடிகல் CSS ஜெனரேட்டர், Google இன் முக்கிய வலை முக்கியத்துவத்தை குறைந்தபட்ச CSS இன் அடிப்படையில் மட்டுமே பயன்படுத்தப்படாத CSS அபராதத்தை அகற்ற உதவுகிறது.

அம்சங்கள்

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: ஒரு பக்கத்தில் உலாவி விட்ஜெட்டைத் தொடங்கவும்

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

படி 2: முக்கியமான CSS ஐ உருவாக்கவும்

முக்கியமான CSS ஜெனரேட்டரை தலைப்பில் உள்ள கருவிகள் தாவல் வழியாக அணுகலாம்.

Configure the JSON using the options in the the documentation.

படி 3: முடிவை மேம்படுத்தவும்

முக்கியமான CSS ஜெனரேட்டரின் வெளியீடு கச்சா மற்றும் சுருக்கம் போன்ற கூடுதல் மேம்படுத்தல் தேவைப்படுகிறது.

எடிட்டர் மெனுவில் உள்ள Optimize பட்டன் மேம்பட்ட குறியீடு மேம்படுத்தல் மற்றும் சுருக்கத்தைப் பயன்படுத்த உதவுகிறது.

ஆவணப்படுத்தல்

முக்கியமான 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": "மேலே உள்ள CSS கண்டுபிடிப்புக்கான காட்சிப் பகுதியை அமைக்கவும்."
    },
    {
      "wait": 1000,
      "notes": "வியூபோர்ட்டை வழங்குவதற்கு 1000ms காத்திருக்கவும்."
    },
    {
      "run": true,
      "notes": "முக்கியமான CSS ஜெனரேட்டரை இயக்கவும் (மடிப்புக்கு மேல் CSS கணக்கீடு)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-menu 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": "மேலே உள்ள CSS கண்டுபிடிப்புக்கான காட்சிப் பகுதியை அமைக்கவும்."
    },
    {
      "wait": 1000,
      "notes": "வியூபோர்ட்டை வழங்குவதற்கு 1000ms காத்திருக்கவும்."
    },
    {
      "run": true,
      "notes": "முக்கியமான CSS ஜெனரேட்டரை இயக்கவும் (மடிப்புக்கு மேல் CSS கணக்கீடு)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "a.nav-menu 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 நீக்கியின் முடிவு