কোড কভারেজ প্রতিটি পঠনযোগ্য স্টাইলশীটে প্রতিটি নির্বাচককে লাইভ পৃষ্ঠার বিপরীতে পরীক্ষা করে, যাতে আপনি দেখতে পারেন কোন CSS নিয়মগুলি বর্তমানে কিছুই মেলে না, প্রতিটি ফাইল কত বাইট নষ্ট করে এবং কোন স্ক্রিপ্টগুলি প্রথম পেইন্ট ধরে রাখে।
স্টাইলশীটগুলি কেবল বৃদ্ধি পায়। একটি থিম আপনার কাছে নেই এমন পৃষ্ঠাগুলির জন্য নিয়মের সাথে আসে, একটি ফ্রেমওয়ার্ক শিপ কম্পোনেন্ট যা আপনি কখনই ব্যবহার করেন না, এবং তিনটি রিডিজাইন পরে কেউ নিশ্চিত নয় যে ফাইলের অর্ধেকটি লোড-ভারিং। ফলাফল হল CSS যা প্রতিটি ভিজিটর ব্যান্ডউইথ খরচ করে এবং পৃষ্ঠাটি ব্যবহার করতে পারে না এমন নিয়মগুলি সরবরাহ করতে সময় রেন্ডার করে।
কোড কভারেজ সরাসরি পরিমাপ করে। এটি প্রতিটি স্টাইলশীটের প্রতিটি নিয়ম মেনে চলে যা ব্রাউজার এটিকে পড়তে দেবে — মিডিয়া ক্যোয়ারী, @supports এবং @লেয়ার ব্লকের ভিতরে থাকা নিয়মগুলি সহ — এবং প্রতিটি নির্বাচককে লাইভ DOM-এর বিরুদ্ধে পরীক্ষা করে। একটি নিয়ম যা এই মুহূর্তে কিছুই মেলে না, অব্যবহৃত হিসাবে রিপোর্ট করা হয়, প্রতি ফাইলে, শতাংশ সহ, নষ্ট বাইট এবং নির্বাচকদের সম্পূর্ণ তালিকা যা আপনি প্রসারিত এবং অনুলিপি করতে পারেন।
এটা সুস্পষ্ট ফাঁদ সম্পর্কে সতর্ক. ছদ্ম-উপাদান এবং রাষ্ট্রীয় ছদ্ম-শ্রেণিগুলি মিলে যাওয়ার আগে ছিনতাই করা হয়, তাই একটি :hover বা ::before নিয়ম ভুলভাবে লেখা বন্ধ করার পরিবর্তে এর ভিত্তি নির্বাচক বিদ্যমান কিনা তা বিচার করা হয়। CORS শিরোনাম ছাড়া ক্রস-অরিজিন পরিবেশিত স্টাইলশীটগুলি কোনও স্ক্রিপ্ট দ্বারা পড়া যায় না, তাই সেগুলিকে নিঃশব্দে নিখুঁত হিসাবে গণনা করার পরিবর্তে অপঠিত হিসাবে পতাকাঙ্কিত করা হয়। এবং যেহেতু স্ক্যানটি সেই মুহুর্তে পৃষ্ঠাটিকে প্রতিফলিত করে, মেনু, ট্যাব এবং মডেলগুলির নিয়ম যা এখনও খোলা হয়নি সেগুলি অব্যবহৃত দেখাবে — তাই সেগুলি খুলুন এবং আপনি কিছু মুছে ফেলার আগে পুনরায় স্ক্যান করুন টিপুন৷
জাভাস্ক্রিপ্ট ট্যাব একটি ভিন্ন প্রশ্নের উত্তর দেয়: ওজন এবং ব্লকিং। এটি পৃষ্ঠার লোড হওয়া প্রতিটি স্ক্রিপ্ট তার স্থানান্তরের আকার, ডাউনলোডের সময় এবং এটি অ্যাসিঙ্ক, বিলম্বিত, একটি মডিউল, গতিশীলভাবে লোড করা বা প্রথম পেইন্ট ধরে রাখা, তারপর মোট কত বাইট ব্লক করছে তা সংগ্রহ করে। এটি ইচ্ছাকৃতভাবে এক্সিকিউশন কভারেজ হিসাবে বিক্রি করা হয় না — কোন জাভাস্ক্রিপ্ট লাইনগুলি চলেছিল তা জানার জন্য Chrome-এর ডিবাগার API প্রয়োজন, যা DevSuite Pro অনুরোধ করে না, তাই এখানে কিছুই লাইন-লেভেল রিপোর্ট হওয়ার ভান করে না।
প্রতিটি পঠনযোগ্য স্টাইলশীটের প্রতিটি নিয়ম লাইভ DOM-এর বিরুদ্ধে পরীক্ষা করা হয়, যার মধ্যে রয়েছে মিডিয়া ক্যোয়ারী, @supports এবং @layer ব্লক - ফাইলের নাম বা আকার থেকে অনুমান করা হয় না।
প্রতিটি স্টাইলশীট একটি অব্যবহৃত শতাংশ, একটি ব্যবহৃত-বনাম-অব্যবহৃত নিয়ম গণনা এবং নষ্ট বাইটের সংখ্যা পায়, যাতে সবচেয়ে খারাপ অপরাধী শীর্ষে থাকে।
নির্বাচকদের পড়ার জন্য যেকোন ফাইল প্রসারিত করুন যা কিছুই মেলে না, তারপর আপনার সম্পাদকের মাধ্যমে কাজ করতে বা সতীর্থের হাতে দেওয়ার জন্য সেগুলিকে একটি CSS ব্লক হিসাবে অনুলিপি করুন।
ছদ্ম-উপাদান এবং রাষ্ট্রীয় ছদ্ম-শ্রেণি যেমন :হোভার এবং :ফোকাস-ভিথিন ম্যাচ করার আগে ছিনতাই করা হয়, তাই ইন্টারেক্টিভ নিয়মগুলিকে লেখা বন্ধ না করে ন্যায্যভাবে বিচার করা হয়।
প্রতিটি স্ক্রিপ্ট তার আকার, ডাউনলোডের সময় এবং এটি অ্যাসিঙ্ক, স্থগিত, একটি মডিউল, গতিশীলভাবে লোড করা বা প্রথম পেইন্টকে ব্লক করা - এবং মোট ব্লকিং বাইট সহ তালিকাভুক্ত।
অপঠিত ক্রস-অরিজিন স্টাইলশীটগুলি স্কোর করার পরিবর্তে পতাকাঙ্কিত করা হয়, এবং JS ট্যাব স্পষ্টভাবে বলে যে এটি ওজন পরিমাপ করে, কোন লাইনগুলি কার্যকর করা হয়েছে তা নয়। কোন উদ্ভাবিত সংখ্যা নেই।
একটি ক্রয়কৃত থিম কয়েক ডজন ডেমো লেআউটের জন্য CSS পাঠায়। দেখুন কতটা আপনার সাইট কখনই ব্যবহার করে না এবং অনুমান করার পরিবর্তে প্রমাণ সহ ফাইলটি কেটে ফেলুন।
একটি বাস্তব টেমপ্লেটে একটি CSS ফ্রেমওয়ার্ক কতটা টিকে আছে এবং আপনার পরিস্কার বা ট্রি-কাঁপানো কনফিগারেশন আপনি যা মনে করেন তা করছে কিনা তা পরীক্ষা করুন।
রেন্ডারিং ধরে রাখা স্ক্রিপ্টগুলিকে তাদের আকার সহ তালিকাভুক্ত করুন এবং শীঘ্রই স্ক্রিনে সামগ্রী পেতে কী স্থগিত, বিভক্ত বা ড্রপ করতে হবে তা স্থির করুন৷
সংখ্যার সাথে চলুন: কোন ফাইলগুলি সবচেয়ে বেশি বাইট নষ্ট করে, জাভাস্ক্রিপ্ট কতটা ব্লক করছে এবং যেখানে কাজের প্রথম ঘন্টা সবচেয়ে বেশি অর্থ প্রদান করে।
আপনি তৈরি করেননি এমন একটি সাইট দখল করে নিয়ে, এর CSS এবং জাভাস্ক্রিপ্ট এখনও কতটা জায়গা অর্জন করে তা দ্রুত পড়ুন।
DevSuite Pro ডকে কোড কভারেজ আইকনে ক্লিক করুন। স্ক্যানটি অবিলম্বে চলে এবং রিপোর্ট করে যে এটি কতগুলি নিয়ম পরীক্ষা করেছে এবং সেগুলির কোনটি অব্যবহৃত রয়েছে৷
উপরের সারিটি আপনাকে স্টাইলশীট গণনা, মোট নিয়ম, অব্যবহৃত শতাংশ এবং নষ্ট বাইট দেয়। নিচের ফাইলগুলো কতটুকু নষ্ট করে তার দ্বারা অর্ডার করা হয়।
কোন ফাইলে অব্যবহৃত নির্বাচক দেখান ক্লিক করুন এই পৃষ্ঠায় কোন নিয়মের সাথে মিল নেই তা পড়তে।
মেনু, ট্যাব, অ্যাকর্ডিয়ন এবং মডেল খুলুন, তারপর পুনরায় স্ক্যান টিপুন। যে নিয়মগুলির উপাদানগুলি শুধুমাত্র সেই রাজ্যগুলিতে বিদ্যমান সেগুলি অব্যবহৃত থেকে ব্যবহৃত হয়ে যাবে — মুছে ফেলার আগে সর্বদা এটি করুন৷
অনুলিপি অব্যবহৃত নির্বাচকদের মাধ্যমে কাজ করার জন্য আপনাকে একটি CSS ব্লক দেয়; রপ্তানি JSON একটি টিকিট বা একটি অডিট নথির জন্য JavaScript ইনভেন্টরি সহ সম্পূর্ণ রিপোর্ট কপি করে।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।
