নির্ধারণ করুন ক্রিটিকাল CSS কি সমাধান করার যোগ্য সমস্যা
শুরু করুন প্রমাণ থেকে, অডিট লেবেল থেকে নয়। একটি প্রায়োরিটি পেজের কোল্ড-ক্যাশ লোড রেকর্ড করুন প্রতিনিধিত্বকারী মোবাইল ও ডেস্কটপ প্রোফাইলগুলোতে। ওয়াটারফল ও ট্রেস পরীক্ষা করুন: কোনো স্টাইলশিট কি প্রথম কন্টেন্টকে বিলম্ব করে, এবং সেটি কি প্রভাব পড়ার মতো পর্যাপ্ত বড়? DevTools-এর Coverage দেখায় এক সেশনেই ব্যবহৃত CSS — এটি প্রতিটি রুট বা স্টেট ধরে না।
কম মেইনটেন্যান্স কাজ আগে চেষ্টা করুন: অপ্রয়োজনীয় রুল সরান, আউটপুট মিনিফাই ও কম্প্রেস করুন, রুট-নির্দিষ্ট CSS কেবল যেখানে দরকার সেখানে লোড করুন, এবং সাধারণ CSS @import চেইন এড়ান। web.dev এগুলোকে উন্নত কৌশল হিসেবে উল্লেখ করে।
একটি পরিমাপকৃত প্রথম-রেন্ডার বিলম্ব CSS-সংক্রান্ত, কোল্ড ভিজিট গুরুত্বপূর্ণ, এবং ইনিশিয়াল লেআউট বজায় রাখা সম্ভব।
যদি সার্ভার ডিলে, ইমেজ, ফন্ট, জাভাস্ক্রিপ্ট, বা ইতিমধ্যেই ছোট স্টাইলশিটই বটলনেক হয়, তাহলে ইনলাইন CSS সম্ভবত সাহায্য করবে না।
ইনিশিয়াল ভিউপোর্টকে একটি টেস্ট ম্যাট্রিক্স হিসেবে সংজ্ঞায়িত করুন
ইনিশিয়াল ভিউপোর্ট, কখনো কখনো 'অ্যাবাভ-দ্য-ফোল্ড' বলা হয়, হলো ভিজিটর যে অংশ স্ক্রল করার আগে দেখে। এর কোনো একক উচ্চতা নেই: ডিভাইস, জুম, ভাষা, কুকি, এবং কন্টেন্ট ভ্যারিয়েন্টগুলো এটি পরিবর্তন করে। একটি ডেস্কটপ স্ক্রিনশট ফোন বা অনুবাদের হেডলাইন মিস করতে পারে।
নামকরা প্রোফাইল ব্যবহার করুন। সংকীর্ণ ও বিস্তৃত লেআউট, প্রধান ব্রেকপয়েন্ট, ভিন্ন লগইন স্ট্রাকচার, এবং যে কোনো সম্মতি ব্যানার, প্রোমোশন, রক্ষণাবেক্ষণ বার্তা, বা ভ্যালিডেশন এরর যা পেজের উপরের অংশে আসতে পারে তা অন্তর্ভুক্ত করুন।
টেমপ্লেট, ভিউপোর্ট, লোকেল, অথেন্টিকেশন, সম্মতি, এবং টপ-অফ-পেজ ভ্যারিয়েন্টগুলো রেকর্ড করুন যাতে সেগুলি জেনারেট ও টেস্ট করা যায়।
দ্রুত স্ক্রলিং, মেনু, ও ফর্ম ফোকাস পরীক্ষা করুন; একটি ডিফার্ড রুল তখনই অনিরাপদ যদি তার নিয়ন্ত্রণ পুরো CSS এপ্লাই হওয়ার আগে দেখা বা ব্যবহার করা যায়।
একটি সোর্স-অফ-ট্রুথ থেকে ছোট সেট এক্সট্র্যাক্ট করুন
প্রোডাকশন বিল্ড থেকে ক্রিটিকাল CSS জেনারেট করুন। এক্সট্রাকশন ভিউপোর্টে ব্যবহৃত রুলগুলো শনাক্ত করতে পারে, কিন্তু শর্তসাপেক্ষ, ডায়নামিক, ও ট্রানজিশন রুলগুলো রিভিউ করুন। টেমপ্লেটে দ্বিতীয় কোনো ডিজাইন সিস্টেম হাতে কপি করবেন না; কম্পোনেন্ট ও মার্কআপ পরিবর্তনের সাথে এটা ড্রিফট করবে।
আউটপুট জেনারেটেড ও রিলিজের সাথে ভার্সনড রাখুন, যখন সোর্স CSS কর্তৃপক্ষ থাকবে। কেবলই সেই রুলগুলো ইনলাইন করুন যা প্রথম ব্যবহারযোগ্য স্টেটের জন্য আবশ্যক। বড় ইনলাইন ব্লক HTML বিলম্বিত করে এবং পরে পেজগুলিতে বাইরের CSS ক্যাশ থেকে পুনঃব্যবহারযোগ্য হয় না। উন্নতি বলে ডাকা আগে কোল্ড ও ওয়ার্ম ন্যাভিগেশন তুলনা করুন।
কম্প্রেসড ইনলাইন বাইট, বাকি স্টাইলশিট বাইট, এবং ডুপ্লিকেট রুলগুলো ট্র্যাক করুন। একটি ব্লকিং রিকোয়েস্ট কম হওয়াও আচ্ছন্ন লাভ নাও হতে পারে।
এক্সট্রাকশন খালি হলে, ইনলাইন-সাইজ বাজেট অতিক্রম করলে, বা রিভিউ করা বেসলাইন থেকে অপ্রত্যাশিত পরিবর্তন হলে বিল্ডে ফ্ল্যাগ করুন।
বাকি CSS নিরাপভাবে লোড করুন এবং পলিসি সীমাবদ্ধতা সম্মান করুন
বাকি স্টাইলশিটটি আগের কন্টেন্ট ও পরবর্তী স্টেটগুলো সম্পূর্ণ দেখানোর আগে পৌঁছাতে হবে। একটি প্রামাণ্য প্যাটার্নে CSS পিলোড করা হয় style হিসেবে এবং লোড হওয়ার পরে stylesheet-এ পরিবর্তন করা হয়, সাথে নন-জাভাস্ক্রিপ্ট ফ্যালব্যাক। Preload একটি রিসোর্স আগে অনুরোধ করে; এটি CSS প্রয়োগ করে না। অসম্পূর্ণ সেট দৃশ্যগতভাবে রিস্টাইল করতে পারে।
ইনলাইন লোড হ্যান্ডলার ব্যবহারের আগে Content Security Policy (CSP) চেক করুন। web.dev নির্দেশ করে যে পলিসি ইনলাইন onload জাভাস্ক্রিপ্ট নিষোধ করতে পারে, তাই একটি কম্প্যাটিবল লোডার বা অন্য ডিজাইন ব্যবহার করুন। জাভাস্ক্রিপ্ট নিষ্ক্রিয় করে টেস্ট করুন। মিডিয়া-কোয়ালিফায়েড ফাইলগুলি প্রিন্টের মতো সত্যিকারের শর্তসাপেক্ষ স্টাইলের জন্য সহায়ক; একটি মিল না খাওয়া মিডিয়া কুয়েরি রেন্ডার-ব্লক করে না, যদিও এটি ডাউনলোড করতে পারে।
জাভাস্ক্রিপ্ট ছাড়া একটি ভিজিটর পুরো CSS পায় এবং প্রায়োরিটি জার্নি সম্পন্ন করতে পারে কি না যাচাই করুন।
একটি দেরি করা প্রথম-ভিউপোর্ট ফন্ট বা ইমেজ আলাদাভাবে তদন্ত করুন; ক্রিটিকাল CSS তার ফেচ আচরণ ঠিক করে না।
দৃশ্যগত, কার্যকরী এবং ক্যাশ রিগ্রেশন পরীক্ষা করুন
প্রতিটি নামকরা ভিউপোর্ট ও টপ-অফ-পেজ স্টেটে ভিজ্যুয়াল তুলনা ব্যবহার করুন। আনস্টাইল করা টেক্সট, ওভারল্যাপ, লুকানো ন্যাভিগেশন, অনুপস্থিত ফোকাস নির্দেশক, লেআউট শিফট, এবং ডিফার্ড CSS প্রয়োগের সময় স্ন্যাপ পরীক্ষা করুন। কীবোর্ড ন্যাভিগেশন, টাচ পথ, এরর, এবং দ্রুত স্ক্রলিংও এক্সার্সাইজ করুন। যদি কোনো ডিফার্ড রুল কোনো কন্ট্রোলকে ব্যবহারযোগ্য না করে তোলে, সেটি ক্রিটিকাল পাথে থাকা উচিত বা ডিজাইন পরিবর্তন করতে হবে।
কোল্ড এবং ওয়ার্ম ভিজিট টেস্ট করুন। কোল্ড টেস্ট দেখাবে যে অপসারিত CSS অপেক্ষা রেন্ডার উন্নত করছে কি না; ওয়ার্ম টেস্ট দেখায় 반복 ইনলাইন-বাইটের মূল্য। ডেপ্লয়মেন্টের পরে prior cached HTML এবং রিটার্ন টেস্ট করুন। ক্যাশ করা HTML যেগুলো তাদেরকে রিকোয়েস্ট করতে পারে সেই অনুকূল অ্যাসেটগুলো বজায় রাখুন, এবং ফিঙ্গারপ্রিন্ট করা স্টাইলশিট URL ওভাররাইট করবেন না।
প্রথম কন্টেন্ট ও মেইন ভিজিবল কন্টেন্ট তুলনা করুন, তারপর ট্রেস ব্যবহার করে উন্নতি বা রিগ্রেশন ব্যাখ্যা করুন।
ফোকাস, কনট্রাস্ট, মোশন পছন্দ, জুম, এবং পঠনযোগ্য অর্ডার অন্তর্ভুক্ত করুন। দ্রুত রেন্ডারিংই যদি ইন্টারফেসকে অ্যাক্সেসযোগ্য না রাখে তবে সেটিই পাস নয়।
এটা একটি রিভার্সিবল ডেলিভারি ফিচার হিসেবে পরিচালনা করুন
পাইপলাইনের জন্য একটি মালিক নির্ধারণ করুন এবং এর ইনপুট, আর্টিফ্যাক্ট, টেমপ্লেট, টেস্ট প্রোফাইল, এবং ইনলাইন-সাইজ সীমা ডকুমেন্ট করুন। CSS, মার্কআপ, একটি কম্পোনেন্ট লাইব্রেরি, ফিচার ফ্ল্যাগ, বা অ্যাবাভ-দ্য-ফোল্ড থার্ড-পার্টি পরিবর্তিত হলে প্রতিবার টেস্ট চালান। Coverage গাইড রিভিউতে সহায়ক, কিন্তু একটি রেকর্ডিং কোনো রুলকে প্রতিটি জায়গায় নিরাপদ বলে প্রমাণ করতে পারে না।
প্রাকটিক্যাল হলে রিলিজকে একটি রিভার্সিবল কনফিগারেশনের পিছনে রাখুন। জানা-ভাল স্টাইলশিট পাথ, আর্টিফ্যাক্ট ভার্সন, বিল্ড আইডেন্টিফায়ার, এবং রিকভারি পদ্ধতি রেকর্ড করুন। যদি রিগ্রেশন দেখা দেয়, প্রথমে কম্প্যাটিবল ডেলিভারি পুনরুদ্ধার করুন, তারপর মিস হওয়া স্টেট ডায়াগনোজ করুন। SIU এই ওয়ার্কফ্লো ব্যবহার করে ক্রিটিকাল পাথগুলো গ্রাহক প্রভাব ছড়ানোর আগে স্থির করে।
একটি নতুন ব্যানার, সম্মতি ফ্লো, লোকেল, ব্রেকপয়েন্ট, বা অ্যাকাউন্ট লেআউট পুন-জেনারেশন ও টেস্টিং প্রয়োজন করে।
জেনারেশনকে কম্প্যাটিবল করে টেমপ্লেট ও ডেলিভারি কনফিগারেশন রিভার্ট করুন; পূর্বে পাবলিশ করা ইম্যুটেবল URL যেগুলোকে পুরোনো ডকুমেন্ট রেফার করতে পারে সেগুলো এডিট করবেন না।