WebFont লোডিং এবং রেন্ডারিং অপ্টিমাইজ করুন

Ilya Grigorik

একটি "সম্পূর্ণ" WebFont যাতে সমস্ত স্টাইলিস্টিক ভেরিয়েন্ট রয়েছে, যেগুলির আপনার প্রয়োজন নাও হতে পারে, এছাড়াও সমস্ত গ্লিফ, যা অব্যবহৃত হতে পারে, সহজেই একটি মাল্টি-মেগাবাইট ডাউনলোড হতে পারে৷ এই পোস্টে আপনি কীভাবে ওয়েবফন্টের লোডিং অপ্টিমাইজ করবেন তা খুঁজে পাবেন যাতে দর্শকরা শুধুমাত্র তারা যা ব্যবহার করবে তা ডাউনলোড করে।

সমস্ত ভেরিয়েন্ট ধারণকারী বড় ফাইলের সমস্যা সমাধানের জন্য, @font-face CSS নিয়মটি বিশেষভাবে ডিজাইন করা হয়েছে যাতে আপনি ফন্ট পরিবারকে সম্পদের একটি সংগ্রহে বিভক্ত করতে পারবেন। যেমন ইউনিকোড উপসেট, এবং স্বতন্ত্র শৈলী ভেরিয়েন্ট।

এই ঘোষণার প্রেক্ষিতে, ব্রাউজার প্রয়োজনীয় উপসেট এবং রূপগুলি বের করে এবং পাঠ্য রেন্ডার করার জন্য প্রয়োজনীয় ন্যূনতম সেট ডাউনলোড করে, যা খুবই সুবিধাজনক। যাইহোক, আপনি সতর্ক না হলে, এটি সমালোচনামূলক রেন্ডারিং পাথ এবং বিলম্ব টেক্সট রেন্ডারিং-এ একটি কর্মক্ষমতা বাধা তৈরি করতে পারে।

ডিফল্ট আচরণ

ফন্টের অলস লোডিং একটি গুরুত্বপূর্ণ লুকানো প্রভাব বহন করে যা পাঠ্য রেন্ডারিংকে বিলম্বিত করতে পারে। ব্রাউজারকে অবশ্যই রেন্ডার ট্রি তৈরি করতে হবে, যা DOM এবং CSSOM ট্রির উপর নির্ভরশীল, টেক্সট রেন্ডার করার জন্য কোন ফন্ট রিসোর্স প্রয়োজন তা জানার আগে। ফলস্বরূপ, অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলির পরে ফন্টের অনুরোধগুলি বিলম্বিত হয় এবং সংস্থানটি আনা না হওয়া পর্যন্ত ব্রাউজারটি পাঠ্য রেন্ডার করা থেকে অবরুদ্ধ হতে পারে।

1. ব্রাউজারটি HTML নথির অনুরোধ করে।
2. ব্রাউজারটি এইচটিএমএল প্রতিক্রিয়া পার্স করা এবং DOM তৈরি করা শুরু করে।
3. ব্রাউজার CSS, JS, এবং অন্যান্য সংস্থান আবিষ্কার করে এবং অনুরোধ পাঠায়।
4. সমস্ত CSS সামগ্রী পাওয়ার পরে ব্রাউজার CSSOM তৈরি করে এবং রেন্ডার ট্রি তৈরি করতে DOM ট্রির সাথে এটিকে একত্রিত করে।
   • রেন্ডার ট্রি নির্দেশ করে যে পৃষ্ঠায় নির্দিষ্ট টেক্সট রেন্ডার করার জন্য কোন ফন্ট ভেরিয়েন্টের প্রয়োজন হবে তার পরে ফন্টের অনুরোধ পাঠানো হয়।
5. ব্রাউজার লেআউট সম্পাদন করে এবং স্ক্রীনে বিষয়বস্তু পেইন্ট করে।
   • যদি ফন্টটি এখনও উপলব্ধ না হয়, তাহলে ব্রাউজার কোনো টেক্সট পিক্সেল রেন্ডার করতে পারে না।
   • ফন্ট উপলব্ধ হওয়ার পরে, ব্রাউজার পাঠ্য পিক্সেলগুলিকে রঙ করে।

পৃষ্ঠা বিষয়বস্তুর প্রথম পেইন্টের মধ্যে "রেস", যা রেন্ডার ট্রি তৈরি হওয়ার পরেই করা যেতে পারে এবং ফন্ট রিসোর্সের জন্য অনুরোধটি "খালি পাঠ্য সমস্যা" তৈরি করে যেখানে ব্রাউজার পৃষ্ঠার বিন্যাস রেন্ডার করতে পারে কিন্তু কোনো পাঠ্য বাদ দেয়।

WebFonts প্রিলোড করে এবং ব্রাউজারগুলি অনুপলব্ধ ফন্টগুলির সাথে কীভাবে আচরণ করে তা নিয়ন্ত্রণ করতে font-display ব্যবহার করে, আপনি ফন্ট লোড হওয়ার কারণে ফাঁকা পৃষ্ঠাগুলি এবং লেআউট পরিবর্তনগুলি প্রতিরোধ করতে পারেন৷

আপনার WebFont সম্পদ প্রিলোড করুন

যদি একটি উচ্চ সম্ভাবনা থাকে যে আপনার পৃষ্ঠার একটি নির্দিষ্ট ওয়েবফন্টের প্রয়োজন হবে একটি URL-এ হোস্ট করা আপনার আগে থেকে জানা, আপনি সম্পদ অগ্রাধিকারের সুবিধা নিতে পারেন। <link rel="preload"> ব্যবহার করা CSSOM তৈরি হওয়ার জন্য অপেক্ষা না করেই জটিল রেন্ডারিং পাথের প্রথম দিকে ওয়েবফন্টের জন্য একটি অনুরোধ ট্রিগার করবে৷

পাঠ্য রেন্ডারিং বিলম্ব কাস্টমাইজ করুন

প্রিলোড করার ফলে একটি পৃষ্ঠার বিষয়বস্তু রেন্ডার করা হলে একটি WebFont উপলব্ধ হওয়ার সম্ভাবনা বেশি থাকে, এটি কোনো গ্যারান্টি দেয় না। এখনও উপলব্ধ নয় এমন একটি font-family ব্যবহার করে এমন পাঠ্য রেন্ডার করার সময় ব্রাউজারগুলি কীভাবে আচরণ করে তা আপনাকে এখনও বিবেচনা করতে হবে।

পোস্টে ফন্ট লোড করার সময় অদৃশ্য পাঠ্য এড়িয়ে চলুন আপনি দেখতে পাবেন যে ডিফল্ট ব্রাউজার আচরণ সামঞ্জস্যপূর্ণ নয়। যাইহোক, আপনি font-display ব্যবহার করে আধুনিক ব্রাউজারদের বলতে পারেন কিভাবে আপনি তাদের আচরণ করতে চান।

বিদ্যমান ফন্ট টাইমআউট আচরণের অনুরূপ যা কিছু ব্রাউজার প্রয়োগ করে, font-display একটি ফন্ট ডাউনলোডের জীবনকালকে তিনটি প্রধান সময়ের মধ্যে ভাগ করে:

1. প্রথম পিরিয়ড হল ফন্ট ব্লক পিরিয়ড । এই সময়ের মধ্যে, যদি ফন্ট ফেস লোড করা না হয়, যে কোনো উপাদান এটি ব্যবহার করার চেষ্টা করে তার পরিবর্তে একটি অদৃশ্য ফলব্যাক ফন্ট ফেস দিয়ে রেন্ডার করতে হবে। ব্লকের সময় ফন্ট ফেস সফলভাবে লোড হলে, ফন্ট ফেস সাধারণত ব্যবহার করা হয়।
2. ফন্ট অদলবদল সময়কাল ফন্ট ব্লক সময়ের পরপরই ঘটে। এই সময়ের মধ্যে, যদি ফন্ট ফেস লোড করা না হয়, যে কোনো উপাদান এটি ব্যবহার করার চেষ্টা করে তার পরিবর্তে একটি ফলব্যাক ফন্ট ফেস দিয়ে রেন্ডার করতে হবে। যদি অদলবদল সময়কালে ফন্ট ফেস সফলভাবে লোড হয়, তাহলে ফন্ট ফেস সাধারণত ব্যবহার করা হয়।
3. ফন্ট ব্যর্থতার সময় ফন্ট অদলবদল সময়কালের পরপরই ঘটে। এই সময়কাল শুরু হওয়ার সময় যদি ফন্ট ফেস এখনও লোড না হয়, তাহলে এটি একটি ব্যর্থ লোড হিসাবে চিহ্নিত করা হয়, যার ফলে স্বাভাবিক ফন্ট ফলব্যাক হয়। অন্যথায়, ফন্ট ফেস সাধারণত ব্যবহার করা হয়।

এই পিরিয়ডগুলি বোঝার অর্থ হল আপনি font-display ব্যবহার করে সিদ্ধান্ত নিতে পারেন যে আপনার ফন্টটি কখন ডাউনলোড করা হয়েছে তার উপর নির্ভর করে কীভাবে রেন্ডার করা উচিত।

font-display প্রপার্টির সাথে কাজ করতে, আপনার @font-face নিয়মে এটি যোগ করুন:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: auto; /* or block, swap, fallback, optional */
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
       url('/fonts/awesome-l.woff')