প্রকাশিত: ৩১ মার্চ, ২০১৪
ডিফল্টরূপে, CSS-কে একটি রেন্ডার-ব্লকিং রিসোর্স হিসেবে গণ্য করা হয়, যার অর্থ হলো CSSOM তৈরি না হওয়া পর্যন্ত ব্রাউজার কোনো প্রক্রিয়াকৃত কন্টেন্ট রেন্ডার করবে না। আপনার CSS কোডকে সংক্ষিপ্ত রাখুন, যত দ্রুত সম্ভব তা সরবরাহ করুন এবং রেন্ডারিং আনব্লক করতে মিডিয়া টাইপ ও কোয়েরি ব্যবহার করুন।
রেন্ডার ট্রি তৈরির ক্ষেত্রে আমরা দেখেছি যে, ক্রিটিক্যাল রেন্ডারিং পাথের জন্য DOM এবং CSSOM উভয়েরই প্রয়োজন হয়। এটি পারফরম্যান্সের উপর একটি গুরুত্বপূর্ণ প্রভাব ফেলে: HTML এবং CSS উভয়ই রেন্ডার-ব্লকিং রিসোর্স। HTML-এর বিষয়টি সুস্পষ্ট, কারণ DOM ছাড়া রেন্ডার করার মতো কিছুই থাকবে না, কিন্তু CSS-এর প্রয়োজনীয়তা ততটা সুস্পষ্ট নাও হতে পারে। CSS-এর জন্য রেন্ডারিং ব্লক না করে যদি আমরা একটি সাধারণ পেজ রেন্ডার করার চেষ্টা করি, তাহলে কী হবে?
সারসংক্ষেপ
- ডিফল্টরূপে, CSS-কে একটি রেন্ডার ব্লকিং রিসোর্স হিসেবে গণ্য করা হয়।
- মিডিয়া টাইপ এবং মিডিয়া কোয়েরির মাধ্যমে আমরা কিছু CSS রিসোর্সকে নন-রেন্ডার ব্লকিং হিসেবে চিহ্নিত করতে পারি।
- ব্রাউজারটি ব্লকিং বা নন-ব্লকিং আচরণ নির্বিশেষে সমস্ত CSS রিসোর্স ডাউনলোড করে।
পূর্ববর্তী উদাহরণটি, যেখানে CSS সহ এবং CSS ছাড়া নিউ ইয়র্ক টাইমস ওয়েবসাইটটি দেখানো হয়েছে, তা ব্যাখ্যা করে কেন CSS উপলব্ধ না হওয়া পর্যন্ত রেন্ডারিং আটকে থাকে—CSS ছাড়া পৃষ্ঠাটি প্রায় ব্যবহার-অযোগ্য। ডানদিকের এই অভিজ্ঞতাটিকে প্রায়শই ফ্ল্যাশ অফ আনস্টাইলড কন্টেন্ট (FOUC) বলা হয়। ব্রাউজারটি DOM এবং CSSOM উভয়ই না পাওয়া পর্যন্ত রেন্ডারিং আটকে রাখে।
CSS একটি রেন্ডার-ব্লকিং রিসোর্স। প্রথম রেন্ডারের সময় অপ্টিমাইজ করতে এটি যত তাড়াতাড়ি সম্ভব ক্লায়েন্টের কাছে পৌঁছে দিন।
তবে, যদি আমাদের এমন কিছু CSS স্টাইল থাকে যা শুধুমাত্র নির্দিষ্ট পরিস্থিতিতে ব্যবহৃত হয়, যেমন—যখন পৃষ্ঠাটি প্রিন্ট করা হচ্ছে বা একটি বড় মনিটরে প্রজেক্ট করা হচ্ছে, তখন কী হবে? এই রিসোর্সগুলোর জন্য রেন্ডারিং ব্লক করতে না হলে ভালো হতো।
CSS 'মিডিয়া টাইপ' এবং 'মিডিয়া কোয়েরি' আমাদেরকে নিম্নলিখিত ব্যবহারের ক্ষেত্রগুলো সমাধান করতে সাহায্য করে:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
একটি মিডিয়া কোয়েরিতে একটি মিডিয়া টাইপ এবং শূন্য বা তার বেশি এক্সপ্রেশন থাকে, যা নির্দিষ্ট মিডিয়া ফিচারের শর্তগুলো যাচাই করে। উদাহরণস্বরূপ, আমাদের প্রথম স্টাইল শীট ডিক্লারেশনে কোনো মিডিয়া টাইপ বা কোয়েরি দেওয়া নেই, তাই এটি সব ক্ষেত্রেই প্রযোজ্য; অর্থাৎ, এটি সবসময় রেন্ডার-ব্লকিং। অন্যদিকে, দ্বিতীয় স্টাইল শীট ডিক্লারেশনটি শুধুমাত্র তখনই প্রযোজ্য হয় যখন কন্টেন্টটি প্রিন্ট করা হচ্ছে—হয়তো আপনি লেআউট পুনর্বিন্যাস করতে, ফন্ট পরিবর্তন করতে এবং প্রিন্টের জন্য অন্যান্য গুরুত্বপূর্ণ ডিজাইন সংক্রান্ত বিষয় বিবেচনা করতে চান। তাই, এই স্টাইল শীট ডিক্লারেশনটি প্রথমবার লোড হওয়ার সময় পেজের রেন্ডারিং ব্লক করার প্রয়োজন হয় না। সবশেষে, শেষ স্টাইল শীট ডিক্লারেশনটিতে একটি "মিডিয়া কোয়েরি" থাকে, যা ব্রাউজার দ্বারা এক্সিকিউট করা হয়: যদি শর্তগুলো মিলে যায়, তাহলে স্টাইল শীটটি ডাউনলোড ও প্রসেস না হওয়া পর্যন্ত ব্রাউজার রেন্ডারিং ব্লক করে রাখে।
মিডিয়া কোয়েরি ব্যবহার করে, আমরা আমাদের উপস্থাপনাকে নির্দিষ্ট ব্যবহারের ক্ষেত্র, যেমন প্রদর্শন বনাম মুদ্রণ, এবং সেইসাথে স্ক্রিন ওরিয়েন্টেশনের পরিবর্তন, রিসাইজ ইভেন্ট ইত্যাদির মতো গতিশীল অবস্থার সাথে খাপ খাইয়ে নিতে পারি। আপনার স্টাইল শীট অ্যাসেটগুলো ঘোষণা করার সময়, মিডিয়া টাইপ এবং কোয়েরিগুলোর প্রতি বিশেষ মনোযোগ দিন; এগুলো ক্রিটিক্যাল রেন্ডারিং পাথের পারফরম্যান্সকে ব্যাপকভাবে প্রভাবিত করে।
এই উদাহরণগুলো বিবেচনা করুন:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- প্রথম ডিক্লারেশনটি রেন্ডার-ব্লকিং এবং সকল শর্তে মিলে যায়।
- দ্বিতীয় ডিক্লারেশনটিও রেন্ডার-ব্লকিং:
"all"হলো ডিফল্ট টাইপ, তাই আপনি যদি কোনো টাইপ নির্দিষ্ট না করেন, তবে এটি স্বয়ংক্রিয়ভাবে"all"এ সেট হয়ে যায়। সুতরাং, প্রথম এবং দ্বিতীয় ডিক্লারেশন দুটি আসলে সমতুল্য। - তৃতীয় ডিক্লারেশনটিতে একটি ডাইনামিক মিডিয়া কোয়েরি রয়েছে, যা পেজ লোড হওয়ার সময় ইভ্যালুয়েট করা হয়। পেজ লোড হওয়ার সময় ডিভাইসের ওরিয়েন্টেশনের উপর নির্ভর করে
portrait.cssরেন্ডার ব্লকিং হতেও পারে বা নাও হতে পারে। - শেষের ডিক্লারেশনটি শুধুমাত্র পেজটি প্রিন্ট করার সময় (
"print") প্রয়োগ করা হয়, তাই ব্রাউজারে পেজটি প্রথমবার লোড হওয়ার সময় এটি রেন্ডার ব্লক করে না।
পরিশেষে, মনে রাখবেন যে "রেন্ডার ব্লকিং" বলতে শুধুমাত্র এটাই বোঝায় যে ব্রাউজারকে সেই রিসোর্সের উপর পেজটির প্রাথমিক রেন্ডারিং আটকে রাখতে হবে কিনা। উভয় ক্ষেত্রেই, ব্রাউজার CSS অ্যাসেটটি ডাউনলোড করে, যদিও নন-ব্লকিং রিসোর্সগুলোর ক্ষেত্রে এর প্রায়োরিটি কম থাকে।