আগের মডিউলে, আপনি শিখেছেন কিভাবে HTML, CSS, JavaScript এবং মিডিয়া রিসোর্স অপ্টিমাইজ করতে হয়। এই মডিউলে, ওয়েব ফন্ট অপ্টিমাইজ করার কিছু পদ্ধতি আবিষ্কার করুন।
ওয়েব ফন্ট লোড টাইম এবং রেন্ডারিং টাইমে পৃষ্ঠার কার্যক্ষমতাকে প্রভাবিত করতে পারে। বড় ফন্ট ফাইলগুলি ডাউনলোড করতে কিছু সময় নিতে পারে এবং ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) কে নেতিবাচকভাবে প্রভাবিত করতে পারে, যখন ভুল font-display মান অবাঞ্ছিত লেআউট পরিবর্তনের কারণ হতে পারে যা একটি পৃষ্ঠার ক্রমবর্ধমান লেআউট শিফটে (CLS) অবদান রাখে।
ওয়েব ফন্ট অপ্টিমাইজ করার আগে আলোচনা করা যেতে পারে, ব্রাউজার দ্বারা কীভাবে সেগুলি আবিষ্কৃত হয়েছে তা জেনে রাখা সহায়ক হতে পারে, যাতে আপনি বুঝতে পারেন যে কীভাবে 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 স্নিপেটে, ব্রাউজারটি "Open Sans" ফন্ট ফাইল ডাউনলোড করে কারণ এটি পৃষ্ঠার HTML-এ একটি <h1> উপাদান পার্স করে।
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 ঘোষণা
আপনি <style> এলিমেন্ট ব্যবহার করে আপনার HTML এর <head> -এ রেন্ডার-ব্লকিং CSS-সহ @font-face declarations-কে ইনলাইন করে পৃষ্ঠা লোডের সময় আগে ফন্টগুলি আবিষ্কারযোগ্য করে তুলতে পারেন। এই ক্ষেত্রে, ব্রাউজার পৃষ্ঠা লোডের আগে ওয়েব ফন্টগুলি আবিষ্কার করে, কারণ এটি ডাউনলোড করার জন্য একটি বাহ্যিক স্টাইল শীটের জন্য অপেক্ষা করতে হবে না।
preload ইঙ্গিত ব্যবহার করে @font-face ডিক্লেয়ারেশন ইনলাইন করার একটি সুবিধা রয়েছে, কারণ ব্রাউজার শুধুমাত্র বর্তমান পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় ফন্টগুলি ডাউনলোড করে। এটি অব্যবহৃত ফন্ট ডাউনলোড করার ঝুঁকি দূর করে।
ডাউনলোড করুন
ওয়েব ফন্টগুলি আবিষ্কার করার পরে এবং বর্তমান পৃষ্ঠার বিন্যাসের দ্বারা তাদের প্রয়োজনীয়তা নিশ্চিত করার পরে, ব্রাউজার সেগুলি ডাউনলোড করতে পারে। ওয়েব ফন্টের সংখ্যা, তাদের এনকোডিং এবং তাদের ফাইলের আকার উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে কত দ্রুত একটি ওয়েব ফন্ট ব্রাউজার দ্বারা ডাউনলোড এবং রেন্ডার করা হয়।
আপনার ওয়েব ফন্ট স্ব-হোস্ট করুন
ওয়েব ফন্টগুলি তৃতীয় পক্ষের পরিষেবাগুলির মাধ্যমে পরিবেশন করা যেতে পারে, যেমন Google ফন্ট , বা আপনার মূলে স্ব-হোস্ট করা যেতে পারে৷ একটি তৃতীয় পক্ষের পরিষেবা ব্যবহার করার সময়, প্রয়োজনীয় ওয়েব ফন্টগুলি ডাউনলোড করা শুরু করার আগে আপনার ওয়েব পৃষ্ঠাটিকে প্রদানকারীর ডোমেনের সাথে একটি সংযোগ খুলতে হবে৷ এটি ওয়েব ফন্টের আবিষ্কার এবং পরবর্তীতে ডাউনলোড করতে বিলম্ব করতে পারে।
এই ওভারহেড 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 সংযোগ স্থাপন করার জন্য ইঙ্গিত দেয়। কিছু ফন্ট প্রদানকারী—যেমন Google ফন্ট—বিভিন্ন উৎস থেকে CSS এবং ফন্ট রিসোর্স পরিবেশন করে।
আপনি আপনার ওয়েব ফন্টগুলি স্ব-হোস্টিং করে তৃতীয় পক্ষের সংযোগের প্রয়োজনীয়তা দূর করতে পারেন। বেশিরভাগ ক্ষেত্রে, স্ব-হোস্টিং ওয়েব ফন্টগুলি ক্রস-অরিজিন থেকে ডাউনলোড করার চেয়ে দ্রুত। আপনি যদি স্ব-হোস্টিং ওয়েব ফন্টের পরিকল্পনা করেন, আপনার সাইটটি একটি সামগ্রী বিতরণ নেটওয়ার্ক (CDN) , HTTP/2 বা HTTP/3 ব্যবহার করছে কিনা তা পরীক্ষা করে দেখুন এবং আপনার ওয়েবসাইটের জন্য প্রয়োজনীয় ওয়েব ফন্টগুলির জন্য সঠিক ক্যাশিং শিরোনাম সেট করে৷
শুধুমাত্র WOFF2—এবং WOFF2 ব্যবহার করুন
WOFF2 ব্যাপক ব্রাউজার সমর্থন এবং সর্বোত্তম কম্প্রেশন উপভোগ করে — WOFF এর থেকে 30% পর্যন্ত ভালো। ফাইলের আকার কমে যাওয়ায় দ্রুত ডাউনলোডের সময় বাড়ে। আধুনিক ব্রাউজারগুলিতে সম্পূর্ণ সামঞ্জস্যের জন্য WOFF2 ফর্ম্যাটটি প্রায়শই প্রয়োজন।
আপনার ওয়েব ফন্ট সাবসেট
ওয়েব ফন্টে সাধারণত বিভিন্ন গ্লিফের বিস্তৃত পরিসর অন্তর্ভুক্ত থাকে, যা বিভিন্ন ভাষায় ব্যবহৃত বিভিন্ন ধরনের অক্ষর উপস্থাপনের জন্য প্রয়োজন। যদি আপনার পৃষ্ঠা শুধুমাত্র একটি ভাষায় সামগ্রী পরিবেশন করে-বা একটি একক বর্ণমালা ব্যবহার করে-তাহলে আপনি সাবসেটিং এর মাধ্যমে আপনার ওয়েব ফন্টের আকার কমাতে পারেন। এটি প্রায়শই একটি সংখ্যা নির্দিষ্ট করে করা হয়—বা একটি পরিসর— ইউনিকোড কোড পয়েন্ট ।
একটি উপসেট হল মূল ওয়েব ফন্ট ফাইলে অন্তর্ভুক্ত করা গ্লিফগুলির একটি সংক্ষিপ্ত সেট। উদাহরণস্বরূপ, সমস্ত গ্লিফ পরিবেশন করার পরিবর্তে, আপনার পৃষ্ঠা ল্যাটিন অক্ষরগুলির জন্য একটি নির্দিষ্ট উপসেট পরিবেশন করতে পারে। প্রয়োজনীয় উপসেটের উপর নির্ভর করে, গ্লিফগুলি অপসারণ করা একটি ফন্ট ফাইলের আকার উল্লেখযোগ্যভাবে হ্রাস করতে পারে।
কিছু ওয়েব ফন্ট প্রদানকারী—যেমন Google ফন্ট—কোয়েরি স্ট্রিং প্যারামিটার ব্যবহারের মাধ্যমে স্বয়ংক্রিয়ভাবে উপসেট অফার করে। উদাহরণস্বরূপ, https://fonts.googleapis.com/css?family=Roboto&subset=latin URL Roboto ওয়েব ফন্টের সাথে একটি স্টাইল শীট পরিবেশন করে যা শুধুমাত্র ল্যাটিন বর্ণমালা ব্যবহার করে।
আপনি যদি আপনার ওয়েব ফন্টগুলি স্ব-হোস্ট করার সিদ্ধান্ত নিয়ে থাকেন, তাহলে পরবর্তী ধাপ হল গ্লিফ্যাঞ্জার বা সাবফন্টের মতো টুল ব্যবহার করে সেই সাবসেটগুলি নিজে তৈরি করা এবং হোস্ট করা।
যাইহোক, যদি আপনার নিজের ওয়েব ফন্টগুলি স্ব-হোস্ট করার ক্ষমতা না থাকে তবে আপনি আপনার ওয়েবসাইটের জন্য প্রয়োজনীয় শুধুমাত্র ইউনিকোড কোড পয়েন্ট সমন্বিত একটি অতিরিক্ত text ক্যোয়ারী স্ট্রিং প্যারামিটার নির্দিষ্ট করে Google ফন্ট দ্বারা প্রদত্ত ওয়েব ফন্টগুলি সাবসেট করতে পারেন। উদাহরণস্বরূপ, যদি আপনার সাইটে একটি প্রদর্শন ওয়েব ফন্ট থাকে যেটির জন্য শুধুমাত্র "স্বাগত" শব্দগুচ্ছের জন্য অল্প সংখ্যক অক্ষরের প্রয়োজন হয়, আপনি নিম্নোক্ত URL-এর মাধ্যমে Google ফন্টের মাধ্যমে সেই সাবসেটটির জন্য অনুরোধ করতে পারেন: https://fonts.googleapis.com/css?family=Monoton&text=Welcome এটি আপনার ওয়েবসাইটে একটি একক টাইপফেসের জন্য প্রয়োজনীয় ওয়েব ফন্ট ডেটার পরিমাণ উল্লেখযোগ্যভাবে হ্রাস করতে পারে, যদি এই ধরনের চরম সাবসেটিং আপনার ওয়েবসাইটে কার্যকর হতে পারে।
ফন্ট রেন্ডারিং
ব্রাউজারটি একটি ওয়েব ফন্ট আবিষ্কার এবং ডাউনলোড করার পরে, এটি রেন্ডার করা যেতে পারে। ডিফল্টরূপে, ব্রাউজারটি ডাউনলোড না হওয়া পর্যন্ত ওয়েব ফন্ট ব্যবহার করে এমন যেকোনো পাঠ্যের রেন্ডারিং ব্লক করে। আপনি ব্রাউজারের টেক্সট রেন্ডারিং আচরণ সামঞ্জস্য করতে পারেন, এবং font-display CSS প্রপার্টি ব্যবহার করে ওয়েব ফন্ট সম্পূর্ণ লোড না হওয়া পর্যন্ত কোন টেক্সট দেখানো হবে—বা দেখানো হবে না- তা কনফিগার করতে পারেন।
block
font-display জন্য ডিফল্ট মান হল block । block সাথে, ব্রাউজার নির্দিষ্ট ওয়েব ফন্ট ব্যবহার করে এমন কোনও পাঠ্যের রেন্ডারিং ব্লক করে। বিভিন্ন ব্রাউজার একটু ভিন্নভাবে আচরণ করে। একটি ফলব্যাক ব্যবহার করার আগে সর্বাধিক 3 সেকেন্ড পর্যন্ত ক্রোমিয়াম এবং ফায়ারফক্স ব্লক রেন্ডারিং। ওয়েব ফন্ট লোড না হওয়া পর্যন্ত সাফারি অনির্দিষ্টকালের জন্য ব্লক করে।
swap
swap হল সর্বাধিক ব্যবহৃত font-display মান । swap রেন্ডারিংকে ব্লক করে না, এবং নির্দিষ্ট ওয়েব ফন্টে অদলবদল করার আগে অবিলম্বে একটি ফলব্যাকে পাঠ্য দেখায়। এটি আপনাকে ওয়েব ফন্ট ডাউনলোডের জন্য অপেক্ষা না করে অবিলম্বে আপনার সামগ্রী দেখাতে দেয়৷
যাইহোক, swap নেতিবাচক দিক হল যে এটি একটি লেআউট পরিবর্তন ঘটায় যদি ফলব্যাক ওয়েব ফন্ট এবং আপনার CSS-এ নির্দিষ্ট করা ওয়েব ফন্ট লাইনের উচ্চতা, কার্নিং এবং অন্যান্য ফন্ট মেট্রিক্সের ক্ষেত্রে ব্যাপকভাবে পরিবর্তিত হয়। এটি আপনার ওয়েবসাইটের CLS-কে প্রভাবিত করতে পারে যদি আপনি যত তাড়াতাড়ি সম্ভব একটি ওয়েব ফন্ট রিসোর্স লোড করার জন্য preload ইঙ্গিত ব্যবহার করার যত্ন না নেন, অথবা আপনি যদি অন্যান্য font-display মান বিবেচনা না করেন।
fallback
font-display জন্য fallback মান হল block এবং swap মধ্যে একটি আপস। swap বিপরীতে, ব্রাউজার একটি ফন্টের রেন্ডারিং ব্লক করে, তবে খুব অল্প সময়ের জন্য ফলব্যাক টেক্সটে অদলবদল করে। block বিপরীতে, তবে ব্লক করার সময়কাল অত্যন্ত সংক্ষিপ্ত।
fallback মান ব্যবহার করা দ্রুত নেটওয়ার্কগুলিতে ভাল কাজ করতে পারে যেখানে, যদি ওয়েব ফন্ট দ্রুত ডাউনলোড হয়, ওয়েব ফন্ট হল পৃষ্ঠার প্রাথমিক রেন্ডারিং-এ অবিলম্বে ব্যবহৃত টাইপফেস। যাইহোক, যদি নেটওয়ার্কগুলি ধীর হয়, তাহলে ব্লকিং পিরিয়ড শেষ হওয়ার পরে ফলব্যাক টেক্সটটি প্রথমে দেখা যায় এবং তারপরে ওয়েব ফন্ট আসার পরে অদলবদল করা হয়।
optional
optional হল সবচেয়ে কঠোর font-display মান, এবং শুধুমাত্র ওয়েব ফন্ট রিসোর্স ব্যবহার করে যদি এটি 100 মিলিসেকেন্ডের মধ্যে ডাউনলোড হয়। যদি একটি ওয়েব ফন্ট লোড হতে এর চেয়ে বেশি সময় নেয়, তবে এটি পৃষ্ঠায় ব্যবহার করা হয় না, এবং ব্রাউজারটি বর্তমান নেভিগেশনের জন্য ফলব্যাক টাইপফেস ব্যবহার করে যখন ওয়েব ফন্টটি পটভূমিতে ডাউনলোড করা হয় এবং ব্রাউজার ক্যাশে রাখা হয়।
ফলস্বরূপ, পরবর্তী পৃষ্ঠা নেভিগেশনগুলি অবিলম্বে ওয়েব ফন্ট ব্যবহার করতে পারে, যেহেতু এটি ইতিমধ্যেই ডাউনলোড করা হয়েছে৷ font-display: optional swap এর সাথে দেখা লেআউট শিফট এড়িয়ে যায়, কিন্তু কিছু ব্যবহারকারী ওয়েব ফন্ট দেখতে পায় না যদি এটি প্রারম্ভিক পৃষ্ঠা নেভিগেশনে খুব দেরিতে আসে।
ফন্ট ডেমো
নিজের জ্ঞান যাচাই করুন
ব্রাউজার কখন একটি ওয়েব ফন্ট রিসোর্স ডাউনলোড করে (অনুমান করে এটি একটি preload নির্দেশিকা দিয়ে আনা হয়নি)?
সমস্ত আধুনিক ব্রাউজারে ওয়েব ফন্ট পরিবেশন করার জন্য প্রয়োজনীয় একমাত্র (এবং সবচেয়ে কার্যকর) বিন্যাস কী?
পরবর্তী: কোড-বিভক্ত জাভাস্ক্রিপ্ট
আপনার বেল্টের নীচে ফন্ট অপ্টিমাইজেশন বোঝার সাথে, আপনি এখন পরবর্তী মডিউলে যেতে পারেন, যা এমন একটি বিষয়কে কভার করে যা আপনার ব্যবহারকারীদের জন্য প্রাথমিক পৃষ্ঠা লোডের গতি উন্নত করার উচ্চ সম্ভাবনা রয়েছে এবং সেটি হল কোড বিভাজনের মাধ্যমে জাভাস্ক্রিপ্টের লোডিং স্থগিত করা। . এটি করার মাধ্যমে, আপনি একটি পৃষ্ঠার স্টার্টআপ পর্বের সময় ব্যান্ডউইথ এবং সিপিইউ বিতর্ক যতটা সম্ভব কম রাখতে পারেন, এমন একটি সময় যেখানে ব্যবহারকারীরা এটির সাথে ইন্টারঅ্যাক্ট করতে পারে।