পূর্ববর্তী মডিউলগুলোতে আপনারা HTML, CSS, JavaScript এবং মিডিয়া রিসোর্স অপ্টিমাইজ করার পদ্ধতি শিখেছেন। এই মডিউলে, ওয়েব ফন্ট অপ্টিমাইজ করার কিছু পদ্ধতি সম্পর্কে জানুন।
ওয়েব ফন্ট পেজের লোড ও রেন্ডারিং উভয় সময়েই পারফরম্যান্সকে প্রভাবিত করতে পারে। বড় ফন্ট ফাইল ডাউনলোড হতে বেশ কিছুটা সময় নিতে পারে এবং তা ফার্স্ট কন্টেন্টফুল পেইন্ট (FCP)-কে নেতিবাচকভাবে প্রভাবিত করে, অন্যদিকে font-display ভ্যালু ভুল হলে তা অনাকাঙ্ক্ষিত ভিজ্যুয়াল রেন্ডারিং পরিবর্তন ঘটাতে পারে।
ওয়েব ফন্ট অপ্টিমাইজ করার বিষয়ে আলোচনা করার আগে, ব্রাউজার কীভাবে সেগুলোকে খুঁজে পায় তা জানা সহায়ক হতে পারে, যাতে আপনি বুঝতে পারেন যে নির্দিষ্ট পরিস্থিতিতে CSS কীভাবে অপ্রয়োজনীয় ওয়েব ফন্ট খুঁজে পাওয়া প্রতিরোধ করে।
আবিষ্কার
একটি পেজের ওয়েব ফন্টগুলো স্টাইল শীটে @font-face ডিক্লারেশন ব্যবহার করে সংজ্ঞায়িত করা হয়:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
পূর্ববর্তী কোড স্নিপেটটি "Open Sans" নামের একটি font-family নির্ধারণ করে এবং ব্রাউজারকে জানিয়ে দেয় যে সংশ্লিষ্ট ওয়েব ফন্ট রিসোর্সটি কোথায় পাওয়া যাবে। ব্যান্ডউইথ সাশ্রয়ের জন্য, ব্রাউজারটি ওয়েব ফন্টটি ততক্ষণ পর্যন্ত ডাউনলোড করে না, যতক্ষণ না এটি নিশ্চিত হয় যে বর্তমান পেজের লেআউটের জন্য এটির প্রয়োজন আছে।
h1 {
font-family: "Open Sans";
}
পূর্ববর্তী CSS কোড অংশে, ব্রাউজারটি পেজের HTML-এ থাকা একটি <h1> এলিমেন্ট পার্স করার সময় "Open Sans" ফন্ট ফাইলটি ডাউনলোড করে।
preload
যদি আপনার @font-face ডিক্লারেশনগুলো কোনো এক্সটার্নাল স্টাইল শীটে সংজ্ঞায়িত করা থাকে, তাহলে ব্রাউজার সেই স্টাইল শীটটি ডাউনলোড করার পরেই কেবল সেগুলো ডাউনলোড করা শুরু করতে পারে। এর ফলে ওয়েব ফন্টগুলো দেরিতে আবিষ্কৃত রিসোর্স হয়ে থাকে—কিন্তু ব্রাউজারকে ওয়েব ফন্টগুলো আরও দ্রুত খুঁজে পেতে সাহায্য করার উপায় রয়েছে।
আপনি preload ডিরেক্টিভ ব্যবহার করে ওয়েব ফন্ট রিসোর্সের জন্য আগেভাগেই অনুরোধ শুরু করতে পারেন। preload ডিরেক্টিভ পেজ লোড হওয়ার সময় ওয়েব ফন্টগুলোকে দ্রুত খুঁজে পাওয়ার যোগ্য করে তোলে এবং ব্রাউজার স্টাইল শিট ডাউনলোড ও পার্সিং শেষ হওয়ার জন্য অপেক্ষা না করেই সাথে সাথে সেগুলো ডাউনলোড করা শুরু করে দেয়। preload ডিরেক্টিভ পেজে ফন্টটির প্রয়োজন হওয়া পর্যন্ত অপেক্ষা করে না।
<!-- The `crossorigin` attribute is required for fonts-even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
ইনলাইন @font-face ঘোষণা
আপনার HTML-এর <head> অংশে <style> এলিমেন্ট ব্যবহার করে রেন্ডার-ব্লকিং CSS—যার মধ্যে @font-face ডিক্লারেশনও অন্তর্ভুক্ত—ইনলাইন করার মাধ্যমে আপনি পেজ লোডের সময় ফন্টগুলোকে আরও আগে খুঁজে পাওয়ার ব্যবস্থা করতে পারেন। এক্ষেত্রে, ব্রাউজার পেজ লোডের শুরুতেই ওয়েব ফন্টগুলো খুঁজে পায়, কারণ এর জন্য কোনো বাহ্যিক স্টাইল শিট ডাউনলোড হওয়ার অপেক্ষা করতে হয় না।
preload হিন্ট ব্যবহারের চেয়ে @font-face ডিক্লারেশন ইনলাইন করার একটি সুবিধা হলো, ব্রাউজার শুধুমাত্র বর্তমান পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় ফন্টগুলোই ডাউনলোড করে। এর ফলে অব্যবহৃত ফন্ট ডাউনলোড হওয়ার ঝুঁকি দূর হয়।
ডাউনলোড করুন
ওয়েব ফন্টগুলো শনাক্ত করার পর এবং বর্তমান পৃষ্ঠার বিন্যাসের জন্য সেগুলোর প্রয়োজন আছে কিনা তা নিশ্চিত করার পর, ব্রাউজার সেগুলো ডাউনলোড করতে পারে। ওয়েব ফন্টের সংখ্যা, সেগুলোর এনকোডিং এবং ফাইলের আকার, ব্রাউজার দ্বারা একটি ওয়েব ফন্ট কত দ্রুত ডাউনলোড ও রেন্ডার হবে তার উপর উল্লেখযোগ্যভাবে প্রভাব ফেলতে পারে।
আপনার ওয়েব ফন্টগুলি নিজে হোস্ট করুন
ওয়েব ফন্ট গুগল ফন্টসের মতো থার্ড-পার্টি পরিষেবার মাধ্যমে সরবরাহ করা যেতে পারে, অথবা আপনার নিজস্ব অরিজিনে সেলফ-হোস্ট করা যেতে পারে। থার্ড-পার্টি পরিষেবা ব্যবহার করার সময়, প্রয়োজনীয় ওয়েব ফন্ট ডাউনলোড শুরু করার আগে আপনার ওয়েব পেজকে সেই পরিষেবা প্রদানকারীর ডোমেইনের সাথে একটি সংযোগ স্থাপন করতে হয়। এর ফলে ওয়েব ফন্ট খুঁজে বের করা এবং পরবর্তী ডাউনলোড প্রক্রিয়া বিলম্বিত হতে পারে।
preconnect রিসোর্স হিন্ট ব্যবহার করে এই ওভারহেড কমানো যেতে পারে। preconnect ব্যবহার করে, আপনি ব্রাউজারকে তার স্বাভাবিক সময়ের চেয়ে আগে ক্রস-অরিজিনে একটি সংযোগ খুলতে বলতে পারেন:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
পূর্ববর্তী HTML কোডটি ব্রাউজারকে fonts.googleapis.com এর সাথে একটি সংযোগ এবং fonts.gstatic.com এর সাথে একটি CORS সংযোগ স্থাপন করতে ইঙ্গিত দেয়। কিছু ফন্ট সরবরাহকারী—যেমন গুগল ফন্টস—ভিন্ন ভিন্ন উৎস থেকে CSS এবং ফন্ট রিসোর্স সরবরাহ করে।
আপনার ওয়েব ফন্টগুলো সেলফ-হোস্ট করার মাধ্যমে আপনি তৃতীয় পক্ষের সংযোগের প্রয়োজনীয়তা দূর করতে পারেন। বেশিরভাগ ক্ষেত্রে, ক্রস-অরিজিন থেকে ডাউনলোড করার চেয়ে সেলফ-হোস্টিং ওয়েব ফন্ট দ্রুততর হয়। আপনি যদি ওয়েব ফন্ট সেলফ-হোস্ট করার পরিকল্পনা করেন, তবে নিশ্চিত হয়ে নিন যে আপনার সাইটটি একটি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) , HTTP/2 বা HTTP/3 ব্যবহার করছে এবং আপনার ওয়েবসাইটের জন্য প্রয়োজনীয় ওয়েব ফন্টগুলোর জন্য সঠিক ক্যাশিং হেডার সেট করেছে।
WOFF2 ব্যবহার করুন—এবং শুধুমাত্র WOFF2-ই ব্যবহার করুন।
WOFF2 ব্যাপকভাবে বিভিন্ন ব্রাউজারে সমর্থিত এবং এতে রয়েছে সর্বোত্তম কম্প্রেশন—যা WOFF-এর চেয়ে ৩০% পর্যন্ত উন্নত। ফাইলের আকার ছোট হওয়ায় এটি দ্রুত ডাউনলোড হয়। আধুনিক ব্রাউজারগুলোতে সম্পূর্ণ সামঞ্জস্যের জন্য প্রায়শই শুধু WOFF2 ফরম্যাটটিই যথেষ্ট।
আপনার ওয়েব ফন্টগুলি সাবসেট করুন
ওয়েব ফন্টে সাধারণত বিভিন্ন ধরনের গ্লিফ অন্তর্ভুক্ত থাকে, যা বিভিন্ন ভাষায় ব্যবহৃত নানা রকম অক্ষরকে উপস্থাপন করার জন্য প্রয়োজন হয়। যদি আপনার পেজটি শুধুমাত্র একটি ভাষায় কন্টেন্ট পরিবেশন করে—অথবা একটিমাত্র বর্ণমালা ব্যবহার করে—তাহলে আপনি সাবসেটিং-এর মাধ্যমে আপনার ওয়েব ফন্টের আকার কমাতে পারেন। এটি সাধারণত একটি নির্দিষ্ট সংখ্যক—বা একটি পরিসর— ইউনিকোড কোড পয়েন্ট উল্লেখ করার মাধ্যমে করা হয়।
সাবসেট হলো মূল ওয়েব ফন্ট ফাইলে অন্তর্ভুক্ত গ্লিফগুলোর একটি সংক্ষিপ্ত সেট। উদাহরণস্বরূপ, সমস্ত গ্লিফ পরিবেশন করার পরিবর্তে, আপনার পৃষ্ঠাটি ল্যাটিন অক্ষরগুলোর জন্য একটি নির্দিষ্ট সাবসেট পরিবেশন করতে পারে। প্রয়োজনীয় সাবসেটের উপর নির্ভর করে, গ্লিফ বাদ দিলে একটি ফন্ট ফাইলের আকার উল্লেখযোগ্যভাবে কমে যেতে পারে।
কিছু ওয়েব ফন্ট সরবরাহকারী—যেমন গুগল ফন্টস—একটি কোয়েরি স্ট্রিং প্যারামিটার ব্যবহারের মাধ্যমে স্বয়ংক্রিয়ভাবে সাবসেট অফার করে। উদাহরণস্বরূপ, https://fonts.googleapis.com/css?family=Roboto&subset=latin ইউআরএলটি রোবোটো ওয়েব ফন্টের এমন একটি স্টাইল শীট পরিবেশন করে যা শুধুমাত্র ল্যাটিন বর্ণমালা ব্যবহার করে।
আপনি যদি আপনার ওয়েব ফন্টগুলো নিজে হোস্ট করার সিদ্ধান্ত নিয়ে থাকেন, তাহলে পরবর্তী পদক্ষেপ হলো glyphanger বা subfont-এর মতো টুল ব্যবহার করে সেই সাবসেটগুলো নিজে তৈরি ও হোস্ট করা।
তবে, আপনার নিজের ওয়েব ফন্ট সেলফ-হোস্ট করার সক্ষমতা না থাকলে, আপনি একটি অতিরিক্ত text কোয়েরি স্ট্রিং প্যারামিটার উল্লেখ করে গুগল ফন্টস-এর সরবরাহ করা ওয়েব ফন্টগুলোকে সাবসেট করতে পারেন, যেখানে শুধুমাত্র আপনার ওয়েবসাইটের জন্য প্রয়োজনীয় ইউনিকোড কোড পয়েন্টগুলো থাকবে। উদাহরণস্বরূপ, যদি আপনার সাইটে একটি ডিসপ্লে ওয়েব ফন্ট থাকে যার জন্য শুধুমাত্র "Welcome" শব্দগুচ্ছটির জন্য অল্প কিছু অক্ষর প্রয়োজন, তাহলে আপনি নিম্নলিখিত URL-এর মাধ্যমে গুগল ফন্টস-এর কাছে সেই সাবসেটটির জন্য অনুরোধ করতে পারেন: https://fonts.googleapis.com/css?family=Monoton&text=Welcome । যদি আপনার ওয়েবসাইটে এই ধরনের চরম সাবসেটিং কার্যকর হয়, তবে এটি আপনার ওয়েবসাইটের একটিমাত্র টাইপফেসের জন্য প্রয়োজনীয় ওয়েব ফন্ট ডেটার পরিমাণ উল্লেখযোগ্যভাবে কমাতে পারে।
ফন্ট রেন্ডারিং
ব্রাউজার একটি ওয়েব ফন্ট খুঁজে বের করে ডাউনলোড করার পর, সেটি রেন্ডার করা যায়। ডিফল্টরূপে, ব্রাউজার ওয়েব ফন্ট ব্যবহার করা যেকোনো টেক্সট রেন্ডার করা ব্লক করে রাখে, যতক্ষণ না সেটি ডাউনলোড হয়। আপনি font-display CSS প্রপার্টি ব্যবহার করে ব্রাউজারের টেক্সট রেন্ডারিং আচরণ পরিবর্তন করতে পারেন এবং ওয়েব ফন্টটি সম্পূর্ণ লোড না হওয়া পর্যন্ত কোন টেক্সট দেখানো হবে বা হবে না, তা কনফিগার করতে পারেন।
block
font-display এর ডিফল্ট মান হলো block । block থাকলে, ব্রাউজার নির্দিষ্ট ওয়েব ফন্ট ব্যবহার করা যেকোনো টেক্সটের রেন্ডারিং ব্লক করে দেয়। বিভিন্ন ব্রাউজারের আচরণ কিছুটা ভিন্ন হয়। Chromium এবং Firefox একটি ফলব্যাক ব্যবহার করার আগে সর্বোচ্চ ৩ সেকেন্ড পর্যন্ত রেন্ডারিং ব্লক করে রাখে। Safari অনির্দিষ্টকালের জন্য ব্লক করে রাখে যতক্ষণ না ওয়েব ফন্টটি লোড হয়।
swap
swap হলো সবচেয়ে বহুল ব্যবহৃত font-display ভ্যালু । swap রেন্ডারিং ব্লক করে না, এবং নির্দিষ্ট ওয়েব ফন্টটি প্রতিস্থাপন করার আগে একটি ফলব্যাকে তাৎক্ষণিকভাবে টেক্সটটি দেখায়। এর ফলে আপনি ওয়েব ফন্ট ডাউনলোড হওয়ার জন্য অপেক্ষা না করেই আপনার কন্টেন্ট সঙ্গে সঙ্গে প্রদর্শন করতে পারেন।
তবে, swap অসুবিধা হলো, যদি ফলব্যাক ওয়েব ফন্ট এবং আপনার CSS-এ নির্দিষ্ট করা ওয়েব ফন্টের লাইন হাইট, কার্নিং এবং অন্যান্য ফন্ট মেট্রিক্সে বড় ধরনের পার্থক্য থাকে, তাহলে এটি কন্টেন্টে একটি দৃশ্যমান পরিবর্তন ঘটায়।
এর ফলে সাধারণত block তুলনায় কোনো খারাপ কিউমুলেটিভ লেআউট শিফট (CLS) হয় না (যেহেতু block লেআউটে ফলব্যাক ফন্টগুলো ধরে নিয়ে পৃষ্ঠা বিন্যাস করতে হয়, এমনকি যদি মূল লেখাটি দেখানো নাও হয়, তাই উভয় ক্ষেত্রেই কন্টেন্টের স্থান পরিবর্তন হতে পারে), তবে এটি দেখতে আরও বেশি দৃষ্টিকটু হতে পারে।
fallback
font-display এর fallback ভ্যালুটি block এবং swap এর মাঝামাঝি একটি ব্যবস্থা। swap মতো নয়, এক্ষেত্রে ব্রাউজার একটি ফন্টের রেন্ডারিং ব্লক করে, কিন্তু swap ফলব্যাক টেক্সটে শুধুমাত্র খুব অল্প সময়ের জন্য তা করে। তবে block থেকে ভিন্ন, এই ব্লকিং পিরিয়ডটি অত্যন্ত সংক্ষিপ্ত।
দ্রুতগতির নেটওয়ার্কে fallback ভ্যালু ব্যবহার করা বেশ কার্যকর হতে পারে, যেখানে ওয়েব ফন্ট দ্রুত ডাউনলোড হলে পেজটি প্রথমবার প্রদর্শিত হওয়ার সাথে সাথেই সেই টাইপফেসটি ব্যবহৃত হয়। তবে, নেটওয়ার্ক ধীরগতির হলে, ব্লকিং পিরিয়ড শেষ হওয়ার পর প্রথমে ফলব্যাক টেক্সটটি দেখা যায় এবং ওয়েব ফন্টটি এসে গেলে তা পরিবর্তিত হয়ে যায়।
optional
optional হলো font-display সবচেয়ে কঠোর মান, এবং এটি শুধুমাত্র তখনই ওয়েব ফন্ট রিসোর্স ব্যবহার করে যখন তা ১০০ মিলিসেকেন্ডের মধ্যে ডাউনলোড হয়। যদি কোনো ওয়েব ফন্ট লোড হতে এর চেয়ে বেশি সময় নেয়, তবে সেটি পেজে ব্যবহার করা হয় না, এবং ওয়েব ফন্টটি ব্যাকগ্রাউন্ডে ডাউনলোড হয়ে ব্রাউজার ক্যাশে জমা হওয়ার আগ পর্যন্ত ব্রাউজার বর্তমান নেভিগেশনের জন্য ফলব্যাক টাইপফেস ব্যবহার করে।
এর ফলে, পরবর্তী পেজ নেভিগেশনগুলো তাৎক্ষণিকভাবে ওয়েব ফন্টটি ব্যবহার করতে পারে, কারণ এটি ইতিমধ্যেই ডাউনলোড করা থাকে। font-display: optional swap এর কারণে দেখা যাওয়া ভিজ্যুয়াল পরিবর্তনটি এড়ায়, কিন্তু প্রাথমিক পেজ নেভিগেশনের সময় খুব দেরিতে এলে কিছু ব্যবহারকারী ওয়েব ফন্টটি দেখতে পান না।
ফন্ট ডেমো
আপনার জ্ঞান পরীক্ষা করুন
ব্রাউজার কখন একটি ওয়েব ফন্ট রিসোর্স ডাউনলোড করে (যদি না এটি কোনো preload ডিরেক্টিভ দিয়ে ফেচ করা হয়)?
সকল আধুনিক ব্রাউজারে ওয়েব ফন্ট পরিবেশন করার জন্য প্রয়োজনীয় একমাত্র (এবং সবচেয়ে কার্যকর) ফরম্যাটটি কী?
এরপরে: কোড-স্প্লিট জাভাস্ক্রিপ্ট
ফন্ট অপটিমাইজেশন সম্পর্কে ধারণা অর্জন করার পর, আপনি এখন পরবর্তী মডিউলে যেতে পারেন। এখানে এমন একটি বিষয় আলোচনা করা হয়েছে যা আপনার ব্যবহারকারীদের জন্য পেজ লোডের প্রাথমিক গতি উন্নত করার ব্যাপক সম্ভাবনা রাখে, আর তা হলো কোড স্প্লিটিং-এর মাধ্যমে জাভাস্ক্রিপ্ট লোড হওয়াকে বিলম্বিত করা । এর মাধ্যমে, আপনি একটি পেজ চালু হওয়ার পর্যায়ে ব্যান্ডউইথ এবং সিপিইউ-এর ওপর চাপ যথাসম্ভব কম রাখতে পারেন; এই সময়েই ব্যবহারকারীরা পেজটির সাথে ইন্টারঅ্যাক্ট করার সম্ভাবনা বেশি থাকে।