This websites uses cookies for Google Analytics.

Due to privacy law you cannot use this website without accepting the use of these cookies.

View Privacy Policy

By accepting you give consent to Google Analytics tracking cookies. You can undo this consent by clearing the cookies in your browser.

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


ইনস্টল করুন

উইজেটটি ইনস্টল করতে, এই লিঙ্ক টানুন🗔 সমালোচনামূলক-সিএসএস বা নীচের কোডটি অনুলিপি এবং পেস্ট করুন৷

add widget to bookmarks
ঐচ্ছিক Google CDN সুরক্ষিত ডোমেন x.pagespeed.pro এর জন্য পরিষেবা কর্মী এবং ক্যাশে-এপিআই অনুমোদন করুন ডোমেন জুড়ে সেটিংস বজায় রাখতে এবং উইজেটটি অফলাইনে বা localhost ব্যবহার করতে।

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

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

ক্রিটিকাল সিএসএস জেনারেটর 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
CSS @ নিয়মগুলির একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) জোর করে সমালোচনামূলক CSS-এ অন্তর্ভুক্ত করতে।
["media", "charset", "/rule(.*)/i"]
atRulesToRemove
CSS @ নিয়মগুলির একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) জোরপূর্বক CSS থেকে সরানোর জন্য।
["media", "charset", "/rule(.*)/i"]
selectorsToKeep
CSS নির্বাচকদের একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) জোরপূর্বক সমালোচনামূলক CSS-এ অন্তর্ভুক্ত করতে।
[".selector", "/\\.selector(.*)/i"]
selectorsToRemove
CSS নির্বাচকদের একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) ক্রিটিক্যাল সিএসএস থেকে জোরপূর্বক অপসারণ করতে।
[".selector", "/\\.selector(.*)/i"]
propertiesToKeep
CSS ঘোষণার একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) জোরপূর্বক সমালোচনামূলক CSS-এ অন্তর্ভুক্ত করা। মান মেলানোর জন্য, সূচক 0-এ ঘোষণার স্ট্রিং বা regex এবং সূচক 1-এ মান স্ট্রিং বা regex সহ একটি 2য় স্তরের অ্যারে ব্যবহার করুন।
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
propertiesToRemove
CSS ঘোষণার একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) জোরপূর্বক সমালোচনামূলক CSS থেকে সরানোর জন্য। মান মেলানোর জন্য, সূচক 0-এ ঘোষণার স্ট্রিং বা regex এবং সূচক 1-এ মান স্ট্রিং বা regex সহ একটি 2য় স্তরের অ্যারে ব্যবহার করুন।
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
pseudoSelectorsToKeep
CSS ছদ্ম নির্বাচকদের একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) জোর করে সমালোচনামূলক CSS-এ অন্তর্ভুক্ত করা।
[":before", "/:nth-child(.*)/i"]
pseudoSelectorsToRemove
CSS ছদ্ম নির্বাচকদের একটি অ্যারে (স্ট্রিং বা রেগুলার এক্সপ্রেশন) ক্রিটিক্যাল সিএসএস থেকে জোরপূর্বক অপসারণ করতে।
[":before", "/:nth-child(.*)/i"]
maxElementsToCheckPerSelector
ভাঁজ দৃশ্যমানতার উপরে চেক করার জন্য উপাদানগুলির সর্বাধিক পরিমাণ। এই সেটিং জেনারেটরের গতিকে প্রভাবিত করতে পারে।
false or 100
maxEmbeddedBase64Length
ক্রিটিকাল সিএসএস-এ অন্তর্ভুক্ত করার জন্য বেস64 এনকোড করা ইনলাইন ইমেজের বাইটে সর্বাধিক আকার।
1000
strictParser
ডিফল্টরূপে, সিএসএস ফল্ট সহনশীল পোস্টসিএসএস সেফ পার্সার ব্যবহার করে পার্স করা হয় যা স্বয়ংক্রিয়ভাবে সিনট্যাক্স ত্রুটিগুলি ঠিক করে। এই সেটিংটি কঠোর পার্সার ব্যবহার করতে সক্ষম করে।
true
ui_actions
ভাঁজের উপরে CSS কোড আবিষ্কার করতে UI স্টেটে সঞ্চালনের জন্য কর্মের একটি বিন্যাস। নীচে UI অ্যাকশন ডকুমেন্টেশন দেখুন।
[{"viewport":"360x640"}, {"run": true}]

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

উদাহরণ সমালোচনামূলক 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

বর্তমান UI অবস্থাতে গুরুত্বপূর্ণ CSS জেনারেটর চালান। উপরের ভাঁজের নতুন CSS কোড আবিষ্কার করার জন্য প্রতিবার UI অবস্থা পরিবর্তিত হলে এই ক্রিয়াটি পুনরাবৃত্তি করতে হবে।

{
  "run": true
}

wait

পরবর্তী ক্রিয়াটি চালিয়ে যাওয়ার আগে কয়েক মিলিসেকেন্ডের জন্য অপেক্ষা করুন৷

{
  "wait": 1000
}

viewport

ভিউপোর্ট সাইজ সেট করুন।

{
  "viewport": "1300x900"
}

scroll

ভিউপোর্ট স্ক্রোল করুন। বিকল্পটি একটি সাংখ্যিক মান (উপর থেকে পিক্সেল), একটি শতাংশ স্ট্রিং ( 50% ) বা পিক্সেলে [x,y] অবস্থান সহ একটি অ্যারে গ্রহণ করে।

{
  "scroll": 400
}

event

একটি ঐচ্ছিক DOM সিলেক্টরে একটি ব্রাউজার ইভেন্ট ( new Event() ) ট্রিগার করুন।

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

mouseevent

একটি ঐচ্ছিক DOM সিলেক্টরে একটি মাউস ইভেন্ট ( new MouseEvent() ) ট্রিগার করুন। ক্রিয়াটি MouseEvent বিকল্পগুলির সাথে একটি mouseEventInit প্যারামিটার গ্রহণ করে যার মধ্যে x,y স্থানাঙ্ক সেট করার ক্ষমতা রয়েছে। যখন mouseEventInit বাদ দেওয়া হয়, তখন ডিফল্ট বিকল্পগুলি হয় {"bubbles": true,"cancelable": true}

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

script

জাভাস্ক্রিপ্ট কোড মূল্যায়ন. এই ক্রিয়াটি একটি পৃষ্ঠায় জাভাস্ক্রিপ্ট কোড কার্যকর করতে সক্ষম করে, যেমন আরও UI অবস্থা পরিবর্তন করার আগে পপআপগুলি বন্ধ করা।

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

fn

একটি জাভাস্ক্রিপ্ট ফাংশন চালান। এই ক্রিয়াটি একটি পূর্ব-কনফিগার করা জাভাস্ক্রিপ্ট ফাংশন কার্যকর করতে সক্ষম করে। অতিরিক্ত বিকল্প "promise":true একটি প্রতিশ্রুতি আশা করতে সক্ষম করে এবং পরবর্তী পদক্ষেপটি চালিয়ে যাওয়ার আগে প্রতিশ্রুতির সমাধানের জন্য অপেক্ষা করতে সক্ষম করে।

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

notes

প্রতিটি কর্ম বস্তু একটি notes প্যারামিটার গ্রহণ করে যা বর্ণনামূলক পাঠ্য যোগ করতে ব্যবহার করা যেতে পারে।

{
  "script": "add_to_cart();",
  "notes": "ব্যক্তিগত ব্যবহারের জন্য UI কর্মের বর্ণনা"
}

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

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 বের করতেও সক্ষম করে।

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

অব্যবহৃত 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 রিমুভারের উদাহরণ কনফিগারেশন

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

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

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

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

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

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

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