Core Web Vitals-এর জন্য ওয়েব ফন্ট অপ্টিমাইজ করুন।
এই নিবন্ধটি ফন্টের জন্য পারফরম্যান্সের সর্বোত্তম অনুশীলন নিয়ে আলোচনা করে। ওয়েব ফন্ট কর্মক্ষমতা প্রভাবিত করার বিভিন্ন উপায় আছে:
- বিলম্বিত পাঠ্য রেন্ডারিং: যদি একটি ওয়েব ফন্ট লোড না হয়, ব্রাউজারগুলি সাধারণত পাঠ্য রেন্ডারিং বিলম্বিত করে। অনেক পরিস্থিতিতে, এটি ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) বিলম্বিত করে। কিছু পরিস্থিতিতে, এটি Largest Contentful Paint (LCP) বিলম্বিত করে।
- লেআউট শিফট: ফন্ট অদলবদল করার অনুশীলনে লেআউট পরিবর্তনের সম্ভাবনা রয়েছে এবং তাই ক্রমবর্ধমান লেআউট শিফট (সিএলএস) কে প্রভাবিত করে। এই লেআউট পরিবর্তন ঘটে যখন একটি ওয়েব ফন্ট এবং এর ফলব্যাক ফন্ট পৃষ্ঠায় বিভিন্ন পরিমাণ স্থান নেয়।
এই নিবন্ধটি তিনটি ভাগে বিভক্ত: ফন্ট লোডিং , ফন্ট বিতরণ এবং ফন্ট রেন্ডারিং । প্রতিটি বিভাগ ব্যাখ্যা করে যে ফন্টের জীবনচক্রের সেই বিশেষ দিকটি কীভাবে কাজ করে এবং সংশ্লিষ্ট সেরা অনুশীলনগুলি প্রদান করে।
ফন্ট লোড হচ্ছে
ফন্টগুলি সাধারণত গুরুত্বপূর্ণ সংস্থান, কারণ সেগুলি ছাড়া ব্যবহারকারী পৃষ্ঠার সামগ্রী দেখতে অক্ষম হতে পারে৷ এইভাবে, ফন্ট লোড করার সর্বোত্তম অনুশীলনগুলি সাধারণত ফন্টগুলি যত তাড়াতাড়ি সম্ভব লোড করা হয় তা নিশ্চিত করার উপর ফোকাস করে। তৃতীয় পক্ষের সাইটগুলি থেকে লোড করা ফন্টগুলিতে বিশেষ যত্ন নেওয়া উচিত কারণ এই ফন্ট ফাইলগুলি ডাউনলোড করার জন্য আলাদা সংযোগ সেটআপের প্রয়োজন হয়৷
আপনার পৃষ্ঠার ফন্টগুলি সময়মতো অনুরোধ করা হচ্ছে কিনা তা আপনি যদি নিশ্চিত না হন তবে আরও তথ্যের জন্য Chrome DevTools-এর নেটওয়ার্ক প্যানেলের মধ্যে টাইমিং ট্যাবটি দেখুন৷
@font-face বোঝা
ফন্ট লোড করার সর্বোত্তম অনুশীলনে ডুব দেওয়ার আগে @font-face কীভাবে কাজ করে এবং এটি ফন্ট লোডিংকে কীভাবে প্রভাবিত করে তা বোঝা গুরুত্বপূর্ণ।
@font-face ঘোষণা যেকোনো ওয়েব ফন্টের সাথে কাজ করার একটি অপরিহার্য অংশ। সর্বনিম্নভাবে, এটি সেই নাম ঘোষণা করে যা ফন্টের উল্লেখ করতে ব্যবহৃত হবে এবং সংশ্লিষ্ট ফন্ট ফাইলের অবস্থান নির্দেশ করে।
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
একটি সাধারণ ভুল ধারণা হল যে একটি ফন্ট অনুরোধ করা হয় যখন একটি @font-face ঘোষণার সম্মুখীন হয় - এটি সত্য নয়। নিজেই, @font-face ঘোষণা ফন্ট ডাউনলোড ট্রিগার করে না। বরং, একটি ফন্ট ডাউনলোড করা হয় শুধুমাত্র যদি এটি পৃষ্ঠায় ব্যবহৃত স্টাইলিং দ্বারা উল্লেখ করা হয়। উদাহরণস্বরূপ, এই মত:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Open Sans"
}
অন্য কথায়, উপরের উদাহরণে, Open Sans শুধুমাত্র ডাউনলোড করা হবে যদি পৃষ্ঠাটিতে একটি <h1> উপাদান থাকে।
সুতরাং, ফন্ট অপ্টিমাইজেশন সম্পর্কে চিন্তা করার সময়, স্টাইলশীটগুলিকে ফন্ট ফাইলগুলির মতোই বিবেচনা করা গুরুত্বপূর্ণ। বিষয়বস্তু পরিবর্তন করা বা স্টাইলশীট সরবরাহ করা ফন্ট আসার সময় একটি উল্লেখযোগ্য প্রভাব ফেলতে পারে। একইভাবে, অব্যবহৃত CSS মুছে ফেলা এবং স্টাইলশীট বিভক্ত করা একটি পৃষ্ঠা দ্বারা লোড হওয়া ফন্টের সংখ্যা হ্রাস করতে পারে।
ইনলাইন ফন্ট ঘোষণা
বেশিরভাগ সাইটগুলি একটি বহিরাগত স্টাইলশীটে অন্তর্ভুক্ত করার পরিবর্তে মূল নথির <head> এ ফন্ট ঘোষণা এবং অন্যান্য সমালোচনামূলক স্টাইলিং ইনলাইন করে দৃঢ়ভাবে উপকৃত হবে। এটি ব্রাউজারটিকে শীঘ্রই ফন্টের ঘোষণাগুলি আবিষ্কার করতে দেয় কারণ ব্রাউজারটিকে বাহ্যিক স্টাইলশীট ডাউনলোড করার জন্য অপেক্ষা করতে হবে না।
<head>
<style>
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
body {
font-family: "Open Sans";
}
...etc.
</style>
</head>
সমালোচনামূলক CSS ইনলাইন করা একটি আরও উন্নত কৌশল হতে পারে যা সমস্ত সাইট অর্জন করতে সক্ষম হবে না। পারফরম্যান্সের সুবিধাগুলি স্পষ্ট, তবে এটি নিশ্চিত করতে অতিরিক্ত প্রক্রিয়া এবং বিল্ড টুলের প্রয়োজন হয় অগত্যা CSS-এবং আদর্শভাবে শুধুমাত্র সমালোচনামূলক CSS-সঠিকভাবে ইনলাইন করা হয়েছে এবং যে কোনো অতিরিক্ত CSS একটি নন-রেন্ডার ব্লকিং ফ্যাশনে বিতরণ করা হয়েছে।
সমালোচনামূলক তৃতীয় পক্ষের উত্সের সাথে পূর্ব সংযোগ করুন৷
আপনার সাইট যদি তৃতীয়-পক্ষের সাইট থেকে ফন্ট লোড করে, তাহলে এটি অত্যন্ত সুপারিশ করা হয় যে আপনি তৃতীয়-পক্ষের উত্সের সাথে প্রাথমিক সংযোগ স্থাপন করতে preconnect সংস্থান ইঙ্গিতটি ব্যবহার করুন৷ সম্পদের ইঙ্গিতগুলি নথির <head> এ স্থাপন করা উচিত। নীচের সংস্থান ইঙ্গিতটি ফন্ট স্টাইলশীট লোড করার জন্য একটি সংযোগ সেট আপ করে।
<head>
<link rel="preconnect" href="https://fonts.com">
</head>
ফন্ট ফাইল ডাউনলোড করতে ব্যবহৃত সংযোগটি পূর্ব-সংযোগ করতে, একটি পৃথক preconnect রিসোর্স ইঙ্গিত যোগ করুন যা crossorigin অ্যাট্রিবিউট ব্যবহার করে। স্টাইলশীটের বিপরীতে, ফন্ট ফাইলগুলি অবশ্যই একটি CORS সংযোগের মাধ্যমে পাঠাতে হবে।
<head>
<link rel="preconnect" href="https://fonts.com">
<link rel="preconnect" href="https://fonts.com" crossorigin>
</head>
preconnect রিসোর্স ইঙ্গিত ব্যবহার করার সময়, মনে রাখবেন যে একটি ফন্ট প্রদানকারী পৃথক উত্স থেকে স্টাইলশীট এবং ফন্টগুলি পরিবেশন করতে পারে। উদাহরণস্বরূপ, Google ফন্টের জন্য এইভাবে preconnect রিসোর্স ইঙ্গিত ব্যবহার করা হবে।
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
ফন্ট লোড করার জন্য preload ব্যবহার করার সময় সতর্ক থাকুন
যদিও পৃষ্ঠা লোড প্রক্রিয়ার প্রথম দিকে ফন্টগুলি আবিষ্কারযোগ্য করে তুলতে preload অত্যন্ত কার্যকর, তবে এটি অন্যান্য সংস্থানগুলির লোডিং থেকে ব্রাউজার সংস্থানগুলিকে সরিয়ে নেওয়ার জন্য আসে।
ইনলাইন ফন্ট ঘোষণা এবং স্টাইলশীট সামঞ্জস্য একটি আরো কার্যকর পদ্ধতি হতে পারে. এই সামঞ্জস্যগুলি দেরিতে আবিষ্কৃত ফন্টগুলির মূল কারণকে সমাধান করার কাছাকাছি চলে আসে - কেবলমাত্র একটি সমাধান প্রদান করার পরিবর্তে।
উপরন্তু, একটি ফন্ট-লোডিং কৌশল হিসাবে preload ব্যবহার করাও সাবধানে ব্যবহার করা উচিত কারণ এটি ব্রাউজারের অন্তর্নির্মিত বিষয়বস্তু আলোচনার কৌশলগুলির কিছু বাইপাস করে। উদাহরণস্বরূপ, preload unicode-range ঘোষণা উপেক্ষা করে, এবং যদি বিচক্ষণতার সাথে ব্যবহার করা হয়, শুধুমাত্র একটি একক ফন্ট ফর্ম্যাট লোড করতে ব্যবহার করা উচিত।
যাইহোক, বাহ্যিক স্টাইলশীট ব্যবহার করার সময়, সবচেয়ে গুরুত্বপূর্ণ ফন্টগুলি প্রিলোড করা খুব কার্যকর হতে পারে কারণ ব্রাউজার অন্যথায় ফন্টটির প্রয়োজন আছে কিনা তা অনেক পরে আবিষ্কার করবে না।
ফন্ট ডেলিভারি
দ্রুত ফন্ট ডেলিভারি দ্রুত টেক্সট রেন্ডারিং প্রদান করে। উপরন্তু, যদি একটি ফন্ট যথেষ্ট তাড়াতাড়ি বিতরণ করা হয়, এটি ফন্ট অদলবদল থেকে সৃষ্ট লেআউট পরিবর্তনগুলি দূর করতে সাহায্য করতে পারে।
স্ব-হোস্টেড ফন্ট ব্যবহার করে
কাগজে, একটি স্ব-হোস্টেড ফন্ট ব্যবহার করে আরও ভাল পারফরম্যান্স সরবরাহ করা উচিত কারণ এটি তৃতীয় পক্ষের সংযোগ সেটআপকে সরিয়ে দেয়। যাইহোক, অনুশীলনে, এই দুটি বিকল্পের মধ্যে পারফরম্যান্সের পার্থক্য কম স্পষ্ট: উদাহরণস্বরূপ, ওয়েব অ্যালম্যানাক দেখেছে যে তৃতীয় পক্ষের ফন্টগুলি ব্যবহার করা সাইটগুলি প্রথম পক্ষের ফন্টগুলি ব্যবহার করা ফন্টগুলির তুলনায় দ্রুত রেন্ডার করেছে৷
আপনি যদি স্ব-হোস্টেড ফন্ট ব্যবহার করার কথা ভাবছেন, তাহলে নিশ্চিত করুন যে আপনার সাইটটি একটি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) এবং HTTP/2 ব্যবহার করছে। এই প্রযুক্তিগুলি ব্যবহার না করে, স্ব-হোস্ট করা ফন্টগুলি আরও ভাল কর্মক্ষমতা প্রদান করবে এমন সম্ভাবনা অনেক কম। আরও তথ্যের জন্য, বিষয়বস্তু বিতরণ নেটওয়ার্ক দেখুন।
আপনি যদি একটি স্ব-হোস্টেড ফন্ট ব্যবহার করেন, তবে এটি সুপারিশ করা হয় যে আপনি কিছু ফন্ট ফাইল অপ্টিমাইজেশান প্রয়োগ করুন যা তৃতীয় পক্ষের ফন্ট প্রদানকারীরা সাধারণত স্বয়ংক্রিয়ভাবে প্রদান করে-উদাহরণস্বরূপ, ফন্ট সাবসেটিং এবং WOFF2 কম্প্রেশন। এই অপ্টিমাইজেশনগুলি প্রয়োগ করার জন্য প্রয়োজনীয় পরিশ্রমের পরিমাণ কিছুটা নির্ভর করবে আপনার সাইট যে ভাষাগুলি সমর্থন করে তার উপর। বিশেষ করে, সচেতন থাকুন যে CJK ভাষার জন্য ফন্ট অপ্টিমাইজ করা বিশেষভাবে চ্যালেঞ্জিং হতে পারে।
WOFF2 ব্যবহার করুন
আধুনিক ফন্ট ফন্টগুলির মধ্যে, WOFF2 হল নতুন, সবচেয়ে প্রশস্ত ব্রাউজার সমর্থন রয়েছে এবং সেরা কম্প্রেশন অফার করে৷ যেহেতু এটি ব্রোটলি ব্যবহার করে, WOFF2 WOFF এর থেকে 30% ভাল সংকুচিত করে, যার ফলে কম ডেটা ডাউনলোড হয় এবং সেইজন্য দ্রুত কর্মক্ষমতা।
ব্রাউজার সমর্থন দেওয়া, বিশেষজ্ঞরা এখন শুধুমাত্র WOFF2 ব্যবহার করার পরামর্শ দেন:
প্রকৃতপক্ষে, আমরা মনে করি এটি ঘোষণা করারও সময়: শুধুমাত্র WOFF2 ব্যবহার করুন এবং অন্য সবকিছু ভুলে যান।
ব্রাম স্টেইন, 2022 ওয়েব অ্যালমানাক থেকে
এটি আপনার সিএসএস এবং ওয়ার্কফ্লোকে ব্যাপকভাবে সহজ করে তুলবে এবং দুর্ঘটনাজনিত দ্বিগুণ বা ভুল ফন্ট ডাউনলোড প্রতিরোধ করে। WOFF2 এখন সর্বত্র সমর্থিত। সুতরাং, যদি না আপনি সত্যিই প্রাচীন ব্রাউজার সমর্থন করার প্রয়োজন হয়, শুধু WOFF2 ব্যবহার করুন। যদি আপনি না করতে পারেন, তবে সেই পুরানো ব্রাউজারগুলিতে কোনও ওয়েব ফন্ট পরিবেশন না করার কথা বিবেচনা করুন৷ আপনার যদি একটি শক্তিশালী ফলব্যাক কৌশল থাকে তবে এটি কোনও সমস্যা হবে না। পুরানো ব্রাউজারে দর্শকরা আপনার ফলব্যাক ফন্টগুলি দেখতে পাবে।
সাবসেট ফন্ট
ফন্ট ফাইলগুলি সাধারণত তারা সমর্থন করে এমন সমস্ত বিভিন্ন অক্ষরের জন্য প্রচুর সংখ্যক গ্লিফ অন্তর্ভুক্ত করে। কিন্তু আপনার পৃষ্ঠায় সমস্ত অক্ষরের প্রয়োজন নাও হতে পারে এবং ফন্ট সাবসেট করে ফন্ট ফাইলের আকার কমাতে পারেন।
@font-face ঘোষণার unicode-range বর্ণনাকারী ব্রাউজারকে জানায় যে কোন অক্ষরের জন্য ফন্ট ব্যবহার করা যেতে পারে।
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}
একটি ফন্ট ফাইল ডাউনলোড করা হবে যদি পৃষ্ঠায় ইউনিকোড পরিসরের সাথে মিলে যাওয়া এক বা একাধিক অক্ষর থাকে। unicode-range সাধারণত পৃষ্ঠা বিষয়বস্তুর দ্বারা ব্যবহৃত ভাষার উপর নির্ভর করে বিভিন্ন ফন্ট ফাইল পরিবেশন করতে ব্যবহৃত হয়।
unicode-range প্রায়ই সাবসেটিং কৌশলের সাথে একত্রে ব্যবহৃত হয়। একটি উপসেট ফন্টে মূল ফন্ট ফাইলে থাকা গ্লিফগুলির একটি ছোট অংশ অন্তর্ভুক্ত থাকে। উদাহরণস্বরূপ, সমস্ত ব্যবহারকারীদের কাছে সমস্ত অক্ষর পরিবেশন করার পরিবর্তে, একটি সাইট ল্যাটিন এবং সিরিলিক অক্ষরের জন্য আলাদা সাবসেট ফন্ট তৈরি করতে পারে। প্রতি ফন্টে গ্লিফের সংখ্যা ব্যাপকভাবে পরিবর্তিত হয়: ল্যাটিন হরফগুলি সাধারণত প্রতি ফন্টে 100 থেকে 1000 গ্লিফের মাত্রায় থাকে; CJK ফন্টে 10,000-এর বেশি অক্ষর থাকতে পারে। অব্যবহৃত গ্লিফ অপসারণ উল্লেখযোগ্যভাবে একটি ফন্ট ফাইলের আকার কমাতে পারে.
কিছু ফন্ট প্রদানকারী স্বয়ংক্রিয়ভাবে বিভিন্ন উপসেট সহ ফন্ট ফাইলের বিভিন্ন সংস্করণ প্রদান করতে পারে। উদাহরণস্বরূপ, Google ফন্ট ডিফল্টরূপে এটি করে:
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
স্ব-হোস্টিং-এ যাওয়ার সময়, এটি একটি অপ্টিমাইজেশন যা সহজেই মিস করা যায় এবং স্থানীয়ভাবে বড় ফন্ট ফাইলের দিকে নিয়ে যায়।
আপনার ফন্ট প্রদানকারী যদি এটির অনুমতি দেয় তাহলে ম্যানুয়ালি ফন্টগুলি সাবসেট করাও সম্ভব, হয় একটি API এর মাধ্যমে ( Google ফন্ট একটি text প্যারামিটার প্রদান করে এটিকে সমর্থন করে ), অথবা ম্যানুয়ালি ফন্ট ফাইলগুলি সম্পাদনা করে এবং তারপর স্ব-হোস্টিং করে৷ ফন্ট সাবসেট তৈরির সরঞ্জামগুলির মধ্যে রয়েছে সাবফন্ট এবং গ্লিফ্যাঞ্জার । যাইহোক, সাবসেটিং এবং স্ব-হোস্টিং মঞ্জুরি দেয় এমন ফন্টগুলির জন্য লাইসেন্স চেক করুন।
কম ওয়েব ফন্ট ব্যবহার করুন
বিতরণ করার জন্য দ্রুততম ফন্ট হল একটি ফন্ট যা প্রথমে অনুরোধ করা হয় না। সিস্টেম ফন্ট এবং পরিবর্তনশীল ফন্ট আপনার সাইটে ব্যবহৃত ওয়েব ফন্টের সংখ্যা সম্ভাব্যভাবে হ্রাস করার দুটি উপায়।
একটি সিস্টেম ফন্ট হল ডিফল্ট ফন্ট যা ব্যবহারকারীর ডিভাইসের ইউজার ইন্টারফেস দ্বারা ব্যবহৃত হয়। সিস্টেম ফন্টগুলি সাধারণত অপারেটিং সিস্টেম এবং সংস্করণ অনুসারে পরিবর্তিত হয়। যেহেতু ফন্টটি ইতিমধ্যে ইনস্টল করা আছে, ফন্টটি ডাউনলোড করার প্রয়োজন নেই। সিস্টেম ফন্টগুলি বডি টেক্সটের জন্য বিশেষভাবে ভাল কাজ করতে পারে।
আপনার CSS-এ সিস্টেম ফন্ট ব্যবহার করতে, system-ui ফন্ট-পরিবার হিসেবে তালিকাভুক্ত করুন:
font-family: system-ui
পরিবর্তনশীল ফন্টের পিছনে ধারণা হল যে একটি একক পরিবর্তনশীল ফন্ট একাধিক ফন্ট ফাইলের প্রতিস্থাপন হিসাবে ব্যবহার করা যেতে পারে। পরিবর্তনশীল ফন্ট একটি "ডিফল্ট" ফন্ট শৈলী সংজ্ঞায়িত করে এবং ফন্ট ম্যানিপুলেট করার জন্য "অক্ষ" প্রদান করে কাজ করে। উদাহরণস্বরূপ, একটি Weight অক্ষ সহ একটি পরিবর্তনশীল ফন্ট অক্ষর প্রয়োগ করতে ব্যবহার করা যেতে পারে যা আগে হালকা, নিয়মিত, গাঢ় এবং অতিরিক্ত বোল্ডের জন্য আলাদা ফন্টের প্রয়োজন হবে।
পরিবর্তনশীল ফন্টে স্যুইচ করে সবাই উপকৃত হবে না। পরিবর্তনশীল ফন্টে অনেকগুলি শৈলী থাকে, তাই সাধারণত স্বতন্ত্র নন-ভেরিয়েবল ফন্টগুলির চেয়ে বড় ফাইলের আকার থাকে যেগুলিতে শুধুমাত্র একটি শৈলী থাকে। যে সাইটগুলি পরিবর্তনশীল ফন্ট ব্যবহার করে সবচেয়ে বেশি উন্নতি দেখতে পাবে সেগুলি হল যেগুলি বিভিন্ন ধরণের ফন্ট শৈলী এবং ওজন ব্যবহার করে (এবং ব্যবহার করা প্রয়োজন)৷
ফন্ট রেন্ডারিং
যখন এমন একটি ওয়েব ফন্টের মুখোমুখি হয় যা এখনও লোড হয়নি, তখন ব্রাউজারটি একটি দ্বিধাগ্রস্ততার সম্মুখীন হয়: ওয়েব ফন্ট না আসা পর্যন্ত পাঠ্য রেন্ডারিং বন্ধ রাখা উচিত? নাকি ওয়েব ফন্ট না আসা পর্যন্ত পাঠ্যটিকে ফলব্যাক ফন্টে রেন্ডার করা উচিত?
বিভিন্ন ব্রাউজার এই দৃশ্যকে ভিন্নভাবে পরিচালনা করে। ডিফল্টরূপে, ক্রোমিয়াম-ভিত্তিক এবং ফায়ারফক্স ব্রাউজার 3 সেকেন্ড পর্যন্ত পাঠ্য রেন্ডারিং ব্লক করবে যদি সংশ্লিষ্ট ওয়েব ফন্ট লোড না হয়; Safari অনির্দিষ্টকালের জন্য পাঠ্য রেন্ডারিং ব্লক করবে।
এই আচরণটি font-display অ্যাট্রিবিউট ব্যবহার করে কনফিগার করা যেতে পারে। এই পছন্দের উল্লেখযোগ্য প্রভাব থাকতে পারে: font-display LCP, FCP, এবং লেআউট স্থায়িত্বকে প্রভাবিত করার সম্ভাবনা রয়েছে।
একটি উপযুক্ত font-display কৌশল বেছে নিন
font-display ব্রাউজারকে জানিয়ে দেয় কিভাবে এটি টেক্সট রেন্ডারিং এর সাথে এগিয়ে যেতে হবে যখন সংশ্লিষ্ট ওয়েব ফন্ট লোড না হয়। এটি প্রতি ফন্ট-ফেস দ্বারা সংজ্ঞায়িত করা হয়।
@font-face {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
font-display: swap;
}
font-display জন্য পাঁচটি সম্ভাব্য মান রয়েছে:
| মান | ব্লক পিরিয়ড | অদলবদল সময়কাল |
|---|---|---|
| অটো | ব্রাউজার দ্বারা পরিবর্তিত হয় | ব্রাউজার দ্বারা পরিবর্তিত হয় |
| ব্লক | 2-3 সেকেন্ড | অসীম |
| অদলবদল | 0ms | অসীম |
| ফলব্যাক | 100ms | 3 সেকেন্ড |
| ঐচ্ছিক | 100ms | কোনোটিই নয় |
- ব্লক পিরিয়ড : যখন ব্রাউজার একটি ওয়েব ফন্টের অনুরোধ করে তখন ব্লক পিরিয়ড শুরু হয়। ব্লকের সময়কালে, যদি ওয়েব ফন্ট উপলব্ধ না হয়, ফন্টটি একটি অদৃশ্য ফলব্যাক ফন্টে রেন্ডার করা হয় এবং এইভাবে পাঠ্যটি ব্যবহারকারীর কাছে দৃশ্যমান হবে না। ব্লক সময়ের শেষে ফন্ট উপলব্ধ না হলে, এটি ফলব্যাক ফন্টে রেন্ডার করা হবে।
- অদলবদল সময়কাল : অদলবদল সময়কাল ব্লক সময়ের পরে আসে। যদি ওয়েব ফন্টটি অদলবদল সময়কালে উপলব্ধ হয় তবে এটি "অদলবদল" করা হবে৷
font-display কৌশলগুলি কর্মক্ষমতা এবং নান্দনিকতার মধ্যে ট্রেডঅফ সম্পর্কে বিভিন্ন দৃষ্টিভঙ্গি প্রতিফলিত করে। যেমন এটি একটি প্রস্তাবিত পদ্ধতি প্রদান করা কঠিন কারণ এটি ব্যক্তিগত পছন্দের উপর নির্ভর করে, ওয়েব ফন্টটি পৃষ্ঠা এবং ব্র্যান্ডের জন্য কতটা গুরুত্বপূর্ণ এবং অদলবদল করার সময় দেরিতে আসা ফন্টটি কতটা জঘন্য হতে পারে।
বেশিরভাগ সাইটের জন্য, এই তিনটি কৌশল সবচেয়ে বেশি প্রযোজ্য হবে:
কর্মক্ষমতা যদি শীর্ষ অগ্রাধিকার হয়:
font-display: optional। এটি সবচেয়ে "পারফরম্যান্স" পদ্ধতি: টেক্সট রেন্ডার 100ms এর বেশি বিলম্বিত হয় না এবং নিশ্চিত করা হয় যে ফন্ট-সোয়াপ সম্পর্কিত লেআউট পরিবর্তন হবে না। যাইহোক, এখানে নেতিবাচক দিক হল ওয়েব ফন্টটি দেরীতে পৌঁছালে ব্যবহার করা হবে না।যদি দ্রুত পাঠ্য প্রদর্শন করা একটি শীর্ষ অগ্রাধিকার হয়, কিন্তু আপনি এখনও ওয়েব-ফন্ট ব্যবহার করা হয়েছে তা নিশ্চিত করতে চান:
font-display: swapতবে নিশ্চিত করুন যে ফন্টটি যথেষ্ট তাড়াতাড়ি বিতরণ করুন যাতে এটি লেআউট পরিবর্তনের কারণ না হয়। এই বিকল্পের নেতিবাচক দিক হল ফন্টটি দেরীতে আসার সময় ঝাঁকুনি পরিবর্তন।যদি একটি ওয়েব ফন্টে টেক্সট প্রদর্শিত হয় তা নিশ্চিত করা একটি শীর্ষ অগ্রাধিকার হয়:
font-display: blockব্যবহার করুন তবে নিশ্চিত করুন যে ফন্টটি যথেষ্ট তাড়াতাড়ি বিতরণ করা হয় যাতে এটি পাঠ্যের বিলম্বকে কমিয়ে দেয়। এর নেতিবাচক দিক হল প্রাথমিক পাঠ্য প্রদর্শন বিলম্বিত হবে। মনে রাখবেন এই প্রদর্শন সত্ত্বেও, এটি এখনও একটি বিন্যাস পরিবর্তনের কারণ হতে পারে কারণ পাঠ্যটি আসলে অদৃশ্য আঁকা হয়, এবং ফলব্যাক ফন্ট স্পেসটি তাই স্থান সংরক্ষণ করতে ব্যবহৃত হয়। একবার ওয়েব ফন্ট লোড হয়ে গেলে, এর জন্য পার্থক্য স্থানের প্রয়োজন হতে পারে এবং তাই একটি স্থানান্তর। এটি, তবে,font-display: swap।
এছাড়াও মনে রাখবেন যে এই দুটি পদ্ধতি একত্রিত করা যেতে পারে: উদাহরণস্বরূপ, font-display: swap ; font-display: optional ।
আপনার ফলব্যাক ফন্ট এবং আপনার ওয়েবফন্টের মধ্যে স্থানান্তর হ্রাস করুন
CLS প্রভাব কমাতে, আপনি নতুন size-adjust বৈশিষ্ট্য ব্যবহার করতে পারেন। আরও তথ্যের জন্য নিবন্ধটি দেখুন CSS size-adjust . এটি আমাদের টুলসেটে একটি খুব নতুন সংযোজন, তাই বর্তমানে আরও উন্নত এবং কিছুটা ম্যানুয়াল। তবে অবশ্যই একটি পরীক্ষা করার জন্য এবং ভবিষ্যতে টুলিং উন্নতির জন্য দেখুন!
উপসংহার
ওয়েব ফন্টগুলি এখনও একটি পারফরম্যান্সের বাধা হয়ে দাঁড়িয়েছে তবে আমাদের কাছে বিকল্পগুলির একটি ক্রমবর্ধমান পরিসীমা রয়েছে যা আমাদের এই বাধা যতটা সম্ভব কমাতে তাদের অপ্টিমাইজ করার অনুমতি দেয়।