ফন্ট লোড করার সময় অদৃশ্য পাঠ্য এড়িয়ে চলুন

Katie Hempenius

Barry Pollard

কেন আপনি যত্ন করা উচিত?

ফন্টগুলি প্রায়শই বড় ফাইল যা লোড হতে কিছু সময় নেয়। এটি মোকাবেলা করার জন্য, কিছু ব্রাউজার ফন্ট লোড না হওয়া পর্যন্ত পাঠ্য লুকিয়ে রাখে ("অদৃশ্য পাঠ্যের ফ্ল্যাশ")।

সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) টেক্সট রেন্ডার হওয়ার জন্য অপেক্ষা করতে বিলম্ব হতে পারে। আপনি যদি পারফরম্যান্সের জন্য অপ্টিমাইজ করে থাকেন তবে আপনি "অদৃশ্য পাঠ্যের ফ্ল্যাশ" (FOIT) এড়াতে চাইবেন এবং একটি সিস্টেম ফন্ট ব্যবহার করে অবিলম্বে ব্যবহারকারীদের সামগ্রী দেখাতে চাইবেন, যা "আনস্টাইল না করা পাঠ্যের ফ্ল্যাশ" (FOUT) তৈরি করে।

ফন্ট প্রদর্শনের জন্য ব্রাউজার ডিফল্ট

সাধারণ ব্রাউজারগুলির জন্য এইগুলি ডিফল্ট ফন্ট-লোডিং আচরণ:

অবিলম্বে পাঠ্য প্রদর্শন করুন

এই নির্দেশিকাটি যত তাড়াতাড়ি সম্ভব পাঠ্য প্রদর্শনের দুটি উপায়ের রূপরেখা দেয়: প্রথম পদ্ধতিটি সহজ এবং ভাল ব্রাউজার সমর্থন রয়েছে৷ দ্বিতীয় পদ্ধতিটি গভীর, তবে আপনার জন্য আরও বিকল্প সরবরাহ করতে পারে। আপনার ওয়েবসাইটের জন্য সেরা পছন্দ আপনার প্রয়োজনীয়তা উপর নির্ভর করে.

বিকল্প #1: font-display ব্যবহার করুন

font-display ফন্ট প্রদর্শন কৌশল নির্দিষ্ট করার জন্য একটি API। swap ব্রাউজারকে বলে যে এই ফন্ট ব্যবহার করে পাঠ্য একটি সিস্টেম ফন্ট ব্যবহার করে অবিলম্বে প্রদর্শিত হওয়া উচিত। একবার কাস্টম ফন্ট প্রস্তুত হলে, সিস্টেম ফন্টটি অদলবদল করা হয়।

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

যদি একটি ব্রাউজার font-display সমর্থন না করে — যদিও সমস্ত আধুনিক ব্রাউজার করে — ব্রাউজার ফন্ট লোড করার জন্য তার ডিফল্ট আচরণ অনুসরণ করতে থাকে।

বিকল্প #2: কাস্টম ফন্টগুলি লোড না হওয়া পর্যন্ত ব্যবহার করার জন্য অপেক্ষা করুন৷

একটু বেশি কাজ করে, আরও কাস্টম পদ্ধতি বিবেচনা করা যেতে পারে।

এই পদ্ধতির তিনটি অংশ রয়েছে:

• প্রাথমিকভাবে একটি কাস্টম ফন্ট ব্যবহার না করার জন্য আপনার CSS রিফ্যাক্টর করে প্রাথমিক পৃষ্ঠা লোডে একটি কাস্টম ফন্ট ব্যবহার করবেন না। এটি নিশ্চিত করে যে ব্রাউজার একটি সিস্টেম ফন্ট ব্যবহার করে অবিলম্বে পাঠ্য প্রদর্শন করে।
• CSS ফন্ট লোডিং API ব্যবহার করে আপনার কাস্টম ফন্ট কখন লোড হয় তা সনাক্ত করুন৷
• কাস্টম ফন্ট ব্যবহার করতে পৃষ্ঠার স্টাইলিং আপডেট করুন।

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

এটি FontFaceObserver লাইব্রেরি দিয়েও সম্পন্ন করা যেতে পারে যা কেউ কেউ ব্যবহার করার জন্য একটি সহজ API খুঁজে পায়।

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

যাচাই করুন

সাইটটি font-display: swap :

1. DevTools খুলতে Control+Shift+J (বা Mac-এ Command+Option+J ) টিপুন।
2. লাইটহাউস ট্যাবে ক্লিক করুন।
3. নিশ্চিত করুন যে পারফরম্যান্স চেকবক্সটি বিভাগ তালিকায় নির্বাচিত হয়েছে।
4. জেনারেট রিপোর্ট বোতামে ক্লিক করুন।

নিশ্চিত করুন যে ওয়েবফন্ট লোড অডিট পাস করার সময় পাঠ্যটি দৃশ্যমান থাকে তা নিশ্চিত করুন৷