সমালোচনামূলক 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);

উপরে-ভাঁজ অপ্টিমাইজার

সমালোচনামূলক সিএসএস জেনারেটর এবং ভাঁজের উপরে অপ্টিমাইজার

ক্রিটিকাল সিএসএস জেনারেটর Google-এর মূল ওয়েব ভাইটালগুলিকে ন্যূনতম CSS-এর ভিত্তিতে সম্পূর্ণরূপে অব্যবহৃত-সিএসএস জরিমানা সরিয়ে ফেলার সমাধান করতে সক্ষম করে।

বৈশিষ্ট্য

1. উন্নত সমালোচনামূলক CSS জেনারেটর

   1. পোস্টসিএসএস- এর উপর ভিত্তি করে কাস্টম তৈরি করা হয়েছে, সেরা সিএসএস পার্সারগুলির মধ্যে একটি।
   2. প্রতিক্রিয়াশীল সমালোচনামূলক CSS- এর জন্য একাধিক-ভিউপোর্ট (ডেস্কটপ + মোবাইল) সমর্থন করে।
   3. ক্লিক, মাউস ইভেন্ট (হোভার, সরানো ইত্যাদি), স্ক্রোলিং, কাস্টম জাভাস্ক্রিপ্ট কোড এক্সিকিউশন এবং আরও অনেক কিছু সহ ব্রাউজার নিয়ন্ত্রণের মতো পুতুল।
   4. কাঁচা অ-অপ্টিমাইজ করা বিশুদ্ধ সমালোচনামূলক CSS আউটপুট।

2. উপরে-ভাঁজ অপ্টিমাইজার

   1. মূল CSS এর সাথে সমালোচনামূলক CSS তুলনা করুন।
   2. কাস্টমাইজযোগ্য পিক্সেল পরিমাপ শাসক.

3. উন্নত অপ্টিমাইজেশান টুল

   1. স্টাইলশীট থেকে সমালোচনামূলক CSS সরাতে অব্যবহৃত CSS রিমুভার।
   2. পেশাদার সিএসএস কম্প্রেশন (মিনিফাই) এবং অপ্টিমাইজেশান সফটওয়্যার।
   3. ভাঙা CSS মেরামত. বিকৃত CSS ঠিক করার একটি টুল।
   4. অটোপ্রিফিক্সার CSS-এ ব্রাউজার উপসর্গ প্রয়োগ করার একটি টুল।
   5. CSS পরিসংখ্যান এবং বিশ্লেষণ।
   6. সিএসএস সুন্দর করে।
   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 জেনারেটরের আউটপুট কাঁচা এবং আরও অপ্টিমাইজেশন যেমন কম্প্রেশন প্রয়োজন।

সম্পাদক মেনুতে অপ্টিমাইজ বোতামটি উন্নত কোড অপ্টিমাইজেশান এবং কম্প্রেশন প্রয়োগ করতে সক্ষম করে।

ডকুমেন্টেশন

সমালোচনামূলক 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-মেনু DOM এলিমেন্টে নতুন মাউস ইভেন্ট ফায়ার করুন।"
    },
    {
      "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-মেনু DOM এলিমেন্টে নতুন মাউস ইভেন্ট ফায়ার করুন।"
    },
    {
      "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 রিমুভার

ডুপ্লিকেট সিএসএস রিমুভার দুটি স্টাইলশীট তুলনা করা এবং ডুপ্লিকেট সিএসএস অপসারণ বা নিষ্কাশন করা সম্ভব করে তোলে।

উদাহরণ কনফিগারেশন দেখান

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

দ্বিতীয় ইনপুট ক্ষেত্রটি স্টাইলশীট সূচক নম্বর গ্রহণ করে। আপনি সেটিংস ট্যাবে স্টাইলশীট ওভারভিউতে একটি স্টাইলশীটের সূচী খুঁজে পেতে পারেন।

স্টাইলশীট সূচক ওভারভিউ

আপনি একটি স্টাইলশীট আপলোড করতে পারেন বা একটি নতুন স্টাইলশীট তৈরি করে বহিরাগত URL(গুলি) থেকে স্টাইলশীট তুলনা করতে পারেন৷ তারপরে আপনি URL গুলি আমদানি করতে পারেন বা স্টাইলশীটগুলি আপলোড করতে পারেন এবং সদৃশ CSS রিমুভারে নতুন স্টাইলশীট থেকে সূচকটি ব্যবহার করতে পারেন৷

স্টাইলশীট আমদানি বা আপলোড করুন

কনফিগার হয়ে গেলে, ডুপ্লিকেট CSS রিমুভার শুরু করতে বোতাম টিপুন। একটি CSS মন্তব্য ফলে কমে যাওয়া CSS এর মৌলিক পরিসংখ্যান প্রদর্শন করবে।

ডুপ্লিকেট CSS রিমুভারের ফলাফল