সমালোচনামূলক 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.
ইনস্টল করুন
উইজেটটি ইনস্টল করতে,
বা নীচের কোডটি অনুলিপি এবং পেস্ট করুন৷x.pagespeed.pro
এর জন্য পরিষেবা কর্মী এবং ক্যাশে-এপিআই অনুমোদন করুন ডোমেন জুড়ে সেটিংস বজায় রাখতে এবং উইজেটটি অফলাইনে বা localhost
ব্যবহার করতে।উপরে-ভাঁজ অপ্টিমাইজার
সমালোচনামূলক সিএসএস জেনারেটর এবং ভাঁজের উপরে অপ্টিমাইজার
ক্রিটিকাল সিএসএস জেনারেটর Google-এর মূল ওয়েব ভাইটালগুলিকে ন্যূনতম CSS-এর ভিত্তিতে সম্পূর্ণরূপে অব্যবহৃত-সিএসএস জরিমানা সরিয়ে ফেলার সমাধান করতে সক্ষম করে।
বৈশিষ্ট্য
উন্নত সমালোচনামূলক CSS জেনারেটর
- পোস্টসিএসএস- এর উপর ভিত্তি করে কাস্টম তৈরি করা হয়েছে, সেরা সিএসএস পার্সারগুলির মধ্যে একটি।
- প্রতিক্রিয়াশীল সমালোচনামূলক CSS- এর জন্য একাধিক-ভিউপোর্ট (ডেস্কটপ + মোবাইল) সমর্থন করে।
- ক্লিক, মাউস ইভেন্ট (হোভার, সরানো ইত্যাদি), স্ক্রোলিং, কাস্টম জাভাস্ক্রিপ্ট কোড এক্সিকিউশন এবং আরও অনেক কিছু সহ ব্রাউজার নিয়ন্ত্রণের মতো পুতুল।
- কাঁচা অ-অপ্টিমাইজ করা বিশুদ্ধ সমালোচনামূলক CSS আউটপুট।
উপরে-ভাঁজ অপ্টিমাইজার
- মূল CSS এর সাথে সমালোচনামূলক CSS তুলনা করুন।
- কাস্টমাইজযোগ্য পিক্সেল পরিমাপ শাসক.
উন্নত অপ্টিমাইজেশান টুল
- স্টাইলশীট থেকে সমালোচনামূলক CSS সরাতে অব্যবহৃত CSS রিমুভার।
- পেশাদার সিএসএস কম্প্রেশন (মিনিফাই) এবং অপ্টিমাইজেশান সফটওয়্যার।
- ভাঙা CSS মেরামত. বিকৃত CSS ঠিক করার একটি টুল।
- অটোপ্রিফিক্সার CSS-এ ব্রাউজার উপসর্গ প্রয়োগ করার একটি টুল।
- CSS পরিসংখ্যান এবং বিশ্লেষণ।
- সিএসএস সুন্দর করে।
- উন্নত CSS লিন্ট।
- ডুপ্লিকেট CSS রিমুভার।
- উন্নত 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 জেনারেটর নিম্নলিখিত বিকল্পগুলি গ্রহণ করে।
উদাহরণ সমালোচনামূলক 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 রিমুভারের ফলাফল