এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Ilya Grigorik

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

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

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

ডিফল্ট আচরণ

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

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

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

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

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

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

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

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

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

ব্রাউজার সমর্থন

উৎস

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

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

এই পিরিয়ডগুলি বোঝার অর্থ হল আপনি 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') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

font-display বর্তমানে নিম্নলিখিত মানগুলির পরিসর সমর্থন করে:

auto
block
swap
fallback
optional

প্রিলোডিং ফন্ট এবং font-display বৈশিষ্ট্য সম্পর্কে আরও তথ্যের জন্য, নিম্নলিখিত পোস্টগুলি দেখুন:

ফন্ট লোডিং API

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

ফন্ট লোডিং API CSS ফন্টের মুখগুলিকে সংজ্ঞায়িত এবং ম্যানিপুলেট করার জন্য, তাদের ডাউনলোডের অগ্রগতি ট্র্যাক করতে এবং তাদের ডিফল্ট ল্যাজিলোড আচরণকে ওভাররাইড করার জন্য একটি স্ক্রিপ্টিং ইন্টারফেস প্রদান করে। উদাহরণস্বরূপ, যদি আপনি নিশ্চিত হন যে একটি নির্দিষ্ট ফন্টের বৈকল্পিক প্রয়োজন, আপনি এটি সংজ্ঞায়িত করতে পারেন এবং ব্রাউজারকে ফন্ট সংস্থানটি অবিলম্বে আনা শুরু করতে বলতে পারেন:

ব্রাউজার সমর্থন

উৎস

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden,
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here...
});

আরও, যেহেতু আপনি ফন্টের স্থিতি ( check() ) পদ্ধতির মাধ্যমে পরীক্ষা করতে পারেন এবং এর ডাউনলোডের অগ্রগতি ট্র্যাক করতে পারেন, আপনি আপনার পৃষ্ঠাগুলিতে পাঠ্য রেন্ডার করার জন্য একটি কাস্টম কৌশলও সংজ্ঞায়িত করতে পারেন:

ফন্ট উপলব্ধ না হওয়া পর্যন্ত আপনি সমস্ত পাঠ্য রেন্ডারিং ধরে রাখতে পারেন।
আপনি প্রতিটি ফন্টের জন্য একটি কাস্টম টাইমআউট বাস্তবায়ন করতে পারেন।
আপনি রেন্ডারিং আনব্লক করতে ফলব্যাক ফন্ট ব্যবহার করতে পারেন এবং একটি নতুন শৈলী ইনজেক্ট করতে পারেন যা ফন্ট উপলব্ধ হওয়ার পরে পছন্দসই ফন্ট ব্যবহার করে।

সর্বোপরি, আপনি পৃষ্ঠায় বিভিন্ন বিষয়বস্তুর জন্য উপরের কৌশলগুলি মিশ্রিত করতে এবং মেলাতে পারেন। উদাহরণস্বরূপ, ফন্টটি উপলব্ধ না হওয়া পর্যন্ত আপনি কিছু বিভাগে পাঠ্য রেন্ডারিং বিলম্বিত করতে পারেন, একটি ফলব্যাক ফন্ট ব্যবহার করুন এবং তারপর ফন্ট ডাউনলোড শেষ হওয়ার পরে পুনরায় রেন্ডার করুন৷

সঠিক ক্যাশিং একটি আবশ্যক

ফন্ট রিসোর্স হল, সাধারণত, স্ট্যাটিক রিসোর্স যা ঘন ঘন আপডেট দেখতে পায় না। ফলস্বরূপ, এগুলি একটি দীর্ঘ সর্বোচ্চ বয়সের মেয়াদ শেষ হওয়ার জন্য আদর্শভাবে উপযুক্ত— নিশ্চিত করুন যে আপনি একটি শর্তসাপেক্ষ ETag শিরোনাম এবং সমস্ত ফন্ট সংস্থানের জন্য একটি সর্বোত্তম ক্যাশে-কন্ট্রোল নীতি উভয়ই নির্দিষ্ট করেছেন৷

যদি আপনার ওয়েব অ্যাপ্লিকেশন একটি পরিষেবা কর্মী ব্যবহার করে, ক্যাশে-প্রথম কৌশল সহ ফন্ট সংস্থান পরিবেশন করা বেশিরভাগ ক্ষেত্রে ব্যবহারের জন্য উপযুক্ত।

আপনি localStorage বা ইনডেক্সডডিবি ব্যবহার করে ফন্ট সংরক্ষণ করবেন না; তাদের প্রত্যেকের নিজস্ব কর্মক্ষমতা সমস্যা আছে. ব্রাউজারের HTTP ক্যাশে ব্রাউজারে ফন্ট সংস্থান সরবরাহ করার জন্য সর্বোত্তম এবং সবচেয়ে শক্তিশালী প্রক্রিয়া সরবরাহ করে।

WebFont লোডিং চেকলিস্ট

<link rel="preload"> , font-display , অথবা Font Loading API ব্যবহার করে ফন্ট লোডিং এবং রেন্ডারিং কাস্টমাইজ করুন: ডিফল্ট অলস লোডিং আচরণের ফলে টেক্সট রেন্ডারিং বিলম্বিত হতে পারে৷ এই ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি আপনাকে নির্দিষ্ট ফন্টগুলির জন্য এই আচরণটিকে ওভাররাইড করতে এবং পৃষ্ঠায় বিভিন্ন সামগ্রীর জন্য কাস্টম রেন্ডারিং এবং সময় শেষ করার কৌশলগুলি নির্দিষ্ট করার অনুমতি দেয়৷
পুনর্বিবেচনা এবং সর্বোত্তম ক্যাশিং নীতিগুলি নির্দিষ্ট করুন: ফন্টগুলি স্ট্যাটিক সংস্থান যা কদাচিৎ আপডেট করা হয়। নিশ্চিত করুন যে আপনার সার্ভারগুলি একটি দীর্ঘস্থায়ী সর্বোচ্চ-বয়স টাইমস্ট্যাম্প এবং একটি পুনর্বিন্যাস টোকেন প্রদান করে যাতে বিভিন্ন পৃষ্ঠাগুলির মধ্যে কার্যকর ফন্ট পুনঃব্যবহারের অনুমতি দেওয়া হয়। যদি একজন পরিষেবা কর্মী ব্যবহার করেন, একটি ক্যাশে-প্রথম কৌশল উপযুক্ত।

Lighthouse সঙ্গে WebFont লোডিং আচরণের জন্য স্বয়ংক্রিয় পরীক্ষা

আপনি যে ওয়েব ফন্ট অপ্টিমাইজেশানের সর্বোত্তম অনুশীলনগুলি অনুসরণ করছেন তা নিশ্চিত করার প্রক্রিয়াটিকে লাইটহাউস স্বয়ংক্রিয়ভাবে সাহায্য করতে পারে৷

নিম্নলিখিত অডিটগুলি আপনাকে নিশ্চিত করতে সাহায্য করতে পারে যে আপনার পৃষ্ঠাগুলি সময়ের সাথে সাথে ওয়েব ফন্ট অপ্টিমাইজেশনের সর্বোত্তম অনুশীলনগুলি অনুসরণ করে চলেছে: