Chrome 83 থেকে শুরু করে, লিঙ্ক rel="preload" এবং ফন্ট-ডিসপ্লে: লেআউট জ্যাঙ্ক সম্পূর্ণরূপে অপসারণ করতে ঐচ্ছিক একত্রিত করা যেতে পারে
রেন্ডারিং চক্র অপ্টিমাইজ করে, Chrome 83 ঐচ্ছিক ফন্টগুলি প্রিলোড করার সময় লেআউট স্থানান্তরিত করে। <link rel="preload"> font-display: optional ৷
ব্রাউজার সামঞ্জস্য
আপ-টু-ডেট ক্রস-ব্রাউজার সমর্থন তথ্যের জন্য MDN-এর ডেটা দেখুন:
ফন্ট রেন্ডারিং
বিন্যাস স্থানান্তর, বা পুনঃ বিন্যাস, তখন ঘটে যখন একটি ওয়েব পৃষ্ঠার একটি সংস্থান গতিশীলভাবে পরিবর্তিত হয়, যার ফলে বিষয়বস্তুর "শিফ্ট" হয়। ওয়েব ফন্ট আনয়ন এবং রেন্ডারিং দুটি উপায়ের মধ্যে একটিতে সরাসরি লেআউট পরিবর্তন ঘটাতে পারে:
- একটি ফলব্যাক ফন্ট একটি নতুন ফন্টের সাথে অদলবদল করা হয় ("আনস্টাইল করা পাঠ্যের ফ্ল্যাশ")
- পৃষ্ঠায় একটি নতুন ফন্ট রেন্ডার না হওয়া পর্যন্ত "অদৃশ্য" পাঠ্য দেখানো হয় ("অদৃশ্য পাঠ্যের ফ্ল্যাশ")
CSS font-display প্রপার্টি বিভিন্ন সমর্থিত মান ( auto , block , swap , fallback , এবং optional ) এর মাধ্যমে কাস্টম ফন্টের রেন্ডারিং আচরণ পরিবর্তন করার একটি উপায় প্রদান করে। কোন মান ব্যবহার করা হবে তা অসিঙ্ক্রোনাসভাবে লোড করা ফন্টগুলির জন্য পছন্দের আচরণের উপর নির্ভর করে। যাইহোক, এই সমর্থিত মানগুলির প্রত্যেকটি এখন পর্যন্ত উপরে তালিকাভুক্ত দুটি উপায়ের একটিতে পুনরায় বিন্যাস ট্রিগার করতে পারে!
ঐচ্ছিক ফন্ট
font-display বৈশিষ্ট্য ফন্টগুলি পরিচালনা করার জন্য তিনটি পিরিয়ডের একটি টাইমলাইন ব্যবহার করে যেগুলি রেন্ডার করার আগে ডাউনলোড করতে হবে:
- ব্লক করুন: "অদৃশ্য" পাঠ্য রেন্ডার করুন, কিন্তু লোডিং শেষ হওয়ার সাথে সাথে ওয়েব ফন্টে স্যুইচ করুন৷
- অদলবদল: একটি ফলব্যাক সিস্টেম ফন্ট ব্যবহার করে পাঠ্য রেন্ডার করুন, কিন্তু লোডিং শেষ হওয়ার সাথে সাথে ওয়েব ফন্টে স্যুইচ করুন।
- ব্যর্থ: একটি ফলব্যাক সিস্টেম ফন্ট ব্যবহার করে পাঠ্য রেন্ডার করুন।
পূর্বে, font-display: optional একটি 100ms ব্লক পিরিয়ড ছিল এবং কোন সোয়াপ পিরিয়ড ছিল না। এর মানে হল যে "অদৃশ্য" পাঠ্য একটি ফলব্যাক ফন্টে স্যুইচ করার আগে খুব সংক্ষিপ্তভাবে প্রদর্শিত হয়। যদি ফন্টটি 100ms এর মধ্যে ডাউনলোড না হয়, তাহলে ফলব্যাক ফন্ট ব্যবহার করা হয় এবং কোন অদলবদল ঘটে না।
font-display: optional 100ms ব্লক পিরিয়ডের পরে ফন্ট ডাউনলোড করা হলে Chrome-এ ঐচ্ছিক আচরণযাইহোক, যে ক্ষেত্রে 100ms ব্লক পিরিয়ড শেষ হওয়ার আগে ফন্ট ডাউনলোড করা হয়, কাস্টম ফন্ট রেন্ডার করা হয় এবং পৃষ্ঠায় ব্যবহার করা হয়।
font-display: optional 100ms ব্লক পিরিয়ডের আগে ফন্ট ডাউনলোড করা হলে ক্রোমে ঐচ্ছিক আচরণফলব্যাক ফন্ট ব্যবহার করা হোক বা কাস্টম ফন্ট সময়মতো লোড হওয়া শেষ হোক না কেন Chrome উভয় ক্ষেত্রেই পৃষ্ঠাটিকে দুবার রি-রেন্ডার করে। এটি অদৃশ্য পাঠ্যের সামান্য ঝাঁকুনি সৃষ্টি করে এবং যখন একটি নতুন ফন্ট রেন্ডার করা হয় তখন লেআউট জ্যাঙ্ক যা পৃষ্ঠার কিছু বিষয়বস্তুকে সরিয়ে দেয়। ফন্টটি ব্রাউজারের ডিস্ক ক্যাশে সংরক্ষণ করা হলেও এবং ব্লক পিরিয়ড সম্পূর্ণ হওয়ার আগে ভালভাবে লোড করতে পারলেও এটি ঘটে।
<link rel="preload'> এর সাথে প্রিলোড করা ঐচ্ছিক ফন্টগুলির জন্য প্রথম রেন্ডার চক্রটিকে সম্পূর্ণরূপে সরিয়ে দেওয়ার জন্য অপ্টিমাইজেশানগুলি Chrome 83-এ এসেছে৷ পরিবর্তে, কাস্টম ফন্টটি লোড করা শেষ না হওয়া পর্যন্ত বা একটি নির্দিষ্ট সময় অতিক্রান্ত না হওয়া পর্যন্ত রেন্ডারিং ব্লক করা হয়েছে৷ এই টাইমআউট পিরিয়ডটি বর্তমানে 100ms এ সেট করা হয়েছে, কিন্তু পারফরম্যান্স অপ্টিমাইজ করার জন্য সম্ভবত অদূর ভবিষ্যতে পরিবর্তন হতে পারে।
font-display: optional আচরণ যখন ফন্টগুলি প্রিলোড করা হয় এবং 100ms ব্লক পিরিয়ডের পরে ফন্ট ডাউনলোড করা হয় (অদৃশ্য পাঠ্যের ফ্ল্যাশ নেই) 
font-display: optional আচরণ যখন ফন্টগুলি প্রিলোড করা হয় এবং 100ms ব্লক পিরিয়ডের আগে ফন্ট ডাউনলোড করা হয় (অদৃশ্য পাঠ্যের ফ্ল্যাশ নেই)ক্রোমে ঐচ্ছিক ফন্ট প্রিলোড করা লেআউট জ্যাঙ্ক এবং স্টাইল না করা পাঠ্যের ফ্ল্যাশের সম্ভাবনাকে সরিয়ে দেয়। এটি সিএসএস ফন্ট মডিউল লেভেল 4- এ নির্দিষ্ট করা প্রয়োজনীয় আচরণের সাথে মেলে যেখানে ঐচ্ছিক ফন্টগুলি কখনই পুনরায় বিন্যাস সৃষ্টি করবে না এবং ব্যবহারকারী এজেন্টরা একটি উপযুক্ত সময়ের জন্য রেন্ডারিং বিলম্বিত করতে পারে।
যদিও এটি একটি ঐচ্ছিক ফন্ট প্রিলোড করার প্রয়োজন নেই, এটি প্রথম রেন্ডার চক্রের আগে এটির লোড হওয়ার সুযোগকে ব্যাপকভাবে উন্নত করে, বিশেষ করে যদি এটি এখনও ব্রাউজারের ক্যাশে সংরক্ষিত না থাকে।
উপসংহার
Chrome টিম এই নতুন অপ্টিমাইজেশানগুলির সাথে ঐচ্ছিক ফন্টগুলি প্রিলোড করার আপনার অভিজ্ঞতা শুনতে আগ্রহী! আপনি যদি কোনো সমস্যার সম্মুখীন হন বা কোনো বৈশিষ্ট্যের পরামর্শ দিতে চান তাহলে একটি সমস্যা ফাইল করুন।
,Chrome 83 থেকে শুরু করে, লিঙ্ক rel="preload" এবং ফন্ট-ডিসপ্লে: লেআউট জ্যাঙ্ক সম্পূর্ণরূপে অপসারণ করতে ঐচ্ছিক একত্রিত করা যেতে পারে
রেন্ডারিং চক্র অপ্টিমাইজ করে, Chrome 83 ঐচ্ছিক ফন্টগুলি প্রিলোড করার সময় লেআউট স্থানান্তরিত করে। <link rel="preload"> font-display: optional ৷
ব্রাউজার সামঞ্জস্য
আপ-টু-ডেট ক্রস-ব্রাউজার সমর্থন তথ্যের জন্য MDN-এর ডেটা দেখুন:
ফন্ট রেন্ডারিং
বিন্যাস স্থানান্তর, বা পুনঃ বিন্যাস, তখন ঘটে যখন একটি ওয়েব পৃষ্ঠার একটি সংস্থান গতিশীলভাবে পরিবর্তিত হয়, যার ফলে বিষয়বস্তুর "শিফ্ট" হয়। ওয়েব ফন্ট আনয়ন এবং রেন্ডারিং দুটি উপায়ের মধ্যে একটিতে সরাসরি লেআউট পরিবর্তন ঘটাতে পারে:
- একটি ফলব্যাক ফন্ট একটি নতুন ফন্টের সাথে অদলবদল করা হয় ("আনস্টাইল করা পাঠ্যের ফ্ল্যাশ")
- পৃষ্ঠায় একটি নতুন ফন্ট রেন্ডার না হওয়া পর্যন্ত "অদৃশ্য" পাঠ্য দেখানো হয় ("অদৃশ্য পাঠ্যের ফ্ল্যাশ")
CSS font-display প্রপার্টি বিভিন্ন সমর্থিত মান ( auto , block , swap , fallback , এবং optional ) এর মাধ্যমে কাস্টম ফন্টের রেন্ডারিং আচরণ পরিবর্তন করার একটি উপায় প্রদান করে। কোন মান ব্যবহার করা হবে তা অসিঙ্ক্রোনাসভাবে লোড করা ফন্টগুলির জন্য পছন্দের আচরণের উপর নির্ভর করে। যাইহোক, এই সমর্থিত মানগুলির প্রত্যেকটি এখন পর্যন্ত উপরে তালিকাভুক্ত দুটি উপায়ের একটিতে পুনরায় বিন্যাস ট্রিগার করতে পারে!
ঐচ্ছিক ফন্ট
font-display বৈশিষ্ট্য ফন্টগুলি পরিচালনা করার জন্য তিনটি পিরিয়ডের একটি টাইমলাইন ব্যবহার করে যেগুলি রেন্ডার করার আগে ডাউনলোড করতে হবে:
- ব্লক করুন: "অদৃশ্য" পাঠ্য রেন্ডার করুন, কিন্তু লোডিং শেষ হওয়ার সাথে সাথে ওয়েব ফন্টে স্যুইচ করুন৷
- অদলবদল: একটি ফলব্যাক সিস্টেম ফন্ট ব্যবহার করে পাঠ্য রেন্ডার করুন, কিন্তু লোডিং শেষ হওয়ার সাথে সাথে ওয়েব ফন্টে স্যুইচ করুন।
- ব্যর্থ: একটি ফলব্যাক সিস্টেম ফন্ট ব্যবহার করে পাঠ্য রেন্ডার করুন।
পূর্বে, font-display: optional একটি 100ms ব্লক পিরিয়ড ছিল এবং কোন সোয়াপ পিরিয়ড ছিল না। এর মানে হল যে "অদৃশ্য" পাঠ্য একটি ফলব্যাক ফন্টে স্যুইচ করার আগে খুব সংক্ষিপ্তভাবে প্রদর্শিত হয়। যদি ফন্টটি 100ms এর মধ্যে ডাউনলোড না হয়, তাহলে ফলব্যাক ফন্ট ব্যবহার করা হয় এবং কোন অদলবদল ঘটে না।
font-display: optional 100ms ব্লক পিরিয়ডের পরে ফন্ট ডাউনলোড করা হলে Chrome-এ ঐচ্ছিক আচরণযাইহোক, যে ক্ষেত্রে 100ms ব্লক পিরিয়ড শেষ হওয়ার আগে ফন্ট ডাউনলোড করা হয়, কাস্টম ফন্ট রেন্ডার করা হয় এবং পৃষ্ঠায় ব্যবহার করা হয়।
font-display: optional 100ms ব্লক পিরিয়ডের আগে ফন্ট ডাউনলোড করা হলে ক্রোমে ঐচ্ছিক আচরণফলব্যাক ফন্ট ব্যবহার করা হোক বা কাস্টম ফন্ট সময়মতো লোড হওয়া শেষ হোক না কেন Chrome উভয় ক্ষেত্রেই পৃষ্ঠাটিকে দুবার রি-রেন্ডার করে। এটি অদৃশ্য পাঠ্যের সামান্য ঝাঁকুনি সৃষ্টি করে এবং যখন একটি নতুন ফন্ট রেন্ডার করা হয় তখন লেআউট জ্যাঙ্ক যা পৃষ্ঠার কিছু বিষয়বস্তুকে সরিয়ে দেয়। ফন্টটি ব্রাউজারের ডিস্ক ক্যাশে সংরক্ষণ করা হলেও এবং ব্লক পিরিয়ড সম্পূর্ণ হওয়ার আগে ভালভাবে লোড করতে পারলেও এটি ঘটে।
<link rel="preload'> এর সাথে প্রিলোড করা ঐচ্ছিক ফন্টগুলির জন্য প্রথম রেন্ডার চক্রটিকে সম্পূর্ণরূপে সরিয়ে দেওয়ার জন্য অপ্টিমাইজেশানগুলি Chrome 83-এ এসেছে৷ পরিবর্তে, কাস্টম ফন্টটি লোড করা শেষ না হওয়া পর্যন্ত বা একটি নির্দিষ্ট সময় অতিক্রান্ত না হওয়া পর্যন্ত রেন্ডারিং ব্লক করা হয়েছে৷ এই টাইমআউট পিরিয়ডটি বর্তমানে 100ms এ সেট করা হয়েছে, কিন্তু পারফরম্যান্স অপ্টিমাইজ করার জন্য সম্ভবত অদূর ভবিষ্যতে পরিবর্তন হতে পারে।
font-display: optional আচরণ যখন ফন্টগুলি প্রিলোড করা হয় এবং 100ms ব্লক পিরিয়ডের পরে ফন্ট ডাউনলোড করা হয় (অদৃশ্য পাঠ্যের ফ্ল্যাশ নেই) font-display: optional আচরণ যখন ফন্টগুলি প্রিলোড করা হয় এবং 100ms ব্লক পিরিয়ডের আগে ফন্ট ডাউনলোড করা হয় (অদৃশ্য পাঠ্যের ফ্ল্যাশ নেই)ক্রোমে ঐচ্ছিক ফন্ট প্রিলোড করা লেআউট জ্যাঙ্ক এবং স্টাইল না করা পাঠ্যের ফ্ল্যাশের সম্ভাবনাকে সরিয়ে দেয়। এটি সিএসএস ফন্ট মডিউল লেভেল 4- এ নির্দিষ্ট করা প্রয়োজনীয় আচরণের সাথে মেলে যেখানে ঐচ্ছিক ফন্টগুলি কখনই পুনরায় বিন্যাস সৃষ্টি করবে না এবং ব্যবহারকারী এজেন্টরা একটি উপযুক্ত সময়ের জন্য রেন্ডারিং বিলম্বিত করতে পারে।
যদিও এটি একটি ঐচ্ছিক ফন্ট প্রিলোড করার প্রয়োজন নেই, এটি প্রথম রেন্ডার চক্রের আগে এটির লোড হওয়ার সুযোগকে ব্যাপকভাবে উন্নত করে, বিশেষ করে যদি এটি এখনও ব্রাউজারের ক্যাশে সংরক্ষিত না থাকে।
উপসংহার
Chrome টিম এই নতুন অপ্টিমাইজেশানগুলির সাথে ঐচ্ছিক ফন্টগুলি প্রিলোড করার আপনার অভিজ্ঞতা শুনতে আগ্রহী! আপনি যদি কোনো সমস্যার সম্মুখীন হন বা কোনো বৈশিষ্ট্যের পরামর্শ দিতে চান তাহলে একটি সমস্যা ফাইল করুন।