ঐচ্ছিক ফন্টগুলি প্রিলোড করে অদৃশ্য পাঠ্যের (FOIT) বিন্যাস স্থানান্তর এবং ফ্ল্যাশ প্রতিরোধ করুন

ক্রোম ৮৩ থেকে শুরু করে, লেআউটের ঝাঁকুনি সম্পূর্ণরূপে দূর করতে link rel="preload" এবং font-display: optional একসাথে ব্যবহার করা যায়।

Houssein Djirdeh

রেন্ডারিং সাইকেল অপ্টিমাইজ করার মাধ্যমে, ক্রোম ৮৩ ঐচ্ছিক ফন্ট প্রি-লোড করার সময় লেআউটের স্থান পরিবর্তন দূর করে। কাস্টম ফন্ট রেন্ডার করার সময় লেআউটে কোনো ঝাঁকুনি হবে না, তা নিশ্চিত করার সবচেয়ে কার্যকর উপায় হলো <link rel="preload"> এর সাথে font-display: optional সমন্বয়।

ব্রাউজার সামঞ্জস্যতা

হালনাগাদ ক্রস-ব্রাউজার সমর্থনের তথ্যের জন্য MDN-এর ডেটা দেখুন:

• <link rel="preload">
• font-display

ফন্ট রেন্ডারিং

লেআউট শিফটিং বা রি-লেআউট ঘটে যখন একটি ওয়েব পেজের কোনো রিসোর্স গতিশীলভাবে পরিবর্তিত হয়, যার ফলে বিষয়বস্তুর "স্থানান্তর" ঘটে। ওয়েব ফন্ট ফেচ এবং রেন্ডার করার ফলে সরাসরি দুটি উপায়ে লেআউট শিফট হতে পারে:

• ফলব্যাক ফন্টটি একটি নতুন ফন্ট দিয়ে প্রতিস্থাপন করা হয় ("ফ্ল্যাশ অফ আনস্টাইলড টেক্সট")।
• পৃষ্ঠায় নতুন কোনো ফন্ট রেন্ডার না হওয়া পর্যন্ত লেখাটি "অদৃশ্য" হিসেবে দেখানো হয় ("অদৃশ্য লেখার ঝলক")।

CSS-এর font-display প্রপার্টিটি বিভিন্ন সমর্থিত ভ্যালুর (যেমন auto , block , swap , fallback , এবং optional ) মাধ্যমে কাস্টম ফন্টের রেন্ডারিং আচরণ পরিবর্তন করার একটি উপায় প্রদান করে। কোন ভ্যালুটি ব্যবহার করা হবে তা নির্ভর করে অ্যাসিঙ্ক্রোনাসভাবে লোড হওয়া ফন্টগুলোর জন্য কাঙ্ক্ষিত আচরণের উপর। তবে, এখন পর্যন্ত, এই সমর্থিত ভ্যালুগুলোর প্রত্যেকটিই উপরে উল্লিখিত দুটি উপায়ের যেকোনো একটিতে রি-লেআউট ট্রিগার করতে পারত!

ঐচ্ছিক ফন্ট

font-display প্রপার্টিটি এমন ফন্টগুলো পরিচালনা করার জন্য তিনটি পিরিয়ডের একটি টাইমলাইন ব্যবহার করে, যেগুলোকে রেন্ডার করার আগে ডাউনলোড করতে হয়:

• ব্লক: টেক্সটকে "অদৃশ্য" হিসেবে রেন্ডার করুন, কিন্তু লোড হওয়া মাত্রই ওয়েব ফন্টে পরিবর্তন করে নিন।
• অদলবদল: একটি ফলব্যাক সিস্টেম ফন্ট ব্যবহার করে টেক্সট রেন্ডার করুন, কিন্তু লোড হওয়া শেষ হওয়ার সাথে সাথেই ওয়েব ফন্টে পরিবর্তন করে নিন।
• ব্যর্থ: একটি ফলব্যাক সিস্টেম ফন্ট ব্যবহার করে টেক্সট রেন্ডার করা হচ্ছে।

পূর্বে, font-display: optional দিয়ে নির্ধারিত ফন্টগুলোর একটি ১০০ মিলিসেকেন্ডের ব্লক পিরিয়ড ছিল এবং কোনো সোয়াপ পিরিয়ড ছিল না। এর মানে হলো, ফলব্যাক ফন্টে পরিবর্তিত হওয়ার আগে "অদৃশ্য" টেক্সট খুব অল্প সময়ের জন্য প্রদর্শিত হতো। যদি ১০০ মিলিসেকেন্ডের মধ্যে ফন্টটি ডাউনলোড না হতো, তাহলে ফলব্যাক ফন্টটি ব্যবহৃত হতো এবং কোনো সোয়াপিং ঘটত না।

তবে, ১০০ মিলিসেকেন্ডের ব্লক পিরিয়ড শেষ হওয়ার আগেই ফন্টটি ডাউনলোড করা হলে, কাস্টম ফন্টটি রেন্ডার হয়ে পেজে ব্যবহৃত হয়।

ফলব্যাক ফন্ট ব্যবহার করা হোক বা কাস্টম ফন্ট সময়মতো লোড হোক, উভয় ক্ষেত্রেই ক্রোম পৃষ্ঠাটি দুইবার রেন্ডার করে। এর ফলে অদৃশ্য লেখায় হালকা কাঁপুনি দেখা যায় এবং নতুন কোনো ফন্ট রেন্ডার করার ক্ষেত্রে লেআউটে ঝাঁকুনি সৃষ্টি হয়, যা পৃষ্ঠার কিছু বিষয়বস্তুকে স্থানচ্যুত করে। এমনকি ফন্টটি ব্রাউজারের ডিস্ক ক্যাশে সংরক্ষিত থাকলেও এবং ব্লক পিরিয়ড শেষ হওয়ার অনেক আগেই লোড হয়ে গেলেও এই সমস্যাটি ঘটে।

ক্রোম ৮৩-তে অপটিমাইজেশন যুক্ত করা হয়েছে, যার ফলে <link rel="preload'> দিয়ে প্রি-লোড করা ঐচ্ছিক ফন্টগুলোর প্রথম রেন্ডার সাইকেল সম্পূর্ণরূপে বন্ধ হয়ে গেছে। এর পরিবর্তে, কাস্টম ফন্টটি লোড হওয়া শেষ না হওয়া পর্যন্ত অথবা একটি নির্দিষ্ট সময় অতিবাহিত না হওয়া পর্যন্ত রেন্ডারিং ব্লক করা থাকে। এই টাইমআউট পিরিয়ডটি বর্তমানে ১০০ মিলিসেকেন্ডে সেট করা আছে, তবে পারফরম্যান্স অপটিমাইজ করার জন্য অদূর ভবিষ্যতে এটি পরিবর্তিত হতে পারে।

ক্রোমে ঐচ্ছিক ফন্ট প্রি-লোড করলে লেআউটের ঝাঁকুনি এবং স্টাইলবিহীন টেক্সটের ঝলকানির সম্ভাবনা দূর হয়। এটি CSS ফন্ট মডিউল লেভেল ৪- এ নির্দিষ্ট করা প্রয়োজনীয় আচরণের সাথে মেলে, যেখানে ঐচ্ছিক ফন্টের কারণে কখনোই লেআউট পরিবর্তন হওয়া উচিত নয় এবং এর পরিবর্তে ইউজার এজেন্টরা একটি উপযুক্ত সময়ের জন্য রেন্ডারিং বিলম্বিত করতে পারে।

যদিও ঐচ্ছিক ফন্ট আগে থেকে লোড করা আবশ্যক নয়, তবে এটি প্রথম রেন্ডার চক্রের আগে লোড হওয়ার সম্ভাবনা অনেক বাড়িয়ে দেয়, বিশেষ করে যদি ফন্টটি ব্রাউজারের ক্যাশে আগে থেকে সংরক্ষিত না থাকে।

উপসংহার

এই নতুন অপটিমাইজেশনগুলো কার্যকর হওয়ার পর ঐচ্ছিক ফন্ট প্রি-লোড করার ক্ষেত্রে আপনার অভিজ্ঞতা জানতে ক্রোম টিম আগ্রহী। আপনি যদি কোনো সমস্যার সম্মুখীন হন অথবা কোনো ফিচারের পরামর্শ দিতে চান, তাহলে একটি ইস্যু ফাইল করুন ।